In today's JavaScript ecosystem, one of the most prevalent barriers to entry appears to be the amount of tooling required to bootstrap a web site or application: we live in an era of transpilers, bundlers and build tools that often need to be understood and tinkered with in order to create rich web experiences.
With server-side rendering in the mix, this equation often grows even more complex: we require special renderers that serialize these applications, usually described with JSX, into HTML strings or streams that browsers can then parse.
The requirements of building and deploying web pages today often come with significant overhead, leading to slower Lambda (λ) boot times, larger file sizes, and ultimately, higher costs. One solution to this that we would like to highlight is HTM that aims to remedy this.

HyperScript Tagged Markup

HTM (HyperScript Tagged Markup) is a library by Jason Miller that is extremely fast, lightweight and makes use of native JavaScript features turning the need for compiling your templates away into a very small optimization.
The name HTM contains a reference to HyperScript: a library that enables creating hypertext markup using JavaScript. It exports a single function, whose signature describes the markup to be generated.
h(tag, props, ...children)

HyperScript function signature

If the above function signature looks familiar, it is because it is familiar: it is identical to React.createElement, which is included in the transpiled output of React JSX.
HTM comes with a number of benefits. Namely,

Small footprint

Since HTM is around 700 bytes, it does not have a significant impact on the size of a compiled bundle. For those interested, we have previously posted such metrics in our related post about serverless SSR.



HTM compiles away, leaving no footprint

Moreover, in some cases, HTM completely disappears after compilation. This means that our λs can be lighter and have smaller requirements, ultimately leading to more affordable, sustainable, and scalable deployments.

Framework agnostic

HTM simply transforms tagged template literals from pure, vanilla JavaScript into a HyperScript-style invocation. It can be bound to any function implementing the HyperScript signature: including React.createElement, and h from Preact or Vue.
import htm from 'htm'
import { createElement } from 'react' // or
import { h } from 'preact' // or anything else

const html = htm.bind(createElement /* or any hyperscript-style function */)

const MyComponent = props => html\`
  <div>Your name is \${props.name}</div>
\`

A sample component implemented with HTM

This makes HTM truly framework agnostic and flexible, allowing components to be described one way, and passed to varying UI renderers.

JavaScript Module Ready

HTM does not require a module bundler, but instead is a JavaScript module. JavaScript modules are relatively new and supported in all major browsers. This allows HTM to be included via a <script> tag in a browser, further simplifying the development process.



ES Module support landed in all major browsers in May

An example

Given the quick adoption path of HTM, we threw together a Lambda λ that retrieves news from HackerNews using Algolia's search API, and then renders its data using HTM and vhtml.

HTM λ News: Powered by HTM and Now

The result is a simple web page that looks and feels as though it was written with JSX and then magically transpiled to plain JavaScript, but in actuality, it is a series of simple vanilla JavaScript functions.
const h = require('vhtml')
const html = require('htm').bind(h)
const getNews = require('./get-news')

module.exports = async (req, res) => {
  const news = await getNews()

  const NewsLink = props => html\`
    <li>
      \${props.title} (<a target="_blank" rel="noopener" href="\${props.url}">link</a>)
    </li>
  \`

  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
  res.end(html\`
    <html>
      <head>
        <link
          href="https://unpkg.com/superstylin@1.0.3/src/index.css"
          rel="stylesheet"
        />
      </head>
      <body>
        <div>
          <h1>HTM λ News</h1>
          \${news.map(n => html\`<\${NewsLink} title="\${n.title}" url="\${n.url}" />\`)}
        </div>
      </body>
    </html>
  \`)
}

The entire HTM News Lambda λ implementation

This simplifies developer experience, and enables more approachable development. Additionally, given that we build λs in the cloud with Now 2, HTM is able to be built with a barebones Node.js builder without more complex tooling for transpilation.

Conclusion

HTM does a great service to making UI development far more accessible, just as Now serves to make serverless cloud computing accessible to all. When HTM's tiny footprint and simplicity is considered together with Now's pay for what you use model, it makes web and cloud development far more approachable. We are excited to see the great things that our developer communities will build together in the near future.