12: Flux Application Architecture & React

“Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.” - Facebook’s Flux Architecture Home Page -

Bill Fisher (@fisherwebdev), Facebook Software Engineer & Lead Developer of the Flux Documentation, joins The Web Platform Podcast for ‘Episode 12:  Flux Application Architecture & ReactJS.’

Bill talks with hosts Nick Niemeir (@nickniemeir) & Erik Isaksen (@eisaksen) about Flux, an application architecture similar in ideas to CQRS & Data Flow Programming. It was created to alleviate the performance & scalability problems that Facebook encountered in building Facebook Messenger (Watch ‘Hacker Way: Rethinking Web App Development at Facebook’ - a presentation by Jing Chen, Software Engineer at Facebook, for further information). Flux promotes a unidirectional data flow model through an application. In contrast to MVC, Flux mainly consists of Stores, a central Dispatcher, and Controller-Views.

Facebook has React.js as its view layer and and Flux is quickly becoming the architectural design of choice for many of its other web applications. The support, power, and marketing behind the Angular.js and Ember.js frameworks is undeniable and when Facebook released React.js many developers misunderstood its Virtual DOM approach because it was not like the frameworks developers are used too. Despite that, Facebook has proved itself a ‘contender’ in the eyes of many in the development community and many developers and engineering teams are switching their ‘framework of choice’ to React.js.

Flux combined with React.js offers many appealing possibilities but it is not limited to use with just React.js. Flux is an application architecture and it can be used as a pattern in almost any technology stack for web application development.

Flux & React Resources

• Introduction - http://facebook.github.io/react/docs/flux-overview.html
• Github Source Code - https://github.com/facebook/flux
• Chat Example Tutorial  -http://facebook.github.io/flux/docs/chat.html#content
• ReactiveElement Article - http://addyosmani.github.io/react-interop/demo.html
• Flux Home Page - http://facebook.github.io/flux/
• PropTypes - https://github.com/facebook/react/blob/master/src/core/ReactPropTypes.js
• Testing Article - http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html
• Facebook’s Jest  - http://facebook.github.io/jest/
• OM ClojureScript Interface to React - https://github.com/swannodette/om  
• React.js - http://facebook.github.io/react/
• Roundup - http://facebook.github.io/react/blog/2014/09/12/community-round-up-22.html
• Hacker Way: Rethinking Web App Development at Facebook - https://www.youtube.com/watch?v=nYkdrAPrdcw&list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v

Flux Projects In Progress

• Adobe Brackets - http://brackets.io/
• Yahoo Mail -  http://mail.yahoo.com

Flux Implementations

• Reactive Elements - http://pixelscommander.com/polygon/reactive-elements/example/#.VCVD7yldXkR
• ReFlux - https://github.com/spoike/refluxjs
• Fluxxor - http://fluxxor.com/
• Fluxie - https://github.com/jmreidy/fluxy
• DeLorean - http://deloreanjs.com/

React Channels

• Facebook Support - http://facebook.github.io/flux/support.html
• Stackoverflow - http://stackoverflow.com/search?q=flux+react
• IRC - irc://chat.freenode.net/reactjs
• Google Group - https://groups.google.com/forum/#!forum/reactjs