I'm wanting to enhance a server-rendered template with a bit of JavaScript to fetch data from the server and update the DOM.
I like that Vue can be "dropped in" to any HTML page, like jQuery, without completely taking over the frontend development process, but it still weighs in at 30k. Also, the Vue docs are primarily oriented towards a pre-processing SPA workflow.
Are there any light-weight libraries like Vue, around 2k-5k, that enhance static HTML with declarative DOM manipulation reactive data binding?
Is there a "plain JS" approach to declarative DOM manipulation?
Keep a sense of scale. 30 KiB is small. If all the libraries you use add up to less than 50 KiB, then really, no one will notice.
Think of a "modern best-practices" site that uses a big framework and some big addons and feature libraries, and ends up with like 500 KiB of JS. Some end up with megabytes! That's crazy. I think these developers don't have a sense of scale. They probably think I promote premature-optimization, that they're good engineers who follow best practices and use best-in-class tools and techniques ... but they don't have a sense of scale to see how the results are not reasonable.
30 KiB is small. 100 KiB total is probably quite OK. 500 KiB is very fat. 2 MiB is crazy town. Sense of scale :)
I also like that it comes with no virtual dom, but just remembering direct references to the "holes" that need filling. It's funny that vdom has gotten so much traction albeit being inherently inefficient.
Because it's the first time you've seen JS lambdas, the "html`foo`" syntax, and/or JS string interpolation?
This function looks perfectly 100% normal to me, but that's probably I spent a whole workweek once almost entirely in ObservableHQ documents, where you'd use md`...`, html`...`, etc. all the time.
I've come to like the arrow-function lambda syntax, but that's mostly because it is exactly what C# uses, and I write vastly more lambdas for LINQ and higher-order functions on the back-end than I do in JS.
The only downside is you've got to involve babel to transpile it down to the shitty old browser versions that we need to support, so you go from a simple reload to a webpack or grunt invocation that takes 30 seconds to a couple minutes, depending on how invasive the corporate anti-virus is feeling today.
Yeah, I really like the idea of Svelte. I'm just coming from the perspective of wanting to sprinkle in a little JS in my development flow, and avoid pre-processors or compilers, if possible.
Check out reLift-HTML, https://github.com/mardix/relift-html, A very small (3kb) view library that allows you to create Web Component, Custom Element, and helps you make any HTML page reactive without the bloat of big frameworks.
yup, just add the script tag and you're good to go! It's frequently used along with https://github.com/developit/htm for a jsx-less template syntax. No build tools required :)
I just write the DOM updates into a controller layer’s setter functions, or use event listeners. I find it easier to work with than angularjs, but haven’t used angular 2+ or react so maybe I’m missing out on something.
Correction, Vue minified and gzipped seems to be around 20k, so might still be my best bet for sprinkling declarative DOM manipulation into the static HTML.
Is there perhaps a library in the 2k-5k range, or somehow a way to use only specific parts of Vue (like a custom build)?
I like that Vue can be "dropped in" to any HTML page, like jQuery, without completely taking over the frontend development process, but it still weighs in at 30k. Also, the Vue docs are primarily oriented towards a pre-processing SPA workflow.
Are there any light-weight libraries like Vue, around 2k-5k, that enhance static HTML with declarative DOM manipulation reactive data binding?
Is there a "plain JS" approach to declarative DOM manipulation?