Menu

React, etc. Tech Stack

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

ES6 template literals: lit-html vs. VDOM templating

ECMAScript 6 back in 2015 was a big upgrade to the JavaScript language specification. A lot of new syntax and features were packed into this release. One of the features were template literals, identifiable by the backtick character.

In addition to allowing multi-line template strings, outputting variables with a good syntax - ES6 template literals have only recently been realised as a powerful templating tool. The VDOM approach that was popularised by React.js has been popular since 2014 remains the staple way for contemporary web developers in 2017.

For all VDOM implementations the library keeps a separate JavaScript structure representing the DOM structure in the browser. For all the changes to the structure the VDOM implementation will perform a diffing operation and will perform updates to the DOM itself.

While this method is effective, it does mean a lot of excessive processing is done. This is where lit-html, a JavaScript templating solution, comes in. It leverages the ECMAScript ES6 tagged template literals feature to use native browser rendering engine implementations to perform the same task. This will also be the standard templating method for Polymer, a Web Components library from Google going forward.

When using lit-html the browser is by default is aware where elements have been created and where modifications have been made. This translates into processing savings, as a web page or web application document will often consist thousands of DOM nodes. With lit-html and other ES6 template literals solutions there will simply be less work done.

Learn more about ES6 and template literals compared to VDOM implementations in the video below:

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Written by Jorgé on Wednesday November 8, 2017

Permalink -

« Top Three Best TypeScript Books in 2018 - React SSR Benchmarks on Node.js »