Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

lit-html, JavaScript templating from Polymer team at Google

Producing HTML output in JavaScript remains an unsettled area. There are many schools in the game, some proclaiming the use of a dedicated templating language like Handlebars, while at the other end developers want to do templating in pure JS.

In the templating area a new experimental approach, lit-html, is being built by the Polymer team at Google. There is currently a mix of "Just JavaScript" templating approaches such as the JSX format from React, and custom templating syntaxes like the one from Vue.js or the one from Angular. In addition there is the native HTML template specification used by Polymer, and the HTML Literals usable in *any* project using ECMAScript 6 or higher.

The Polymer team at Google, lead by Justin Fagnani, have worked on a hybrid solution, where raw ES6+ templates literals are used together with concepts familiar to users of the JSX template. At the time of writing the effort is in the PolymerLabs, which means the effort put into it is limited, and the project is not yet recommended for production use.

lit-html has JSX like syntax based on Web Standards

This effort seems to be a response to the criticism from the React community regarding Web Components templating and state management issues. React proponents have slated the lagging of adoption of Web Components due to being cumbersome syntax and making providing no clear way of State Management from JavaScript.

The lit-html project is somewhat aimed at this critique, and it has four major goals it aims to fulfill:

  1. Efficient updates of previously rendered DOM
  2. Easy access the JavaScript state that needs to be injected into DOM
  3. Standard syntax without required build steps, understandable by standards-compliant tools
  4. Very small size

With these as the guiding rules, lit-html could grow to be a universal templating library usable in many kinds of projects. As an example, here is how you could build a React styled component with lit-html:

class MyElement extends CoolBaseElement {

  static get observedProperties() {
    return ['message', 'name'];
  }

  title = `About lit-html`;
  body = `It's got potential.`;

  render() { return html`
    <h1>${this.title}</h1>
    <p>${this.body}</p>
  `;}
}

lit-html has the potential to be a universal templating layer

Don't expect to see lit-html replacing the HTML templates in Polymer and other Web Components implementations, but consider it as a tool that is applicable from single file small projects to large projects using a complete JavaScript framework. Potentially the best thing about it is the versatility.

As you could see from the code example above, React developers accustomed to JSX can easily pick up lit-html and it's practises, but you can use it in place anywhere with minimal overhead:

const sayHello = (name) => html`<div>Hello ${name}!</div>`;

const container = document.querySelector('#container');
render(sayHello('Steve'), container);
// renders <div>Hello Steve!</div> to container

DOM updates are often seen to be as inefficient, but lit-html does offer an improvement over raw DOM manipulation that the team claims is an improvement over virtual DOM based libraries like React. In the case of lit-html the team has implemented a template handler that returns a TemplateResult instead of raw DOM nodes.

The TemplateResult is an object that contains the template and values that are used to create or update the Document Object Model (DOM). As an example if we continue on the previous example and re-render the template with a different variable:

render(sayHello('Kevin'), container);
// renders to <div>Hello Kevin!</div>

in this case lithtml will take control and update the output, but behind the scenes it only updates the ${name} part instead of rendering the complete DOM node - because the element has already been created before in the earlier snippet. The mechanics of this algorithm are roughly described in the technical documentation.

We look forward to where the Polymer team and the community will push this novel approach. There is plenty of potential here, for sure. To get started you can already get the lit-html package from NPM, or take a look at the source code on GitHub. Friends of TypeScript will be happy to learn that the library is written in TS.

Written by Jorgé on Thursday July 27, 2017

Permalink - Tags: javascript, react, jsx

« What is new for JavaScript in ECMAScript 8 / ES2017? - Major React core rewrite AKA Fiber enters Beta »