AngularJS is a sophisticated framework for building web applications which
emphasizes a bi-directional dataflow and testing. It's one of the oldest of the
'new' JS libraries/frameworks and as such, has some inertia to it, though I
feel it really only started picking up steam in the past couple of years.
### Pros
* Already working for a few things at work
* Lots of drop in components
* Two-way data binding
* Backed by Google
* Emphasis on testability
* Fairly straightforward design patterns to follow (and [published guidelines](https://blog.angularjs.org/2014/02/an-angularjs-style-guide-and-best.html?_escaped_fragment_=))
### Cons
* Can be complicated and fragile (we have already seen this at work)
* Two-way data binding
* Likely large and incompatible 2.x coming within the next year, maybe with
migration tools, but likely to be a very different framework (i.e.
knowledge/experience gained on 1.x may not directly translate into
productivity with 2.x)
* Can have performance issues
* Is depending on browsers implementing native code (`Object.observe`) to
alleviate some of it's problems
* See [this presentation on `Object.observe`](https://markdalgleish.github.io/presentation-a-state-of-change-object-observe/)
## Flux + React
[Flux Homepage]
• [React Homepage]
One of the newer kids on the block, React is 'View' layer for web applications
which utilizes a 'Virtual DOM' to build up and swap out parts of the DOM
efficiently. Flux is an application architecture (as well as the name of
Facebook's implementation of the Flux architecture) which emphasizes a
uni-directional dataflow which works well with React.
### Pros
* One-way dataflow
* Generally more performant (compared to AngularJS)
* Backed by Facebook
* Flexibility in implementation/architecture, Flux provides some structure
### Cons
* More immature ecosystem (compare to AngularJS)
* No single best-practice/do-this architecture to follow, though Flux provides
some structure
### Misc
* While one may end up having to roll their own solutions to some things,
[Yahoo is rewriting their mail app with React and are open-sourcing a number of library](https://facebook.github.io/react/blog/2014/10/17/community-roundup-23.html#yahoo)
in the process so the ecosystem is likely to be continue growing with
industrial quality components
* In general, the [React blog](https://facebook.github.io/react/blog/) is worth
reading, particularly the community round-up posts
### More info
Tools are available built around these components:
*[Comparison of a bunch of frameworks](https://docs.google.com/spreadsheets/d/1r8rJy2Q5p5QORYKcye93UECwOlSgFL24c5fyF7dqhaM/edit?pli=1#gid=1607194899)(hint: tabs at the bottom)
# TodoMVC Benchmark
There's a TodoMVC benchmark with a variety of popular (and obscure) frameworks
here:
<http://matt-esch.github.io/mercury-perf/>
The benchmark consists of creating 100 todos, marking them as completed, and
then deleting them. It aims to give an idea of how frameworks perform under
real-world-ish conditions running idiomatic code (as opposed to
micro-benchmarks, which tend to take advantage of obscure tricks and aggressive
optimizations that sacrifice maintainability for extra speed). A more [limited
benchmark](https://evancz.github.io/todomvc-perf-comparison/), but with a
prettier graph at the end is also available; it was put together for [the blog
post announcing elm-html](http://elm-lang.org/blog/Blazing-Fast-Html.elm).
# Best Bets Today
## Flux + React + Immutable + Flow
Integrating a static analysis tool like [Flow] would be a requirement for me, but
that could be dropped if your requirements are pure JS with no build step
(and/or you subscribe to the pulling your hair out and yelling at the computer
style of debugging/refactoring; static analysis really helps people).
To see how some of this stuff plays together, see [this blog
post](http://aeflash.com/2015-02/react-tips-and-best-practices.html) which
