Which frontend framework to pick as of 2021 (with benchmark)
Hi there! Not long ago I had a conversation with a mate who selected Nuxt for his project. I asked him what made him choose this framework over another. His answer was :
“I considered Angular and React, but with Angular it takes time to get an MVP, and React is over-complicated. Plus VueJS is the most performant piece of technology out there and easy to learn”.
This gave me the idea to put them all on a ring :)
I’m Franck and today, I will try to help you choose the right frontend framework/library for your next project.
List of technologies to choose from:
Based on well-established market technologies and new comers.
- VueJS
- ReactJS
- Angular
- Svelte
- ReScript (ReasonML)
- Vanilla JS
A word before we begin
Choosing a framework is often like choosing a religion: You choose one and stick to it. The idea is to make your tech stack the most stable and steady over time. Below is a list to watch for when choosing:
- It must be easy to learn and easy to develop with
- It should offer useful features at the same time
- It also should be easy to scale
- have great community support. If backed by a big company, why not? But don’t forget in this case it will first solve the companies issues, not yours
- It should have a well-written documentation
- good testing tools
- have good performance for the end-user
Easy to learn and easy to develop with
In this area, the contenders are:
- VueJS
- ReactJS
- Svelte
Offer useful features
By “useful”, I mean including features “out-of-the-box” like Routing, HTTP requesting, state management.
The contenders are:
- Angular
- Svelte
Easy to scale
Scalability is the ability to grow without affecting stability and performance.
In this area contenders are:
- ReactJS
- Angular
- VueJS
- ReScript
Great community support
This is a bit subjective. But I expect to be able to get a quick and straight answer to a problem when having one. Be it on StackOverflow, through a forum, or a chat.
My picks here are:
- ReactJS
- VueJS
- Angular
- Svelte
- ReScript
- Vanilla JavaScript
Complete and well-written documentation
The definition would be that all the answers you are seeking should be in there. I must have examples and should explain the concepts in a clear and readable manner.
My choices are:
- VueJS
- ReactJS
- Angular
- Vanilla JavaScript
Good testing tools
Here is the thing: some technologies might not need to be tested by design. This doesn’t mean you can’t, but that it doesn’t encourage it in the first place.
Here are my picks:
- VueJS
- ReactJS
- Vanilla JavaScript
I don’t put Angular in here for two reasons: its testing libraries (jasmine, karma) are a bit old now and offer no fun in writing tests. Also, writing tests for Angular components is not that easy and often needs a higher-order implementation. Writing tests should be straightforward. It’s not the case with Angular.
ReScript is a functional programming language. By design, the need for writing tests is lesser than other frameworks and libraries.
Performance
Performance may be subjective depending on how a framework/libraries delivers content to the end user. It also has to do with the way the application is built. But don’t take those as absolute and don’t base your choice only on those datas. Moreover, benchmarks won’t take acount of implementations like Flux or routing nor fetching datas. You’re warned.
Benchmarks have been done with Chrome Dev Tools. It has been established with network throttling (fast 3G).
To be the most objective as possible, I considered analyzing load time and bundle size. For each one I created a bare small template:
<div>Hello World!</div>VueJS
Load time: 1.76s
Bundle size: 99.4ko
ReactJS
Load time: 1.75s
Bundle size: 140ko
Angular
Load time: 1.17s
Bundle size: 142ko
Svelte
Load time: 1.16s
Bundle size: 4ko
Rescript
Load time: 1.15s
Bundle size: 132ko
Vanilla JavaScript
Load time: 1.16s
Bundle size: 13.7ko
Bonus
The following are benchmarks for derivated frameworks based on the previous ones.
Nuxt
Versatile static site generator based on VueJS. It allows building static and server-side rendered applications and SPAs.
Load time: 1.21s
Bundle size: 262ko
NextJS
Static site generator based on ReactJS. It allows building static and server-side rendered applications and SPAs.
Load time: 1.19s
Bundle size: 225ko
GatsbyJS
Static site generator based on ReactJS. It leverages a very large plugin system to cover all needs.
Load time: 1.20s
Bundle size: 184ko
Preact
Preact is a subset of ReactJS claiming to be faster than ReactJS.
Load time: 0.587s
Bundle size: 25.7ko
Inferno
With a ReactJS -like API, it claims to be ultra performant.
Load time: 1.21s
Bundle size: 28.1ko
Aurelia
Full-fledged frontend framework claiming to be ultra performant.
Load time: 1.72s
Bundle size: 331ko
Elm
Functional language framework that claims to be very performant.
Load time: 1.15s
Bundle size: 109ko
Conclusion
I hope this post helped you see more clearly. No clear winner as it will depend on factors involved but your needs, expectations, and preference. So my two cents are: Frameworks and libraries are not the ends. Technologies come and go. Mastering the root language is and will always remain the key, whatever your choice will be.
If you enjoyed this post, feel free to share it and start a conversation. I’d like to know if it helped you in any way or even enjoyed you.
And a little Commit Strip to close this post :)
