Inspiration from Contentful and Netlify
The Contentful and Netlify combination has become a popular architecture for web development. This is for good reason as each of these have solved their respective problems in a powerful way. Contentful has made content easy to configure and produce. It is flexible enough to create a wide array of schemas and has easy to use API's no matter what platform that you are developing for. On the other hand it has made this content easy to create with clean customizable interfaces.
Netlify has similarly solved the problem of web hosting in a powerful way with HTTPS by default, a global CDN, and continuous integration. Combined with Github code hosting and Contentful connected site generation this creates a powerful architecture to build apps and websites on.
As seen on Static Gen there are lots of options for building the app that goes along with this infrastructure trio. While many of these options are great, one option that seemed to be missing was a static site generator that stayed as close as possible to being pure JavaScript without any other abstractions or layers built on top. So I set out to create this with OrisonJS. While in the coming weeks I plan on having a first official release of this static site generator along with corresponding blog posts, today I wanted to talk about my motivation for creating it.
Lit-html is what I would call a "bare-metal" templating library for JavaScript. Inspired by HyperHTML, these libraries use tagged template literals to create JavaScript based HTML templates. Tagged template literals are essentially interpolated strings that are then passed to a special type of function which can return something other than a string. In this case it returns an object which can be rendered to the DOM. This allows rich templating in nothing other than plain old JavaScript. Lit-html can be used by itself or alongside web components. It can also be written in a functional style for the "UI as a function of data" approach that we have seen React make popular, all while stripping away the layers of abstractions that most templating libraries introduce.
For these reasons I have fallen in love with Lit-html for creating dynamic UI's in the browser. However very often I prefer the JAMstack approach to web development. Render your UI at build time and when content changes, and deliver the pre-rendered HTML to the browser. For this I wanted a static site generator built with lit-html, and so I set out to create it.
To start I needed to render lit-html from NodeJS. Based upon recent conversations on the lit-html Github repository it looks like this might soon be available. In the meantime I am relying on popeindustries/lit-html-server for using lit-html templates in Node. I then used this to create both a static site generator and server that would render a specially formatted source directory where JavaScript files export a function which takes an Orison context object and returns a lit-html template. Some are pages that get inserted into the nearest layout, others are partials that can be reused anywhere. All of this is explained in the OrisonJS documentation.
This allowed me to not only have a website that is running on the "bare metal" of the web platform, but a build process that is running on the "bare metal" of JavaScript. This is web development how I like to do it.
