Flux+React vs Backbone+React [closed]

Question

What are the advantages of Flux+React over Backbone+React. Are there any performance differences in addition to the code development ease for a huge complex code base.

What if we have a 1:1 relation between the model and a react view in a application that uses Backbone+React ?

Swee

Answer 1

Flux is an architect pattern to build React application. So you can use Backbone models and collections inside your stores to fetch and store data.

And if want to use just React's Virtual DOM feature, there is no need to use react.js. There are a lot of libraries, adding Virtual DOM feature to your application (https://github.com/Matt-Esch/virtual-dom).

My recommendation: if you will use Flux pattern I strongly recommend you to use http://facebook.github.io/immutable-js/ (may be coupled with http://ampersandjs.com/; don't forget to define your custom sync function if you are building isomorphic application). Basically there are no any advantages using backbone models with React (backbone is heavy, it needs underscore, which is slow; I use https://lodash.com/ instead ).

Enduring

I'll add to this that I liked Flux a lot better when I stopped thinking of my stores as being analogous to Models in MVC, especially in that they definitely shouldn't fetch their own data as Backbone models do. The actions should talk to the API, and only feed the data to the stores via the dispatcher: cask.scotch.io/2014/10/V70cSEC.png. If you think about it that way, it makes it more clear why Backbone models are not a very good fit. – Winebaum

We use Backbone+React in some parts of our codebase (old legacy backbone code integrated with react), and IMO, it defeats the purpose of react, that is, the views to a unidirectional data flow. Backbone is designed to work with models which are not necessarily unidirectional. – Bushhammer

Answer 2

IMHO Flux stores are not incompatibles with Backbone models / collections. You can probably use Backbone collections as Flux stores, as long as you integrate them with the Flux dispatcher and you permit them to emit an event to trigger a rendering.

I'm just not sure Backbone models are meant to be immutable data structures in the first place, thus making it harder for React to optimize the rendering.

I would also say that I never really found all these Backbone models/collections methods really useful. In a Flux architecture, API requests would tend to be fired by action creators and not by the stores directly, thus permitting multiple stores to listen to the same request completion.

Where should ajax request be made in Flux app?

Burhans

@fisherwebdev in the comment thread for his answer: "No, calling for data in the store does not break the [Flux] paradigm." #26632915 – Comparable

I totally agree! flux and backbone work well together, as long as you don't fall into bad habits. backbone collections and models are mutable, but that doesn't mean you have to use them that way. i have hooked my collections up to register with a flux dispatcher, and that is the only way that i allow data to enter or leave the store. the backbone collections offer a nice, pre-built store so that you don't have to compose manually. additionally, backbone models allow you to enforce schema on the data you are injecting. It adds a lot of sophistication to your data stores. – Sauer

Answer 3

One nice thing about React is that it is agnostic - you can use it with Backbone models and collections without problem.

Flux is a suggested architecture, but I think the model diverges so greatly to MVC that at the end of the day it's not worth to try to use them both - Use React with Flux OR React with Backbone models and collections.

I wouldn't recommend using Backbone models/collections as Flux stores - they're not the same thing. Main reason being that a flux store can't be mutated from outside - it doesn't provide setters. A Flux store mutate it's own state in response to actions. And even if you follow the "Flux" way using Backbone models as stores, your code still has open possibilities for direct manipulation of state from outside the store that could be misused by other members of the team, for example...

Lyricism

Answer 4

Backbone's model collection is mutable while react stands upon a theme, immutability. So, Technically using Backbone+React is doing an Anti Pattern. I have used both react+backbone and react+flux. I will definitely prefer react+flux over others.

Portuguese

Answer 5

+1 Vetrenko Maxim's answer regarding integration of backbone and the architecture pattern. Flux is a data flow pattern for React apps and can use any data store/model framework you wish.

The advantages of using Flux+React :

• Easier understanding of data flow
• Better code organization
• easier debugging data issues with models
• compartmentalize data store/model code from views

There are several model frameworks to use, I prefer www.js-data.io for React+Flux.

Surefooted

Answer 6

Flux is an architectural pattern that enforces one directional flow of data. The Flux pattern is generic and it is not specific to React applications. With Flux, the poorly defined data flow and lack of data integrity will be prevented.

If you will be choosing Backbone, you can combine those two as long as you know when to use the Flux way and the Backbone way.

Simmers