From Angular 1.x to React or Angular 2 – Trade Study

Elements of importance:

  1. Testing ability, how easy is it to get to 100% code coverage
  2. Bundling, managing dependencies and making
  3. Debugging tools
  4. Live code changes
  5. Ease of integration with other scripts
  6. Easy at chucking and optimizing time to first paint draw
  7. Path forward for existing code
  8. Migration cost (downsides)

Feature React + Redux + Webpack Angular 2 + SystemJS Angular 1.X
Testing to 100% Easiest I’ve seen, React itself is 87% Not complete yet,

Who knows (not a good sign)

Very hard
Documentation Lots of good quality Some more likely to come (A2 is still beta) Lots of docs but many promote bad CS patterns
Dependences Easy (many formats) Easy (many formats) Via magic variable names (not good)
Debugging React devtools, Redux devtools, webpack errors push to the browser (cool), sourcemaps

Overall best I’ve seen

Beta tools (ok) Angular devtools (ok)

debugging $digest is very hard

Live Code Changes Hot module loading! With redux this is just amazing – reloading at the same state No hot module loading yet css only, does not save state
CSS Helpers CSS Modules! so cool normal normal
Integration 3rd party Pretty easy (for example bootstrap JS just works) would need to do a test example Can be very hard if it competes with $digest
Chucking Webpack is the best SystemJS is good but not great yet manual
Other notes ES6, logic easy to be in anything – geared towards functional programming Typescript prefered – geared towards .NET developers Change expectations when it came out
Path Forward Co-host sites (I’ve done it before it’s not bad) Co-mingle (this sounds like a debug nightmare)
Migration Costs for redesign Basic site css+html will have to be done for both A1.x and React. All new features/pages done in React. All logic should move over pretty easily (I’ve done this before) A1.x and 2 could potentially use the same site template (however bindings are not quite the same). All new features/pages done in A2.  All logic should move over ok No migration cost.

None-trial cost in speed and testability which leads to bugs and loss of trust.

Supported by Facebook, Airbnb, Netflix, NFL Some of Google and Microsoft. (Google also supports polymer) Not as many as you would think (I’ve been using Chrome’s Library Detector for years and most big sites do not use Angular they still using backbone or just jQuery. Some are now using React.

 

Other frameworks:

Vuejs: nicely tested, more performant than A1 or 2), uses webpack, vue files are cool

Riotjs: small and simple, pretty fast, better for smaller sites

Aurelia.io: by Rob Eisenberg

Mithril: very fast, but very small usage. Sortof conceptually like React

Ember: best for people who don’t know what they are doing (as I’ve been told by a couple of teams that picked it)