The dark ages of web development…
Servers (mostly PHP) spat out a bunch of static markup.
At some point jQuery (or earlier alternatives) came along to bring some interactivity to the web.
Query some elements, bind events, change some classes or modify the DOM in other fancy ways.
But that is hard to hand code, and hard to maintain because it has tight coupling to the DOM and server.
Web moved towards “single-page-apps”, rendered completely via javascript.
Things needed to become “declarative”. A template “declares” how your markup should look like.
“The view as function of the state” for you FP fanboys :-)
Early systems just rendered a template *string*, like on the server, and injected it via `.innerHTML`.
Still need to do manual event binding, plus recreating the whole DOM puts a lot of stress on browser. And it messes with browser-internal state like cursor-positions in form fields.
Then came along React and brought with it a thing called the “virtual DOM”.
Goal: Touching the DOM is slow, avoid it as much as possible.
So we write a declarative template, *magic happens* and the DOM is updated with minimal changes.
This *magic* has a high cost! JS Bundles get larger and larger :-( (<800K at pagestrip, minified, without code-splitting)
I talked about this before… Almost a year ago, at ViennaJS
https://www.youtube.com/watch?v=yLv3hafmSas
I gave an extended version of that talk again at LinuxWochen; that extended version had the following slide…
// a compiler plugin!
// it kind of is due to jsx, but it does not go far enough!
// transform this:
const FnComponent = props => (
<h1>{props.title}</h1>
);
// into something similar to this:
class FnComponent {
constructor() {
this.elem = document.createElement('h1');
this.text = document.createTextNode();
this.elem.appendChild(this.text);
}
render(props) {
this.text.data = props.title;
}
// …
}
// not creating / comparing useless js objects all the time
// just updates the data that’s needed
// generate different code for client or SSR *at compile time*!
aka I’m a reaaaally lazy fucker
did some experiments around generating code from templates, got distracted, never finished… :-(
I do stalk a couple of people on GitHub.
One of them is:
Known for the bundler rollup, among other things.
(Solves the problem of way too large js bundles. Check it out!)
https://svelte.technology/blog/frameworks-without-the-framework/
That is exactly what I wanted to do…
It should have been more lightweight, focusing on just one thing (rendering to DOM)
Has a custom solution for Component events. (just pass a function as prop and call that maybe?)
Comes with its own state management. (redundant if you use mobx or redux)
Comes with its own CSS solution, may not be what you want if you do js-based styling.
Try it for yourself in the repl, experiment, have fun.
Take a look at the GitHub issues, contribute :-)