7 ms·
Ask HN: What JS framework/library would you use for lightweight frontend work
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.
- montroser 5y agoYou 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 5y agoThanks! This sentence mirrors pretty much everything I was looking for: "Think of it like jQuery for the modern web.". Gonna check it out. :)
- claviska 5y agoAlpine is great and works well with web component libraries, such as Shoelace, which can save you a lot of time. https://shoelace.style/ https://shoelace.style/
- DLA 5y ago+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 5y agoThanks to you as well! It looks pretty promising. :)
- JSdev1 5y agoVanilla 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 5y agoTechnically 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 5y agoStimulus or Alpine for sure.
- udbhavs 5y agoPetite-vue (https://github.com/vuejs/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 5y agoThis is also pretty interesting, if I ever decide to expand the app. This is pretty much a jungle for me, haha. Thank you!
- daltonlp 5y agoAfter trying alpinejs for a small frontend-only project (https://spreadsheettimeline.com https://spreadsheettimeline.com), I am absolutely sold. Good constructs, low complexity space, no compilation required. Tailwind is also excellent.
- omgmajk 5y agoIt does look pretty sweet. Thanks for the extra input!
- DarthNebo 5y agoBulma 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 5y agoHonestly 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 5y agoI 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 5y agoMainly 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 5y agoYou 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/ https://mithril.js.org/ [1] https://mithril.js.org/jsx.html https://mithril.js.org/jsx.html [2] https://mithril-by-examples.js.org/ https://mithril-by-examples.js.org/
- omgmajk 5y agoThanks! Mithril looks very promising as well. Gonna play around with it during the weekend. :)
- Graffur 5y agoThe 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 https://preactjs.com/guide/v10/differences-to-react
- alserio 5y agoI'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 5y agoReact 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 5y agoI'd pitch in SolidJS on the lightweight part. Overhead is close to zero and the library is ~15Kb I think.
- alserio 5y agoYou 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 5y agoI 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 5y agoWell, 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 5y agoI would indeed prefer to be without such a step. Thanks for the info!
- austincheney 5y agoI 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 5y agoIf 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.
- joshxyz 5y agoChechk this benchmark comparing front-end frameworks (includes alpine, react, vuew, svelte, etc) : https://krausest.github.io/js-framework-benchmark/index.html https://krausest.github.io/js-framework-benchmark/index.html Maybe try https://github.com/solidjs/solid https://github.com/solidjs/solid
- omgmajk 5y agoNice one, sifting through the results will be my night time entertainment. Thank you! Solid looks pretty cool too, I'm eyeing it at the moment.
- the__alchemist 5y agoWhat are your project requirements?
- omgmajk 5y agoMy 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 5y agoI 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 5y agoGonna check out ficusjs, thanks!