Originally published by Piero Borrelli at https://blog.logrocket.com
This amazing piece of technology is loved by millions for its versatility — it can be deployed on both the server side and client side, used for mobile applications and desktop.
Other features of this language are its ability to create cool projects from the beginning, and its wide usage also makes it very marketable and extremely interesting for people trying to get their first job in this field.
And here is where the history of technology comes in and repeats itself: whenever many people have similar problems, solutions start to arise. People use their collective intellect to find better ways to make stuff. In our case, we started creating tools called frameworks.
These serve as a skeleton for our applications, defining the guidelines and best practices to develop our project while simplifying a lot of factors for us, such as code structure and maintenance.
Very often, whenever you find yourself wondering what framework to use when starting on a new project, you might feel tempted to pick one without fully and correctly analyzing it. But that may reveal itself to be quite problematic in the long run, when you might realize that the framework chosen doesn’t meet your application needs.
Let’s say you don’t want to know the differences when coding between these frameworks — fine. But what if you have a really important project, with different bottlenecks, and you need a detailed picture of which of these technologies will perform better in your case?
That is the purpose of this article: to give you the tools to make the best choice for yourself not only by giving you a quick introduction to each framework, but by providing you with performance analysis that will help you to direct your choice and pick the best one for you.
Even if we are talking specifically about performance here, I will still provide you with an overall overview of the framework. This is to help you understand why the framework was created, what specific subset of problems it is trying to solve, and its general advantages. These will all reveal themselves to be of great help later when we compare the three of them, so that you will have a quick reference to help you in your choice.
In an old, new, and emerging world of front-end JS frameworks, Angular quickly established itself as a mainstream technology used by millions of developers. And this is due not only to a good release timing, but also because it offers an incredible structure, providing easy two-way data binding, MVC model, and a built-in module system, routing package, and dependency injection.
Thanks to its MVC structure, Angular can split tasks into logical chunks, reducing the initial load time of a webpage. The MVC model also allows separation of concerns, with the view part being present on the client side, drastically reducing queries in the background. Also, communication with this tool works in an asynchronous mode, meaning fewer calls to the server are performed.
React is a front-end library used to create stateful and reusable UI components. It allows developers to create large web applications that can change data without reloading the page.
The main mission behind it is to be simple, scalable, and fast. Being, in reality, a front-end library, it doesn’t implement the MVC template in its completeness — you can, however, consider it the view part of it.
Other great advantages of using React are its performance. With a gzipped file size of 43KB, this library has quickly become famous for its incredible speed and the many features it uses to make all of this come true, such as:
By common definition, Vue.js is a progressive framework for building user interfaces. In contrast to a monolithic framework like Angular, Vue has been built to be incrementally adoptable for users.
It’s one of the most-starred JS frameworks on Github thanks to its features, relatively easy learning curve, and ability to create efficient, fast, and sophisticated single-page applications.
Especially when talking about Vue, it’s easier to compare it to React due to their relatively similar mission. Some similarities include:
When it comes to performance, Vue is an exceptionally fast tool. At an incredibly small 18KB after gzipping, this technology will probably have a long life ahead of it.
Now that I’ve given you a quick overview of all the frameworks, let’s try to put them side by side to make a proper performance comparison. By the end, you will be able to see when you should use one framework over the other.
The three factors we will be analyzing are:
Every color you will see in the images has a specific meaning:
All the tests shown are between the keyed versions of the frameworks, and all time units are expressed in milliseconds.
All the benchmarks presented below come from Stefan Krause’s excellent analysis. I’ve decided to use these in order for everyone to have an online reference for consultation. You will even find instructions to test each framework on your local machine.
As you can see from these first stats, Angular tends to perform better when it comes to DOM manipulation, except for a couple cases in which it performs worse. So, generally speaking, we can agree it performs better when it comes to this specific type of operation.
As you might have guessed, Vue.js is the absolute winner in this case. As mentioned above, the notably small size of this framework helps a great deal when it comes to startup time.
We see very similar results for React in this case, which we can concede also performs quite well here. Angular, however, suffers from its heavier structure, as we can clearly see.
Looking at these stats, we can first state that Angular is definitely slower in these categories compared to Vue and React. The latter two both perform really well, reinforcing the idea that there is no real significant difference between these two frameworks when it comes to performance. However, if we had to declare a winner, that’s still Vue in this case.
Now that we have analyzed all the three frameworks through the lens of performance, we can try to give our verdict. Please keep in mind, however, that whenever you have to choose a technology to use based on performance, it’s very hard to find solutions that will work for every situation.
The reason behind that is mainly because there are innumerable different situations you might find yourself going through when starting a new project. Also note how all the tools we talked about generally perform well and are already established technologies for developers out there. But let’s now take our best shot to guide you through this choice:
Application types that can benefit from using Angular are:
Note, however, that when it comes to small-sized static pages, Angular is definitely not the best choice. Due to its monolithic structure, this framework doesn’t work well when producing small, static pages, adding useless overhead and consequently reducing load time and overall performance.
Using this well-loved framework can provide many advantages when dealing with:
This newly created but rapidly establishing framework proves useful in many different situations, such as:
And that’s it for today! This guide should have helped you in exploring this subject. Feel free to leave a comment down below, opinions and feedbacks are extremely useful to help everybody to learn better.
Thanks for reading ❤
If you liked this post, share it with all of your programming buddies!