Functional UIs with React.JS and Immutable.JS - Experience Report
Submitted by Vagmi Mudumbai (@vagmi) on Tuesday, 28 July 2015
Section: Full talk Technical level: Intermediate
Participants would be able to have an appreciation of how React encourages functional architecture and how we can tie that with Facebook’s immutable.js library and Om style global state with cursors to deliver a highly peformant yet very simple application.
This is an experience report of how we built a fairly complex web application over 15k lines of code in React and Immutable JS. We have gone against the grain of Flux and have used a purely functional approach to UI using concepts from the Om framework. Our app eschews the idea of listening on state at the component level and takes up the view of a global state and rerendering when the app state changes. This way we only have one state change listener in our entire app. We have managed to make the entire view including the URL in the browser address bar a function of the state of the application. We will explore how the functional nature of React with immutable data structures can simplify application development without sacrificing performance.
In the course of the talk, I will also demo ES6, Webpack and React hot loader to setup your environment for immediate feedback.