[DISCLAIMER - my personal impressions about some JS frameworks are described on this post. You may agree or not. I do not hate any of them, I just think all of them have good and bad parts, and each situation may have a different framework chose]
I have been using some JS frameworks in my projects - Angular.js, Backbone and Ember.js. Each of these have their own characteristics and advantages/disadvantages:
- - Angular.js - Easy to use for very simple apps; hard to learn and maintain for more complex apps. It's easy to end up with giant controllers! (more here).
- - Backbone.js - Beginners tend to many unnecessary XHR requests or mix some concepts between views and models. It's a little hard to learn, but (good part) besides these two points, it's hard to end up with a messed up code (more about Backbone impressions here) .
- - Ember.js - I really like Ember, because I think it has a very simple convention and pretty easy to learn. But when your system gets big and complex, you end up with some problems described here.
A few days ago I was trying to decide which framework to use a new project. Someone mentioned: "Why not React?" I noticed I knew very few about it and didn't have anything in production with React yet. So... Why would React.js be cool?
At my first Google glances, I thought React was something like mustache.js or something, just a template library. One of the first articles I came across was this. So I thought I'd really need to use React only as the V layer, and maybe I'd still need to use Ember, Backbone or Angular.
After reading this post, I was convinced that it was not just that. This article describes that React could be used as something more than a template library, as it bring 3 main features: event and data binding, virtual DOM and components. This is more than just templating. IMHO it's something V+C, or maybe V+ part of C and part of M. Maybe for simple apps, React would be enough, but what about complex apps? This inconsistent definition and not conventioned use could make people use React under an inappropriate way.
Randomly and fortunately, I came across another Facebook tool: Flux. So yes, that was the missing piece for something more complex apps - Flux gives some pattern and structure for React.js. It organizes a clean MVC for the view through an element called Dispatcher. This is way different from the other MVC we have. In the other frameworks, we add logic to the controller layer:
Our controllers may bring us inconsistent states because the logic belong to them, not for the component itself! Example:
What Flux do is introduce a pretty consistent data model, composed by a Dispatcher (that I have mentioned before) and a Store layer:
React.js enters to give speed for the view - if we have a complex state machine on the system, the view will have to handle with frequent changes! And we can't loose performance! When store changes, React re-renders the entire component. Haaaa!! There it goes, the Virtual DOM! When the data changes, a new Virtual DOM is created. A diff (yes, a DIFF!) between the 2 versions of DOMs is created and TA-DA! The new real DOM is made with a diff! It gets view render pretty fast!
That's why Instagram and Facebook use this tool, Flux.
Well, I am not sure about the learning curve of this tool, but I think it's a pretty more complicated than Backbone or Ember. However, it's a very interesting tool IMHO! It brings a very decoupled model, and also seems easy to maintain the code.
All in all, theory is cool, but I need a production env to have my own conclusions. I already have a very dynamic environment with a complex state machine.
Do you have React or Flux in prod environment? Feel free to share your thoughts!