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:
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.
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.
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.
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)
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
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.