Javascript Framework Analysis: React, Ember, and Angular

blog_reactandrubyonrails-2 (Demo)

Over the past year, we have been toying around with every new and shiny javascript framework on the market. We started with Ember, dabbled in Angular 2.0, and finally stopped at React.  Our journey down this road was littered with many late night screencasts, hello world apps, hell-bent arguments over architecture, and debugging nightmares (depending on the framework). This drawn out process had a purpose – figure out which Javascript Framework works the best with all the boilerplate and conventions we get inside Ruby on Rails.

Here’s how we scored the frameworks:

  1. Easy to learn – Does this framework require us to learn a lot of new concepts, languages, or tools?
  2. Easy to set up – Does this framework give us good tools to get started?
  3. Maintainable code – Does this framework give guidance or have  strategy on how to create maintainable code?
  4. Boiler plate / Reusable Code – Can we reuse this code? 
  5. Availability of Libraries – Is there enough code out there for us to bootstrap development for a full scale application?
  6. Reuse for mobile apps – Can I reuse any of this code for mobile apps?
  7. Great architecture – Is the way this javascript framework architecturally sound, simple, and powerful? 
  8. Community – Are there enough contributors to this project who can support its growth?

Ember:

easy and fast to set up, works well with rails, but all your hard work doesn’t translate to mobile. We really loved working with Ember but we felt like the lack of mobile limited our reach with future development projects. 

  1. Easy to learn – 9
  2. Easy to set up – 8
  3. Maintainable code – 7
  4. Boiler plate / Reusable Code – 8
  5. Availbility of Libraries – 7
  6. Reuse for mobile apps – NIL!!!
  7. Great architecture – 6
  8. Community – 7

Angular 2:

Using angular was not easy and therefore not fun 🙁 First off, you need to learn Typescript which is a whole other level of programming and debugging Angular nothing shy of traumatic.  There also aren’t many rails developers who use it, but if you’re looking for a good one check out Jason Swett with https://www.angularonrails.com/

  1. Easy to learn – 2
  2. Easy to set up – 5
  3. Maintainable code – 5
  4. Boiler plate / Reusable Code – 5
  5. Availbility of Libraries – 8
  6. Reuse for mobile apps – 8
  7. Great architecture – 7
  8. Community – 5

React:

ES6 made React easy to get up and running. Its extensible inside rails and although it does not have a lot of boilerplate code, it has a tremendous amount of libraries, outstanding architecture design with Redux, and can be reused for mobile applications. Effectively, React stole the show. 

  1. Easy to learn – 8
  2. Easy to set up – 7
  3. Maintainable code – 8 (depends on how you manage components)
  4. Boiler plate / Reusable Code – 3
  5. Availbility of Libraries – 8
  6. Reuse for mobile apps – 9
  7. Great architecture – 9
  8. Community – 8

After much debate, we decided React could easily and acceptably conform to both web and mobile apps when using Ruby on Rails Applications and/or API services. As Ruby on Rails developers, we love all the convention we get out of the rails framework but let’s face it, the asset pipeline is a abomination and there should be more integration with tools like NPM or Yarn to manage front end assets.  In the meantime, we’ll just keep using React until we can find a way to perfectly blend React and Rails together. 

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.