New in hyperHTML v1

Andrea Giammarchi
Aug 16, 2017 · 3 min read
Image for post
Image for post

If any of you has still doubts about the revolutionary way hyperHTML uses both standard template literals and standard DOM to work, Googlers basically ended up with a pretty similar solution , just 6 months later, hence apparently not really ready for production.

Meanwhile, over these 6 months, many things happened to hyperHTML, and thanks to its little-but-growing community and contributors, it moved forward to a stable version 1.

The major change was needed due some breaking change to the engine, needed to solve most painful parts of its logic to aim best performance ever, without being too developer friendly. Well, you’d like to know this has been addressed, and users already appreciated all new features.

A Better Documentation

Another major feature in V1, is that it’s mostly fully documented in a single website. No need to look for old Markdown files in the repository, the documentation is already in a decent shape, full of explanations, and best of all, live examples on Code Pen.

Please have a look at the site and don’t hesitate to ask more or contribute.

You Can Extend Interpolations Intent

If there’s one thing lit-html was early better at, is the ability to extend what should happen to an interpolated value through its own mechanism.

hyperHTML now lets you also define intents, meaning your templates are kept scope dependencies free, portable, and testable in isolation, things AFAIK not yet possible with current lit-html.

Asynchronous results with a placeholder

It is now easier than ever to use a placeholder (text, DOM node, HTML) while you are waiting for your future content to be resolved, and replace such placeholder automatically on resolution.

You can also combine such functionality with any extended intent/behavior you’ve defined: deadly simple on-demand UI 🎉

Serving Runtime Offline Pages with Service Workers

Not only hyperHTML works on the Front End, and it has a fully compatible back-end companion for SSR; combined with the latest basicHTML, now exported for the web too, it was possible to create a full offline experience, entirely driven by hyperHTML documents.

This is not just nuts, it’s yet another broken frontier for this pattern I’ve introduced only in March, a pattern that is working now on the client, on the server, on native iOS and Android, and now on top of the dino too!

Image for post
Image for post

HyperHTMLElement and hyper router

These two projects alone might need a post a part. Yet I’d like to introduce you a perfect companion for hyperHTML based Custom Elements, as well as the express like app router that serves the super fast viper-news HNPWA.

Improved Compatibility

The current list of target browsers span from IE9 to Edge, and Android 4 to latest, passing through iOS 8 and above.

Whenever your targets won’t work with native tempalte literals, just using Babel to transpile them will be enough to grant great results!

What else ?

Moar examples, moar documentation, moar comparison and tutorials are coming soon. All I can say now is: thanks to everyone that helped ‘till now!

Happy Hyper !!!

P.S. yes, I’ve also eventually re-explained everything that needs to be said about the chosen name … it’s at the of the doc 😜

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store