Skip to main content

Angular vs React JS vs Vue Js: A comparison of front-end javascript frameworks for headless (decoupled) Drupal 8

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 learnt 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 this book. 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 the 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 template. Turns out you can use JSX with Vue.js as well. Which would put Vue second. But the lack of support of 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 is “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 down 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 component can also have other children like Asteroid or Satellite. But depending on the parameter passed, Solar System will either call Planet, Asteroid or Satellite.

Best 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 the 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 was 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 :

Angular Performance

React :

React Performance

Vue :

Vue.js Performance

 

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, 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 by the Drupal community for React with Drupal. Drupalize.me also has tutorials for React with Drupal.

Angular has a 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 :

  1. https://github.com/codingsasi/abhaisasidharan-angular
  2. https://github.com/codingsasi/abhaisasidharan-react
  3. https://github.com/codingsasi/abhaisasidharan-vue

Share this post