hyperscript

This looks pretty awesome! Inspired by hyperscript I assume? https://github.com/hyperhype/hyperscript Question: I was looking over the source and noted that you weren’t building your virtual dom with the document fragment API https://developer.mozilla.org/en-US/docs/Web/API/DocumentFra... Is there any particular reason why? I’m curious because it’s my general understanding that creating a document fragment and attaching your vnodes to that and then pushing to the dom is more efficient especially for diffing

JSX is a paper-thin XML-like DSL on top of regular Javascript. This: <Component prop="value" /> directly translates to this: React.createElement(Component, {prop: "value"}, null); You can skip JSX entirely, and use functions only. If that's too verbose for you, some people alias `React.createElement` to `h` à la Hyperscript[1] and that becomes h(Component, {prop: "value"}, null) That's why, unlike the not-really-HTML-not-really-javascript templates of Vue and Angular, JSX is not markup. It's 99% plain old Javascript, 1% paper-thin DSL. [1] https://github.com/hyperhype/hyperscript

Embedding templates in code is actually quite nice. I used to think like you, but then I gave React a try and it completely won me over. Even without the transpilation step for JSX support, I find hyperscript [0] and friends [1] a notable improvement over other templating tools. Instead of having to jump to a separate file which magically inherits a bunch of implicit globals, you just call a function. If the system supports a component abstraction you can import them and compose views using the same programming constructs you use everywhere else. An error in the template can be caught by your linter or compiler, since it's just regular code. I'd say it's actually safer, since you typically won't have to worry about escaping values manually. And along the way you can validate the input in order to confirm you only ever generate valid HTML.

See https://github.com/hyperhype/hyperscript