The battle of Frontend Frameworks (Angular, React, Vue.js)
First of all I want to point out that this post is not a matter of vs but a matter of appropriate.
Don’t judge a fish by its ability to climb a treeAlbert Einstein
Instead of focusing on which one is better you should put more effort in deciding which is better for the job at hand or if you should use any of them. Depending on your project and your team you could face a lot a issues even if you decide to use “the best” and the most trending framework out there.
So let me give you some examples:
Small websites(Blogs, Product showcase, Landing pages)
If you are working on this kinds of projects, you are most likely either a Junior developer or you are trying to make a quick buck. Either way you’re better off using some kind of CMS. They are easy to set-up, theme, add content and most important optimized for search engines out of the box. Depending on your experience, you could be up and running in a day.
Why would you want to go through the hassle of setting up a SPA application:
- establish the project architecture
- bundling
- setup the REST API platform(installing, securing, optimizing, caching etc)
- setting up prerenderer or server side rendering with universal(if you want your content to be indexed and shared properly).
Depending on how tech-savvy you are, this can take from 1 week to 1 month. Seems a lot but believe me that there are plenty of things that will not go as planned along the way.
So if it’s productivity you are looking for, it’s a no go for any of these frameworks.
eCommerce and Portals
Most of the time this type of projects need some kind of maintenance from the client(landing pages with custom layouts, changing or adding components to the layout), maintenance that might not be possible or real hard to achieve in a SPA. Again, if it’s not a special requirement from the client to use some kind SPA feature, just stick to a well-known application(Magento, Drupal).
But if you do need to have some kind of interactivity similar to a SPA, you could start building a MPA(multiple page application). This means you keep to benefit the reliability of the platform and reactivity and UX of a single page application. In this situation you can use Vue and implement multiple apps through out the application pages(ex. checkout form on checkout page, product filters on product listing page). Why Vue? Because it can be easily dropped into a project the way jQuery is and you are ready to go. Both Angular and React require a lot of initial setup(you will see later why) and although technically is possible, it’s not sustainable in the long run to use them inside other web applications.
Magento took a similar approach in Magento 2, but it uses Knockout.Js to add some SPA functionality to the platform.
I wont go into the details of what would it take to implement a full SPA on this kind of projects because personally I don’t think this would be a practical and would not bring the best ROI back to the client. I would take a lot of effort and time to develop all the functionalities that a well-established platform has acquired along years of development. There are though some cases that you would go full SPA even on an eCommerce site or Portal, so continue reading this article to find out when.
Full-blown custom applications
In this section I am talking about enterprise level applications, CRM, ERP, eLearning Platforms, eCommerce and Portals or any other custom web applications. So we are talking about the need for a lot of client oriented features, performance, modularity, scalability and good user experience.
I promised you some more details on when it’s a good idea to go full SPA on eCommerce and Portals. There might be some cases when the client wants a minimalist shopping cart: fast, responsive with good user experience or some kind of innovative approach, low impact on bandwidth and the possibility to easily add more features as the business grows. This is a good example when you can setup an eCommerce platform that offers REST API support and use some frontend framework to build the SPA. In this case you will have a stable base(the eCommerce platform) on which to build your frontend on.
And now it’s finally time to put the frameworks side by side. First of all lets assume that you do not master any of this frameworks, because if you do, just stick to that one. There will be no real benefit for you to change sides, even worse, although the framework you choose is known for having the best performance, you could end up building a less performant app because of poor understanding of a new technology. I’m not saying that you should stick to it for your whole life, just do not decide to start learning a new way of doing things along an important project.
Origin
- Angular – backed by Google
- React – built and maintained by Facebook.
- Vue – developed by an original member of the Angular 1 team, shares its roots with Angular
Although it may not seem that relevant, who is behind a technology can have a great impact on the future of your project. You wouldn’t want to spend a whole year developing an application and find out that support for the framework you used will be dropped in the following months.
Learning curve
- Angular – you will need to understand Typescript and Angular workflow, how components and modules work, dependency injection and finally a lot of optimizations(tree-shaking, AOT, lazy loading, server-side rendering, etc.)
- React – getting used to ES6 and JSX may look like a great deal, but maybe the most difficult to get the hang off would be managing the state with redux and flux
- Vue – after learning the basics of reactivity, you’ll be up and running and your entire app will end up being written as one, big Javascript object
Setup
- Angular – because it uses Typescript, it requires compilation and although there are a lot of boilerplates available, you will need to tinker with them to suit your project
- React – most projects rely on JSX (writing HTML in Javascript). For browsers to understand it, you need to compile those files to something useable by the browser. Also keep in mind that React is a library so it also requires setup and configuration for each module or extension you want to use
- Vue – one simple script tag
Scalability
This kind of applications grow pretty fast and you need to make sure they will remain stable and easy to manage in time. While in all three you can write and manage a lot of code, Angular and React have one big advantage: they natively support ES6 so OOP will improve your overall project architecture.
React and Vue heavily rely on third-party packages, so it could be real time consuming on the long run: lack of updated documentation or support, no backwards compatibility on updates, not working as expected, etc., while Angular has all what you need inside its core. There is one unofficial package that is recommended to be used for managing application state ngrx(I haven’t used it), but, from personal experience, I can say that using Angular services and dependency injections is sufficient(although tricky at first) for managing application state. This doesn’t mean you can’t build a fully functional application depending on third-party packages, it will just means you should be prepared for the obstacles that you could encounter along the way.
Performance
When talking about performance Vue is known to outperform the other two, but as you saw in the learning curve, there are a lot to learn about Angular optimizations and after you mastered them(tree-shaking, AOT, lazy loading, server-side rendering, etc.) Angular could bring the best performance on large scale applications.
Final thoughts
So what is the point of all this? Why didn’t I get deeper into technical details? Because they don’t really matter, not in the real world anyway. All three are exceptional frameworks and with enough experience and perseverance you could build any project with any of them. It’s for you to decide when, how or even if it’s appropriate to use one of this frameworks and you can use this article as a starting point.
Getting started with Angular
Getting started with React
Getting started with Vue.Js
