This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Other frameworks deserve some love too!
There are 4 UI frameworks that everyone knows about. Even if they haven’t tried it themselves, they know they exist because everyone else in their social circles is talking about them.
We all know what they are: React, Vue, Angular and Svelte.
If you’ve been working as a web developer for the last few years, you’ve at least heard of them. And that’s fine, but these 4 frameworks take up so much of the online noise that any news about new and interesting frameworks gets lost in the sea of articles about React, Vue or any of the other 2.
So here are 5 JavaScript UI frameworks or libraries that you’ve probably never heard of but that you likely should try.
1. Preact
Let’s start with something similar, yet different to one of the most popular libraries we’re trying to avoid: React.
While definitely not unpopular, the Preact project is not one of the main 4 frameworks used by everyday web developers, thus I’d thought about adding it here in case you’re one of those who haven’t heard about it yet.
Preact tries to provide the same — or at least a very similar — API to the one provided by React but with two major benefits:
- Smaller footprint. With a 3kb footprint, Preact is barely noticeable when it comes to downloading the dependencies from the browser.
- Better performance. While React is not necessarily slow, it is true that the simpler internal architecture of Preact (for instance, not shipping a custom event system and using the browser’s default one) make it faster. Several users have already made the comparison of building the same app with both frameworks and comparing results, giving Preact the winning hand every time.
As you can see in the following example taken from their own documentation, the code you’ll be writing is 100% compatible with React:
Granted, the import statements are different, but you could copy&paste the rest into your React project and it would just work.
This is a major benefit for React developers looking for a simpler, more straightforward alternative that still provides them with a similar (or in this case, the very same) set of features.
If you’re a React developer and you haven’t yet tested Preact, I would encourage you to check out their website and give it a try.
2. Mithril
If you’re looking for something that is barebones and works, maybe because you’re tired of always looking at the same repeated API or maybe you just need a simpler framework, maybe MithrilJS is for you.
Mithril shows itself to the world as a “modern client-side UI framework for building Single Page Applications” and it provides routing and XHR (essentially a way to send asynchronous requests outside) out of the box. Yeah, as you can see, the “list of features” is quite limited. Careful though, that doesn’t make it a bad alternative, sometimes going through the React or Vue build process just to render 3 pages with very little dynamic content is just as useless as using a bazooka to kill a mosquito.
One major lacking point from other alternatives, is its lack of state management. Mithril provides none, so whatever state you want to keep as part of your internal logic, you’ll have to handle it manually. How? It’s completely up to you.
Another out-of-the-box problem some might find is its lack of JSX support. Mithril provides a hyperscript function but unless you install the right Babel plugin you won’t be able to use JSX directly on your code. You can see how to do it here.
Don’t get me wrong though, Mithril works, and it provides the simplicity it claims at the cost of you having to do the more complex stuff on your own. Look at the following example taken from their documentation:
The Hello object is a component, which means it has a view method and it returns a DOM object defined using m , the hyperscript function provided by the framework. You can see the global (yiacks!) variable count that acts as a state variable. And if you were to run this example on CodePen, you’ll see that it works, every time you click on the button, it’ll update the counter.
Should you try Mithril? I mean, sure, if you’re into alternative options for a simpler app Mithril might be the right solution.
If on the other hand, you’re looking to build a complicated SPA, then I would suggest staying away from it, as you’ll have to do a lot of setup, and coding to achieve the basic level of functionality other frameworks already provide out-of-the-box.
3. Inferno
With probably the coolest name ever (not sponsored), InfernoJs is yet another ReactJs alternative.
It comes with a very similar API, but at the same time, it tries to provide more performance to the end-user by skipping some architectural gotchas.
For example, just like Preact does, Inferno doesn’t replicate React’s internal event system. Instead, they provide a hybrid solution: some events are synthetics while others, such as onClick are delegated to the browser.
Like any good “React killer”, Inferno provides a very similar API, so any React user can switch to Inferno easily. Any non-compatible or missing feature out-of-the-box is available in the inferno-compat package. And of course, they also claim to be faster and more lightweight than React, as you can see in these benchmarks here. Are they actually faster? You’ll be the judge of that.
One of the greatest “features” of inferno is the community, while it isn’t one of the most popular frameworks out there, it has a great community providing support and extra functionality that makes it grow even further from what the original authors ever intended.
This translates to having ports of other packages such as Bootstrap compatibility in the form of inferno-bootstrap, or a FloaterUI (used to be PopperJS) wrapper with inferno-popper. And the list goes on, you can see the full list of community-made libraries here.
As Inferno is compatible with React code, there is nothing really worth showing with an example, so let’s move on to the next framework.
4. Hyperapp
Remember when I said Preact was small? Well, Hyperapp has it beat, with around 1Kb of filesize, Hyperapp is probably the smallest UI framework/library out there.
Given how small its footprint is, its approach is quite similar to that of Mithril with some improvements.
Let’s first look at a code example:
Very similar to Mithril’s isn’t it? In fact, the main difference is that Hyperapp actually takes the concept of “state” into itself allowing you to initiate your app with it and then use it throughout the code. The example above will render a checkbox and a text element next to it, all inside a div container. Based on the click event defined on the checkbox the class of the container will change.
While the example is quite basic, Hyperapp provides a lot more functionality for just 1Kb of footprint, so if you’re looking for something small that packs a punch, I would highly recommend you check it out.
5. SolidJS
A re-imagined version of React, if you will, modernized to have a simpler, more elegant API without the hustle of having to deal with a VirtualDOM, SolidJS provides a fully TypeScript-compatible experience to web developers.
That was a tongue-twister of an intro paragraph, but it kinda summarizes everything the homepage of SolidJS tries to sell. Essentially this is a framework that instead of offering a “better React”, tries to improve on the work the team behind React (and knockout) is doing.
Their API is not 100% compatible, but they do take some of the concepts. Instead of state, they handle signals, which are the basics for any reactive behavior you might want to accomplish.
For example, if you wanted to display a number that increases every second, you’d use signals like this:
Granted, it’s almost like using the useState hook, but you get the point. The “almost” part is what makes it different. And of course, internally the architecture is completely new, but you don’t get to see it as a user of the framework.
There is a lot more to SolidJS than just signals, so I really encourage you to take a look at their documentation, which by the way, it’s very complete and filled with practical examples!
If you’re looking for something new and mature, instead of just a more performant version of React or a minimalistic library, give Solid a chance, you won’t be disappointed!
Just like learning about a new programming language can improve the way you code with your go-to language, learning about a new framework, even if you’re not going to use it right now, will help you improve the way you use your current one.
Give these 5 underdogs of the UI community a chance and take them for a spin, especially if they’re quite different from what you normally use. It’ll be a great opportunity for you to understand the shared core concepts while learning about new ones you might be able to extrapolate into your daily work!
Have you heard of any other framework that deserves an honorable mention here? Leave the link in the comments!
Build apps like Lego. Have more fun.
We all like playing Legos. A box of modular pieces means we can compose anything we imagine, by ourselves or with others.
Yet, we develop most our applications as monoliths, where all the code is internal, coupled, and can’t be used anywhere except in this one app. This is slow, painful, and not much fun.
But what if we could build independent components first? And then use them to compose as many applications as we like, alone or with others?
OSS Tools like Bit offer a great developer experience for building independent components and composing applications. Every component can be used in many projects, integrated with other components, and shared with your team. Give it a try →
Underdog UI Frameworks: 5 JavaScript Frameworks you Need to Try in 2022 was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Fernando Doglio | Sciencx (2022-01-26T08:55:04+00:00) Underdog UI Frameworks: 5 JavaScript Frameworks you Need to Try in 2022. Retrieved from https://www.scien.cx/2022/01/26/underdog-ui-frameworks-5-javascript-frameworks-you-need-to-try-in-2022/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.