Comparing Angular 2 vs React vs Vue

10. July 2017 2
Comparing Angular 2 vs React vs Vue

InRhythm recently hosted our second Code Lounge, where I discussed the differences between Angular 2, React+Redux and Vue+Veux. The 60 attendees proved to be a solid sounding board for the discussion and below is a summary of my findings shared with the group.

Whenever I start a new project, I’m always faced with the challenging question: “what should I build it in”? Research is important, but sometimes it feels like comparing apples to oranges. How can you compare a library (React) to a framework (Angular)? I’ve found that the best approach is to build something simple in each one and compare the experience. To share with my fellow developers, I’ve built an application to compare existing JavaScript solutions – Angular 2, React+Redux and Vue+Veux.

For simplicity’s sake, I made a list of “blog articles”, with create, read, update, and delete (CRUD) functionality to create more of an “apples-to-apples” comparison. Please note that my opinions are based on working with the three tech stacks for a few weeks and I respect any differing opinions of other developers on this subject.

Comparison Summary

Angular2

PROS CONS
  • A complete solution
  • Class syntax: makes the code very well organized
  • TypeScript

 

 

 

 

 

 

  • Too much has changed
  • Very steep learning curve
  • It’s not plain JS: difficult to migrate to other frameworks or event to upgrade to Angular2
  • Somewhat verbose: every file needs tons of import statements
  • Angular2 syntax: not as simple as Angular1. ng-____ was so much simpler.
  • TypeScript
  • Errors aren’t helpful at all
  • Huge build: Angular2’s production build is 3 to 5 times as big as the other solutions!

Honestly, the more I work with other solutions, the harder it gets to say a lot of positive things about Angular2. A complete solution initially seems like a huge benefit, then you are then required to use everything they recommend, nothing more, nothing less. Similarly, TypeScript feels like a plus with it’s strong types, error checking, and clear interfaces, but is difficult to learn to set up. There seem to be few resources out there to show you how to add typings to your project, and not all IDE’s seem to support it well.

Far too much changed between Angular1 and 2. The HTML templating syntax was the least of it. They added TypeScript, both SystemJS and Webpack, Rx.js, and replaced promises with observables and the learning curve is very heavy. Also, because Angular has it’s own special version of everything (e.g. $http, $q, etc) it is extremely difficult to migrate existing projects. Everything needs to be rewritten.

React+Redux

PROS CONS
  • Mobile
  • Server-side rendering
  • Immutable Data
  • Complexity
  • No standard technologies
  • JSX syntax: can be complicated. It’s far simpler to use HTML and Angular1 or Vue syntax

React seems to have a few very clear advantages. If you need to make a mobile app, or if search engine optimization (SEO) is a high priority, React has the oldest and most mature solutions.

Implementing delete operation for our CRUD app was by far the most complex in React+Redux, requiring 13 pieces of code strewn across 7 files. Standardization is also a challenge. While Angular is strict with it’s recommendations, React is too loose. Some developers feel it is better to have more choices, but I feel the opposite. React technologies seem to change often. Flux has been replaced by Redux. The examples I found used Thunks. I’m told that Saga is a better (and more complicated) solution. Researching, learning, comparing, and vetting the myriad choices is very time consuming. Especially in a large corporation with many teams in many countries, standardization (having a “right way”) would be a huge time saver.

Vue+Vuex

PROS CONS
  • Angular1’s syntax: v-for, v-if, v-model, v-class, etc
  • React’s speed and size
  • Redux’s state management: single store, immutable state
  • Great CLI: Vue, router, Webpack, HMR, eslint, tests
  • Simplicity
  • Recommendations but not too opinionated: Angular2 often seems too rigid while React has the opposite extreme: you need to figure out all the pieces you want to use for your solution. Vue seems to take the middle road: it recommends a complete solution but ultimately lets you pick the pieces you want to use. Better yet, you can scaffold out a new project with a single line in the terminal.
  • Code style: linting rules are a little weird. It prefers no semicolons and adds spaces in some weird places.
  • No classes: I liked Angular2’s classes, but I guess I can live without them

 

 

 

 

 

It appears to me that someone combined the best parts of the competing solutions!

Numerical Comparison

Size and speed (load + render time) of built code

Angular2 is by far the largest. React+Redux and Vue+Vuex are similar.

  • Angular2: 1,500 kb, 1.5 seconds!
  • React+Redux: 200 kb, 0.6 seconds
  • Vue+Vuex: 400 kb, 0.6 seconds

Complexity of adding delete functionality to our CRUD app

React was by far the most complicated. Angular2 and Vue+Vuex are similar.

  • Angular2: 3 blocks of code in 3 files
  • React+Redux: 13 blocks of code in 7 files!
  • Vue+Vuex: 3 blocks of code in 3 files

Try it yourself!

You can download the project from this repo: https://github.com/mattbillard/angular2-vs-react-vs-vue . Detailed instructions are in the readme, but here’s the summary. You will need to install and then run all 4 of the following (simultaneously in separate terminal windows) to try the different solutions.

Server

This is a simple Express server for our articles api to which we can make get, post, put, and delete requests.

Run the following:

cd server-api && npm install && npm start

Angular2

The original code was taken from the Angular2 “Tour of Heroes” app in the official documentation: I modified the code into a simple CRUD form for a blog and swapped SystemJS for Angular2 Webpack.

Run the following:

cd angular2 && npm install typescript tslint -g && npm install && npm start

 

React+Redux

The original code was taken from the best React+Redux tutorial I could find: “Building Applications with React and Redux in ES6” by Cory House (Corey’s very good. I highly recommend you watch it.) Once again, I changed it into a simple CRUD form for a blog.

Run the following:

cd react-redux && npm install && npm start

Vue.js+Vuex

Vue CLI’s command “vue init webpack PROJECT_NAME” was used. Then I built the CRUD app from scratch.

Run the following:

cd vue-vuex && npm install && npm start

 

Conclusion

Now for the most important part: what’s your opinion? Having worked with each for a few weeks, I’m far from being an expert in all 3 solutions. What are your experiences with the different solutions?

Watch the Presentation


2 thoughts on “Comparing Angular 2 vs React vs Vue”

  • 1
    Angelo Miranda on August 4, 2017 Reply

    your experience save me tons of time trying all these solutions.

    Thanks, very valuable blog.

    • 2
      Matt Billard on August 4, 2017 Reply

      Thanks Angelo. I’m glad you liked it. Stay tuned for more articles and presentations on cutting edge technologies.

Leave a Reply

Your email address will not be published. Required fields are marked *