I already wrote about preact and how impressed I am that this really small library is on par feature-wise with React. Turns out, being a small library has another advantage: it makes it easier to create a code walkthrough that is easy to follow for any developer interested in the matter. Adam Solove has created just that: a new series of articles (part1, part2) explaining how react is implemented and how it does its magic.

These are really in depth article that goes over the code and the algorithm behind preact vdom diffing algorithm. In part one there is also a nice blurb explaining how JSX is used to turn this:

/** @jsx h **/
import { render, h } from 'preact';
render(<p size="5"><span>foo</span><i>bar</i></p>, document.body);

into this:

/** @jsx h **/
import { render, h } from 'preact';
render(h("p",{ size: "5" }, 
    h("span", null, "foo"),
    h("i",null,"bar")
), document.body);

Over the last year, I have used mithril.js as our vdom library on Stingray. I have grown used to the hyperscript function m (similar to preact’s h) and I will admit I REALLY prefer to use m directly without resorting to JSX. No transpiling and the template is in Javascript (and thus fully debugaggable) are big advantages in my book.