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 |
|
|
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 |
|
|
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 |
|
|
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.
Maria says
I completely agree with your arguments.
By checking out and comparing these Frameworks, I am so impressed about Vue.js 🙂