I like playing with and testing latest libraries in my projects. That’s the part of our job as Software Engineers to keep learning, discover new things and ways in which we could improve our work and final products delivered. This time I spent half of my evening trying out the latest (2.0 – yeah, it’s pretty stable!) version of HTM library authored and primarily maintained by Jason Miller (@_developit), a Google guy and creator of Preact. I’ve always been a big fan of his projects so here I am looking at HTM with the genuine curiosity.

First thing – the naming. Don’t be confused. The name abbreviation doesn’t expand to Hypertext Markup. It’s actually nicely played word game and the full version of it is Hyperscript Tagged Markup.

The second thing – the size! It’s really, really tiny! Docs say it’s less than 700 bytes when used in the browser directly, less than 500 bytes when used gzipped in conjunction with Preact and 0 bytes (that’s insane!) when a dedicated Babel transpiler is used.

Okaiii, but why?

Since we all like React and JSX syntax wouldn’t it be nice to use JSX without the whole transpiling thing? No Webpack nor React framework, just plain JavaScript without the need to concatenate strings and do other magical nasty things on your own.

Since HTM was primarily created as a wrapper around Preact it’s now framework independent. You can use it with React, Preact or any other framework of your choice.

Internally HTM makes an use of the library called HyperScript which main purpose is to create Hypertext (server or client-side). It’s pretty lightweight and optimized too, its interface is just a single function used for markup description.

I’ve tried it myself, check it out here:

See the Pen HTM 2 minimal example by Mateusz Sojda (@msojda) on CodePen.0


Complete working example in just 3 lines of code. No transpiler, no Webpack. Try it yourself on CodePen.

Want more? Here are some links for you

Enjoy!

LEAVE A REPLY

Please enter your comment!
Please enter your name here