There are many articles comparing various aspects of the three most popular JavaScript frameworks, namely Angular, Vue.js and React JS. Most of these articles compare them on job demand, developer usage, developer opinion, generic pros and cons, popularity, community support and the likes. That is not what I’m going to do here. This article will provide an insight into the actual usability and practical use of these frameworks. How can this be achieved? By implementing the same single page app using the three frameworks separately.
The Idea.
In my previous articles, I have written about decoupling Drupal 8 with Angular as front-end and a comparison between React and Angular. I have created Single Page Applications using both React and Angular which uses my Drupal 8 website (https://www.abhaisasidharan.xyz) as a content server. The JSON is available at https://www.abhaisasidharan.xyz/api. Since then, I have made one more Single Page Application using Vue.js which is available here : https://vue.abhaisasidharan.xyz. Now that I have created the exact same thing thrice, using the three frameworks, I can objectively compare them from a practical point of view.
The Comparing Criteria:
Learning Curve
-
The easiest to build with was React JS, despite the fact that it doesn’t have a good CLI tool. Now that’s saying something! I learned and implemented https://react.abhaisasidharan.xyz in 2-3 days. You can get a good handle on it in just one day. The rest is just reusability. If your intention is to create an awesome UI, then React is for you!
-
Contrary to the popular opinion that Angular has the steepest learning curve, I actually found it easier than Vue.js. If you have the right documentation and tools, it is quite easy to master. I used the official documentation and thisbook. This book gives you step-by-step instructions on how to create a Single Page Application from scratch. It’s quite a good book if you want to learn how to build Angular apps in an angular way.
-
Vue.js is still in its early stages. The documentation is limited and typescript support is abysmal. But I did do a pretty decent job with just JavaScript: https://vue.abhaisasidharan.xyz
Ease of building SPAs from scratch
If you are on a timeline and you want to build an awesome UI, go with React. The render() function is the easiest thing to work with in terms of a template. Turns out you can use JSX with Vue.js as well. Which would put Vue second. But the lack of support for large projects is a concern. I would go with Angular over Vue just because of the CLI and this makes a huge difference. Since the learning curve for React is very low, you can create a simple single-page app (especially in this case) in less than a day.
Structuring Code
By far, Angular makes it the easiest to structure code. Vue.js is second and close behind is React. But I found the component structure of React the most comforting. All three of these JavaScript frameworks are component-based, but React just has components and components only. Nothing else. For example, Vue.js has views and components. The components are called from the views, which are “attached” to a route. In React, a component is “attached” to a component. This parent component calls child components which can be cascaded down to the smallest element. For example, in https://react.abhaisasidharan.xyz there is a component called Relationship which loads the relationships (images, thumbnail, taxonomy, etc) to the node. The Blog component calls the Relationship component. The Relationship component then calls the Image component which returns the <img> HTML with parameters like style, classes etc. This was something that was very attractive to me. I like the idea of breaking something down to its smallest element. For example, Universe > Galaxy > Solar System > Planet > Continent > Country > State > District … You see where I’m going with this. So the Universe component is the parent, which calls the Galaxy component, which calls the Solar System component and so on. Solar System components can also have other children like Asteroid or Satellite. But depending on the parameter passed, Solar System will either call Planet, Asteroid or Satellite.
While you are here, why don't you take a look at this article: https://www.toptal.com/react#hiring-guide. It's an article on how to hire a great React.js developer. Checkout their blog, they have some interesting content about different front-end and back-end technologies like Node.js, TypeScript, AI Models, Angular, Design Patterns and so much more.
how to hire a great React.js developerBest Practices
Angular CLI makes it very easy to follow best practices and standards. You command and angular cli does it for you. Create/edit modules, components, services, etc. See here for more details. It’s best practice to make sure the data isn’t manipulated directly. This is usually accomplished by services that do data manipulation. This is quite easily accomplished in Angular. Not the case with React or Vue.js. Vue.js provides the option to deviate from this because of its high level of customisability; a problem that Drupal faced in its early stages which were fixed in Drupal 8. React is not technically a framework so you will have to enforce this differently.
Performance
Angular and Vue have the largest file sizes. React is half that. But that has nothing to do with performance.
Below is the performance audit I ran with throttling enabled (Fast 3G, 4x CPU Slowdown)
Angular :
React :
Vue :
It looks pretty cool but there is nothing much to infer from these results. My understanding is that for this particular use case, React will be the most performant since it is the lightest and because this is a very basic UI. But if you are creating a more complex application, Angular or Vue would be better. Angular and Vue share similar benchmarks, but here it’s different because more work is done on the Angular site. Accessibility is definitely higher for React because given the time-frame in which I developed the three apps, react was the easiest to create a better user experience. If your goal is to use Drupal as a back-end and a JavaScript framework as a front-end, then definitely React is the way to go.
Development Tools
-
There is no question about the fact that Angular wins here. Angular CLI is so advanced and everything from generating components to running tests is handled wonderfully. Apart from that, the Angular Console is the best thing that happened to Angular since AngularJS! If you don’t like the CLI, you can just get the console running and can create apps, components, etc from the UI itself.
-
React has no such thing, but then again, if React became anymore simpler, even Tarzan will have his own website!
-
Vue.js also has a console or as they call it Vue UI. It is still in its early stages and not at all as advanced as Angular console or it could be; the documentation is also scant.
Support For Drupal
There is abundant support from the Drupal community to React with Drupal. Drupalize.me also has tutorials for React with Drupal.
Angular has good support in terms of articles but no clear tutorials but there is always my codebase to look into: https://github.com/codingsasi/abhaisasidharan-angular
Vue.js is in its early stages so the official support for Drupal is scant. But there are many articles on how decoupling can be done. There is again, my codebase: https://github.com/codingsasi/abhaisasidharan-vue.
In conclusion, I would choose React for building my UI. But if I'm going to build a complex application (ex. an e-commerce app) or requiring a strictly MVC approach, then Angular is the way.
Resources :
