Skip to main content

React vs Angular : The better head for the "Headless (decoupled) Drupal"

Drupal has always been criticized for its difficulty in creating truly good UI/UX, especially Drupal 7. In Drupal 8 this is considerably easier with the new twig engine. Even then there is a limitation to what we can do with the UI/UX. Don’t get me wrong, Drupal 8 backend is a godsend; extremely flexible and extensible. But to actually get that much flexibility in the front, we have to decouple.

The figure below shows what decoupling looks like at a very high level. It is possible to use twig and also have all the nodes available as JSON. In my site: www.abhaisasidharan.xyz, there is an API available at www.abhaisasidharan.xyz/api, also by adding ?_format=JSON at the end of every node. It has a fully working twig front end and a React Single Page Application (react.abhaisasidharan.xyz) and an Angular Single Page Application (ng.abhaisasidharan.xyz) which provides the basis for the comparison between the two.

Headless Drupal

 

This comparison is not to decide which framework is better than the other. It is to determine which framework is better than the other, for what purpose! The only way to decide this is to the same exact thing using both within a given time. And that is exactly what I have done here. I created two identical Single Page Applications (SPA) using React and Angular using my website’s API. I pulled all the blog nodes and all the portfolio nodes and of course the resume page (because, self-marketing).

Angular Repo: https://github.com/codingsasi/abhaisasidharan-angular

React Repo: https://github.com/codingsasi/abhaisasidharan-react

 

If TL;DR, then for the purposes of decoupled drupal, my choice would be React over Angular. If our goal is to have the flexibility to create an awesome UI/UX then React over Angular. Unless Vue is awesome. Now I’ll go try out Vue and post an article comparing Vue with React.

 

Angular wins:

  1. CLI - Angular has a super awesome Command line interface tool which makes development all the more easier. Whether it is to create a component, module or service.

  2. Well structured - Angular provides modules, components, and services to properly compartmentalize your application. You can’t get out of the MVC architecture. Strictly MVC.

  3. Google support.

  4. It is tailored to work with large enterprise applications.

  5. Two-way data binding.

  6. Dependency Injection.

  7. HTML template system.

 

Angular fails:

  1. Steep learning curve.

  2. Low performance without caching or any other performance enhancer for large apps.

 

React wins:

  1. Easy to learn and implement.

  2. Component Structure - You can divide the JavaScript code into numerous components, run tests for every component, reuse and configure them however you like, and put them together to develop a full-fledged UI.

  3. Component structure is cascading. You can use a component in another component, in another component, in another component, in another component… You get the picture.

  4. Easy and awesome UI builder.

  5. Facebook support.

 

React fails:

  1. No template system as of such. Everything is in the component.

  2. Not suitable for large enterprise level architectures. React works best for building UIs and it does it well.

  3. One-way binding. Although not much of a fail. I just use OnChange() to mimic Two-way binding.

 

Differences I noticed when working on React SPA and Angular SPA:

  1. In Angular when getting the JSON object from my website, I had to create a service which calls the API link and saves the JSON structure into an observable, which I then save in a Model (example: Blog). In React, all I had to do was use the fetch() function (in the component js file) to call the API and save into a JavaScript object.

  2. In React, there is a component called Loading (https://github.com/codingsasi/abhaisasidharan-react/tree/master/src/components/Loading) which is called when any component is being loaded. I had not implemented this in Angular because I didn’t have enough time. This really adds to the beauty of the app. Loading pages look better in the React app.

  3. The development time for the React app was much lower than the Angular app.

  4. The Angular app is much more advanced, using modern MVC features like dependency injection. React is much simpler.

  5. Handling styles are much simpler in React. It took time to get used to the view encapsulation in Angular.

  6. Routing is handled similarly in Angular and React. Although I found the rules of angular simpler. I haven’t figured out how to route all unknown URLs to blog page. Which works fine in angular.
    React : https://github.com/codingsasi/abhaisasidharan-react/blob/master/src/App.js
    Angular : https://github.com/codingsasi/abhaisasidharan-angular/blob/master/src/app/app-routing.module.ts


In conclusion, for the purposes of decoupled drupal, my choice would be React over Angular. If our goal is to have the flexibility to create an awesome UI/UX then React over Angular. Unless Vue is awesome. Now I’ll go try out Vue and post an article comparing Vue with React.

Share this post