Hacker News Reader

Comment by brylie | Hacker News Reader

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?

View on HN

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 :)

Good perspective.

I can probably stick with the 20KiB Vue dependency, particularly when it doesn't require any build system or other dependencies.

lit-html lets you write declarative, reactive templates in plain JS, and is ~3.3k. Check it out here: https://lit-html.polymer-project.org

That sayHello function declaration burns my eyes.

Why?

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.

It'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.

I 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.

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.

Just don't compile during development. Only compile for testing on and differential serving to legacy browsers.

Yeah, I was excited about Polymer when learning about Web Components.

I'll read more about lit-element. Thanks :-)

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.

May not be exactly what you are looking for, but take a look at https://svelte.dev/blog/virtual-dom-is-pure-overhead if you haven't seen already.

and this https://youtu.be/AdNJ3fydeao

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.

I’ve been enjoying the simplicity of keeping it plain using lit-html. It lets you write declarative markup and they’re template literals.

Thanks for the suggestion :-)

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.

Hyperapp gives you a declarative model in a tiny framework (around 3.5kb) inspired by the Elm architecture. https://github.com/JorgeBucaran/hyperapp

Sounds cool. I'll check it out :-)

Ah dang. Requires a bundler. I am really just wanting to enhance an existing HTML template.

It seems many of the JS frameworks add a lot if, IMHO unnecessary, complexity.

Ah my mistake, I thought you could drop it in a script tag.

There is also Preact which is a 3kb alternative to React with a similar API. https://github.com/developit/preact/

Disclaimer: I'm one of the maintainers.

Thanks for the suggestion. Really great work keeping the framework so tiny! :-)

Can Preact just be "dropped in" to an existing HTML template, like jQuery?

No, but my understanding is that Stimulus (rails) does that.

Stimulous seems pretty nice, and can beused without a bundler :-)

https://stimulusjs.org/

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 :)

If it's smaller, faster and react-compatible, then are there any downsides? Otherwise a switch would be a no-brainer.

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.

Basic MVC goes pretty far

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)?

https://github.com/choojs/choo

I'll check it out.

I’ve used HandlebarsJS for the same thing. I can’t imagine you can get much simpler.

ES6 template strings make a reasonable templating language and are built-in to most browsers nowadays.

Reply on news.ycombinator.com