5 ms·
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
by brylie 7y ago
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?
- brylie 7y agoCorrection, 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)?
- goatslacker 7y agoI’ve been enjoying the simplicity of keeping it plain using lit-html. It lets you write declarative markup and they’re template literals.
- brylie 7y agoThanks for the suggestion :-)
- scarface74 7y agoI’ve used HandlebarsJS for the same thing. I can’t imagine you can get much simpler.
- motogpjimbo 7y agoES6 template strings make a reasonable templating language and are built-in to most browsers nowadays.
- ploxiln 7y agoKeep 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 :)
- brylie 7y agoGood perspective. I can probably stick with the 20KiB Vue dependency, particularly when it doesn't require any build system or other dependencies.
- spankalee 7y agolit-html lets you write declarative, reactive templates in plain JS, and is ~3.3k. Check it out here: https://lit-html.polymer-project.org https://lit-html.polymer-project.org
- rbanffy 7y agoThat sayHello function declaration burns my eyes. Why?
- TeMPOraL 7y agoBecause 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.
- rbanffy 7y agoIt's not the first time I see JS lambdas, or lambdas. I'm just not sure why let f = (a, b) => a + b can be considered prettier (or clearer) than let f = function (a, b) { return a + b } or (given the differences in runtime behavior) function f (a, b) { return a + b } It saves typing for trivial functions, sure, but it's yet another syntax for the same thing.
- spankalee 7y agoI prefer it for 1) Less tokens: less noise, more signal. `a + b` is the important part, let's not obscure it. 2) Lexical `this` binding. 3) Shorter and less likely to line-break. 4) No hoisting when used with let and const 5) Actually const when used with const. const module exports are faster.
- thrower123 7y agoI'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.
- jamil7 7y agoHyperapp gives you a declarative model in a tiny framework (around 3.5kb) inspired by the Elm architecture. https://github.com/JorgeBucaran/hyperapp https://github.com/JorgeBucaran/hyperapp
- brylie 7y agoSounds cool. I'll check it out :-)
- reactor 7y agoMay not be exactly what you are looking for, but take a look at https://svelte.dev/blog/virtual-dom-is-pure-overhead https://svelte.dev/blog/virtual-dom-is-pure-overhead if you haven't seen already. and this https://youtu.be/AdNJ3fydeao https://youtu.be/AdNJ3fydeao
- brylie 7y agoYeah, 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.
- mhagemeister 7y agoThere is also Preact which is a 3kb alternative to React with a similar API. https://github.com/developit/preact/ https://github.com/developit/preact/ Disclaimer: I'm one of the maintainers.
- brylie 7y agoThanks for the suggestion. Really great work keeping the framework so tiny! :-) Can Preact just be "dropped in" to an existing HTML template, like jQuery?
- helloguillecl 7y agoNo, but my understanding is that Stimulus (rails) does that.
- brylie 7y agoStimulous seems pretty nice, and can beused without a bundler :-) https://stimulusjs.org/ https://stimulusjs.org/
- mhagemeister 7y agoyup, just add the script tag and you're good to go! It's frequently used along with https://github.com/developit/htm https://github.com/developit/htm for a jsx-less template syntax. No build tools required :)
- kreetx 7y agoIf it's smaller, faster and react-compatible, then are there any downsides? Otherwise a switch would be a no-brainer.
- jammygit 7y agoI 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. Basic MVC goes pretty far
- mardix 7y agoCheck out reLift-HTML, https://github.com/mardix/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.