Below is an excerpt from an article that I wrote on Medium. If you are interested you can read the full article on Medium.
I thought it would be fun to use Stefan Krause’s benchmark tool and do some performance comparison between the most well-known front-end frameworks and UI libraries.
Please note this post is simply the accounts of my observations from running benchmarks using the aforementioned tool on my laptop. You can use this post as a reference, but you MUST always run your OWN benchmarks and make decisions based on YOUR project requirements. You should also look at other benchmarks like real-world apps benchmarks.
Now, with that out of the way, grab a cup of coffee and enjoy the show.
All the benchmarks were executed on my MacBook Pro, with the following specs:
- MacBook Pro (Retina, 15-inch, Mid 2015)
- Processor: 2.2 GHz Intel Core i7
- Memory: 16 GB 1600 MHz DDR3
- Graphics: Intel Iris Pro 1536 MB
- Browser: Google Chrome, Version 69.0.3497.100
In our benchmark competition we have two teams, the frameworks and the libraries team. In the frameworks team (Team 1) we have:
- Angular* v6.1.0
- Elm v0.19.0
- Choo v6.13.0
- AngularJS v1.7.4
- Aurelia v1.3.0
- Marionette v4.0.0
- Mithril v1.1.1
- Ember v3.0.0
In the UI libraries team (Team 2) we have:
- React v16.5.2
- Vue v2.5.17
- Preact v8.3.1
- Inferno v5.6.1
- Svelete* v2.13.5
- Bobril v8.11.2
- Redom v3.13.1
- Maquette v3.3.0
In this ultimate championship, each team is going to initially compete in their own teams. Next, to make things more interesting, the winners of each team are going to compete against each other. And finally, the top performers will compete against the all-time champion, PlainJS a.k.a VanillaJS.
Also, it’s worth mentioning that each team is going to compete in the following categories:
- DOM Manipulation
- Startup Time
- Memory Allocation
In order to have better results, each benchmark is carried out three times and the standard deviation for each result is recorded. Moreover, at the end of each teams’ battles, I will present a table summarizing the results for all the frameworks and libraries against the winner of the team.
At the end, for fun, I’ll also provide relative results for the most popular frameworks and libraries: Angular, Inferno, Preact, React, and Vue.
Team 1 Matches
The first round matches for Team 1 are listed below:
- Angular vs Elm
- AngularJS vs Choo
- Marionette vs Mithril
- Aurelia vs Ember
Read the rest of the article on Medium.