HN Explorer

Ask HN: What JS framework/library would you use for lightweight frontend work

28 points by omgmajk ↗ HN
I am soon starting a project where I am in need of a JavaScript framework to do pretty much only very lightweight frontend work with. I have looked around at things like react, angular, vue, svelte, ember and so on but all of them seem pretty hefty for the purpose. I could use vanilla JS but I am in the mood for testing something new. The other parts of the tech stack are going to be node/express, some css framework like tailwind or bulma and sqlite. Basically to be as "portable" as possible.

Any advice or tips would be greatly appreciated.

36 comments

[ 3.3 ms ] story [ 71.8 ms ] thread
montroser
You might look at Alpine.js.

Or, if you're in the mood for something different, you could also consider native WebComponents. That set of APIs has broad browser support, and can be powerful enough as-is for many applications.

omgmajk
Thanks! This sentence mirrors pretty much everything I was looking for: "Think of it like jQuery for the modern web.". Gonna check it out. :)
DLA
+1 for Alpine. So awesome and can do a lot for you without the complexity of full frameworks. And no build pipeline to mess with. I’ve used Alpine with Go templates on multiple projects and have been very happy.
omgmajk
Thanks to you as well! It looks pretty promising. :)
JSdev1
Vanilla JS is best I recommend sticking with that and improving your skills. Everyone thinks they need a framework but Vanilla is powerful if you know what you are doing
omgmajk
Technically you are correct, I never use frameworks for other things. I program mostly in Python, PHP, C and C# - but I am in the mood for using one and I need to rapidly develop this... and quite frankly I don't like to do frontend so it's much more fun this way. The goal is to write as little code as humanly possible.
dyeje
Stimulus or Alpine for sure.
janglezz
+1 Stimulus. My team has been using it in a Rails app and it’s a joy to work with. We threw out our React front end and don’t miss it at all.
omgmajk
Stimulus looks pretty cool as well, thanks for pitching it!
udbhavs
Petite-vue (https://github.com/vuejs/petite-vue) is also an alternative to Alpine. It offers a v-scope property similar to x-data so you do most things within markup without having to jump to JS, and it will be easier to move to regular Vue if you ever need something more feature-complete down the road.
omgmajk
This is also pretty interesting, if I ever decide to expand the app. This is pretty much a jungle for me, haha. Thank you!
daltonlp
After trying alpinejs for a small frontend-only project (https://spreadsheettimeline.com), I am absolutely sold.

Good constructs, low complexity space, no compilation required.

Tailwind is also excellent.

omgmajk
It does look pretty sweet. Thanks for the extra input!
DarthNebo
Bulma CSS & vanillaJS/jQuery should be enough for most cases. Fast enough, instant feedback/updates and lightweight.

You'll be saving yourself a lot of time by not googling version compatibility issues or some obscure package bug of the front-end framework itself.

You only need full blown frameworks when you create an application which multiple teams would be working independently on and preferably using CI-CD as the means of deployment, this is absolutely not needed when you're trying to validate a solution or build a one-off project.

omgmajk
Honestly I was debating jQuery but I have used it in the past and was interested in something different. Alpine looks pretty much like what I need but still looking up everything in this post. :)
Andys
I can't offer you advice, but I am wondering, in the use case of "lightweight", what do we think JS is needed for?

Why not go plain HTML? (with the odd little JS snippet for anywhere it is truly needed)

omgmajk
Mainly because I want to try something new and because I dislike frontend so much that I pretty much need to play with something other than vanilla.
wilsonfiifi
You can give Mithril.js [0] a go. It's lightweight and has a couple additional goodies such as routing and xhr inbuilt. It has very good documentation as well.

You can also enable JSX [1] if you prefer that to hyperscript.

A site with more code examples and up to date [2]

[0] https://mithril.js.org/

[1] https://mithril.js.org/jsx.html

[2] https://mithril-by-examples.js.org/

omgmajk
Thanks! Mithril looks very promising as well. Gonna play around with it during the weekend. :)
Graffur
The answer is React, or if by lightweight you mean library size, then use Preact [0] which is 3kB .

[0] https://preactjs.com/guide/v10/differences-to-react

alserio
I'm sure, even if I cannot prove it, that React has its use cases. But even if you ignore the library size, it's not lightweight for any definition of the world. Preact is nice, though.
Graffur
React is a front-end library that isn't particularly 'deep'. It's pretty simple to do simple things. By that definition it's lightweight in my opinion.
marto1
I'd pitch in SolidJS on the lightweight part. Overhead is close to zero and the library is ~15Kb I think.
alserio
You have already excluded svelte, so maybe you need something more plug and play, but it is lightweight, fast and quick to adopt. It works great even for single dynamic components embedded in static html. But it all depends of on what you need js at all. Since nobody have said it yet, don't forget to look at Solid, it's really a njce gem
omgmajk
I haven't really excluded svelte but looking at it, it seems to be a lot of tooling for the (pretty) minimal work I need to do. However, I was initially debating with myself if svelte or vue would be the right choice. Gonna check solid out, thanks for the suggestion!
alserio
Well, yes you'd need a compiler step, usually done with rollup or webpack. If you are aiming for a "no build step" setup you probably have to skip all the jsx libraries too. Vue should still be a good choice, I haven't used vue 3 yet, but at least in vue 2 you could use it right in the browser. Otherwise mithril is cool.

Edit: about solid, the normal "mode" precompiles jsx, but i believe you can use it even without it a la hyperscript

omgmajk
I would indeed prefer to be without such a step. Thanks for the info!
austincheney
I prefer to define front end components as schemas using TypeScript interfaces. I reference elements from event handlers as event.target.

All the composition without any luggage or slowness forced on the user.

omgmajk
If this was a bigger project, something along those lines would have been better most likely. In this case I need to just get it done and end users are not going to look at it as a website, it's more of an app that you install and use yourself in this scenario.
the__alchemist
What are your project requirements?
omgmajk
My requirements as in what requirements am I writing for my software, or what requirements do I have on the JS framework I'm choosing (speed, blabla)?
timdaub
I started to use htm as a templating language for fastify and express. It's pretty cool as you have familiar JSX-ish syntax in backend templates.

As a next step, I wanna build my own web components and include the tags on the backend. I want to develop frontend apps by controlling them on the backend.

Ficusjs looked interesting.

omgmajk
Gonna check out ficusjs, thanks!