Elements of importance:
- Testing ability, how easy is it to get to 100% code coverage
- Bundling, managing dependencies and making
- Debugging tools
- Live code changes
- Ease of integration with other scripts
- Easy at chucking and optimizing time to first paint draw
- Path forward for existing code
- 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)
