Bootcamp

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 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, but 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 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. Redux seems like it’s going to be replaced by MobX. 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 compiled 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

Installing Dependencies and Running the Projects

You will need to install and then run all 3 of the following 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

 

Build:

npm install http-server -g && npm run build http-server ./dist

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

 

Build:

npm run build

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

 

Build:

npm run build http-server ./dist

 

Learning More

There’s a lot to learn with each solution! Please click here to review more resources and tips around this subject.