Our very own Anthony O’Sullivan gives his fresh, punny, and appropriately detailed take on Vue.js and we couldn’t have had more fun!
Your partners in accelerated digital transformation
Our very own Anthony O’Sullivan gives his fresh, punny, and appropriately detailed take on Vue.js and we couldn’t have had more fun!
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.
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.
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.
PROS | CONS |
|
|
It appears to me that someone compiled the best parts of the competing solutions!
Angular2 is by far the largest. React+Redux and Vue+Vuex are similar.
React was by far the most complicated. Angular2 and Vue+Vuex are similar.
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 |
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 |
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 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 |
There’s a lot to learn with each solution! Please click here to review more resources and tips around this subject.
[huge_it_slider id=”3″]
Last week, driven by the feedback from our engineering leadership team, we held InRhythm U’s first-ever Code Lounge, inviting everyone from across the company and a few external guests to learn new skills, brush up on existing ones, or just get help on a personal project.
Code Lounge featured technical “stations” for Angular, React, React Native, Express, Vue, Node.js, Java, QA, UX and Product, each led by an InRhythm senior developer instructor. Accompanied by food and drinks on the company, the event provided an easy atmosphere and low-key way for everyone to network and learn a thing or two!
Here are a few key takeaways and learnings from Code Lounge:
At InRhythm, our goal is to give our people the best opportunities for learning and growth. This goal is something I feel very passionate about as do all our senior leaders across the organization. Code Lounge is just one example of how we keep our company culture and ourselves at the top of our game! If you want to find out more, visit us at www.inrhythm.com.
InRhythm CEO, Gunjan Doshi, recently completed a Bar Raisers Training Bootcamp at client site in Phoenix, AZ. Bar Raisers are the people who are able to transform any team they join with passion, drive, and the innate ability to influence those around them to achieve new heights. #BarRaisers bootcamp outlines and identifies actionable steps for companies to recognize and hire top-notch talent!