You Don't Need React: Build a Minimal UI Library in Vanilla JavaScript
You don't need React: creating a minimal UI library in Vanilla JavaScript
Pedroth argues that React's complexity is unnecessary for many projects, showing how to create a lightweight UI library using plain JavaScript. The post walks through building a simple reactive system with DOM manipulation, demonstrating that modern vanilla JS can handle state management and rendering efficiently. It's a practical guide for developers tired of heavy frameworks, offering a minimalist alternative that keeps codebases small and maintainable.
The beauty of vanilla JavaScript is that you can build your own tools, tailored exactly to your needs, without the overhead of a framework.
- afavour
I think React is way overused but every time you see a blog post with "replace it with this pet mini project instead" I groan because you know the reaction is going to be "what about X feature", and of course the mini framework doesn't do it.
I've found the perfect balance to be Astro with Preact. You will inevitably have some piece of functionality that's complex (say, a contact form) and you can lean into Preact for that. But for the vast majority of a content-heavy site you can just use Astro and skip the client-side bulk entirely.
STANDARD DISCLAIMER ANY TIME I COMMENT ON FRONT END DEV: your project may be different. A blog or a shopping site and have extremely different requirements to a full Gmail-style web app. There does not need to be a one size fits all answer.
- torginus
The whole idea of SPAs is just unfortunate most of the time. If you look at the list of the most popular websites:
https://en.wikipedia.org/wiki/List_of_most-visited_websites
Basically all of them can be decomposed to:
- List of comments/recommendations/pictures (sometimes in a tree), virtualized and lazy loaded
- A video
- A comment box
The irony is that this is super easy to represent in HTML semantically (HTML was literally made for this).
The 'virtualized and lazy loaded' part should've been a HTML standard (or more generally, partial page updates, like when you submit a comment) and then we'd have basically very little reason to do Javascript at all.
The irony of React is that what it does is make a mess of HTML, and allows you to ship your own semantic model in JSON/JS which will then get unpacked on the client into some display HTML.
This is accentuated by the fact that React's support for virtualization is really quite poor, as it assumes that you have the 'state' in RAM, and you have to go out of way to use third party libs that can handle both partial state and partial display.
Edit:
Apparently I'm not the only one who thinks this, and Chrome/W3C seems to experimenting with something similar:
https://developer.chrome.com/blog/declarative-partial-update...
But this should've been a W3C standard in like 1999.
- jakelazaroff
> The only potential issue with immediate mode is performance, since we need to re-render the entire UI on every state change.
Notice that in the task list example, if you leave some text in the input and check off a task, your text will be erased.
If we could truly treat the DOM as an immediate-mode UI, there would be no need for React/Preact/ Svelte/Solid/etc. But it turns out there are a fair number of quirks like this that preclude such simple replacements from working correctly.
(That said: I am all for experiments like this for learning, or for fun, or to try out unexplored framework design space!)
- killerstorm
Actually browsers already come with a minimal UI library. It's called HTML + CSS + JS.
There's actually no need to make any wrappers - you describe what you want in HTML and make it look good with CSS.
You only need to make UI using JS only for complex components.
Case study: I tried porting an old strategy game from pygame to web using codex. Codex decided that it doesn't need any library and raw-dogged HTML. It was able to match look and feel of an old UI with a very simple, maintenable code. Doing that with just CSS sounds kinda tedious to me, but it can be done, and honestly it looks more maintenable than any UI library.
- assimpleaspossi
I ran a web dev company for decades. There are two web sites we created I would bet money you have visited so we weren't a small, one-off shop. We had never seen the need or desire to use React. We couldn't understand why anyone else would use it either. It was too big and too complicated versus just using the fundamental elements of programming for the web. So there.
- Oras
> The only potential issue with immediate mode is performance, since we need to re-render the entire UI on every state change.
How this made it to HN front page?
- Scarblac
I feel the killer feature of doing everything in JS is components. I just want to import something from a library and use it.
Web pages have their code split between HTML, CSS and JS. There is no common story that works for all three except for using JS.
- codazoda
Even this is more complex than many websites need to be. A few months ago I wrote about why I often create pages in pure html and css.
https://joeldare.com/why-im-writing-pure-html-and-css-in-202...