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.

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:

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:

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:

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:

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.