You know those super cool backticks-for-strings in new JavaScript?
let emotion = `happy`;
let sentence = `Chris is feeling ${emotion}`;Besides the variable interpolation in there being mighty handy, the do multi-line strings wonderfully, making them great for chunks of HTML:
const some_html = ` <div class="module> <h2>${data.title}</h2> <p>${data.content}</p> </div>
`;
That doesn’t look overly different than JSX does it?! Maybe we’d do something like that as a React component:
class MyModule extends React.Component { render() { return <div class="module"> <h2>{this.props.title}</h2> <p>{this.props.content}</p> </div>; }
}But what if we don’t really need React, or any other fairly-large-ish JavaScript framework?
What if the only thing we want is the ability to render HTML templates and also really efficiently re-render them when we need to, like React is known for?
As far as I understand it, that’s what projects like lit-html are for. As I write, it’s a pretty new library from Google and the Polymer folks.
It allows you to define an HTML template with regular template literals, like this:
import { html, render } from './lit-html.js'; const helloTemplate = (data) => html` <div class="module"> <h2>Hello ${data.name}!</h2> <p>${data.content}</p> </div>
`;Then you call the render function, passing it that template, the data, and where you want it rendered:
let data = { name: "Chris", content: "Just trying to figure stuff out."
} render(helloTemplate(data), document.body);Then say the data changes… you call render again:
data.name = "Sammy"; render(helloTemplate(data), document.body);And this is where lit-html shines. It’s smart enough to only update the parts of the DOM it needs to.
Here’s a little comparison where some data is changed, then the templates re-rendered. If we innerHTML the whole thing, well, the entire DOM is changed. With lit-html it just changes smaller inner parts.
Here’s a little video where you can see the DOM-updating difference:
There is another project along these lines too. I don’t know quite enough to judge, but it’s a bit older and I believe it’s a bit more robust. It’s called HyperHTML.
HyperHTML also allows you to create templates and render them. And most importantly rerender them efficiently.
Here’s a demo where the data comes from the Quotes on Design API and inserted into a template:
See the Pen Trying HyperHTML by Chris Coyier (@chriscoyier) on CodePen.
Kinda cool that these mini-libraries exist that do useful things for us, so when situations arise that we want a feature that a big library has, but don’t want to use the whole big library, we got smaller options.
HTML Templates via JavaScript Template Literals is a post from CSS-Tricks
