JSFoo 2015

The future of JavaScript

Vagmi Mudumbai

@vagmi

Functional UIs with React.JS and Immutable.JS - Experience Report

Submitted Jul 28, 2015

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.

Outline

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.

Speaker bio

I currently serve the role of a CTO at Tarka Labs. I have been working with React since it came out and have worked with functional reactive frameworks and languages like Clojurescript/Om, Quiescent and Elm. The new application architecture we have adopted drastically simplifies the approach to building pure javascript applications without having to incur the cost of complexity with flux’s actions, action creators, dispatchers and the sphagetti of callbacks around stores/listeners.

Slides

https://docs.google.com/presentation/d/1ZWsUZWVXopLaIDNPGfVzp3JSi8p_8IIpGyl-S7MoOiM/edit?usp=sharing

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more