• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

Bootcamp

Mar 22 2018

A new point of Vue

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!

Written by Jack Tarantino · Categorized: Agile & Lean, Bootcamp, Events, InRhythm News, Learning and Development · Tagged: framework, growth, JavaScript, Learning, Teaching, VueJS

Jul 13 2017

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

Written by Matt Billard · Categorized: Agile & Lean, Bootcamp, InRhythm News

Apr 25 2017

Engineering Driven Culture – InRhythm’s Code Lounge

 

[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:

  1. To understand what is important to our engineers, we need to be constantly listening to and engaging with our teams. While Vue and Java were not on our list of station offerings originally, in putting the event together we quickly found out that they are in high demand. Luckily, we were able to add both of these to our agenda, thanks to our very talented engineers who were able to lead these discussions.
  2. Collaboration happens when culture is driven from bottom up, not top down. Our engineers and UX/product leads single-handedly drove Code Lounge, with management simply enabling from the background with budget and logistics support. The magic of the night was the true collaboration seen across the stations, individuals coming prepared with best practices in their domains to share without being asked, and amazing learning and teaching happening in tandem across the room.
  3. Angular seemed to be the least popular station at the event, perhaps because a large part of our team is already fluent in Angular or perhaps due to newer technologies featured, such as Vue and React – these were the most popular and buzzed-about tables.
  4. We love learning and development at InRhythm, but admittedly beer on tap, Lombardi’s pizza, pool and music make it even better.

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.

 

Written by Shivani York · Categorized: Bootcamp, Code Lounge, Events, Financial Services, InRhythm News, Learning and Development, Software Engineering, Talent · Tagged: Angular, Code lounge, engineers, Java, JavaScript, Learn, Node, Node.js, React, React native, software engineering

Mar 01 2017

Bar Raisers Bootcamp in Phoenix

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!

Written by Shivani York · Categorized: Bootcamp, InRhythm News, Talent

Footer

Interested in learning more?
Connect with Us
InRhythm

110 William St
Suite 2601
New York, NY 10038

1 800 683 7813
get@inrhythm.com

Copyright © 2023 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT