Easier UI Reasoning with Unidirectional Dataflow and Immutable Data

Mikael Brevik (BEKK)
Torgeir Thoresen (BEKK)

Half-day workshop - in English

Approved_talk approved

Let us bring back the days where we could write declarative representations of how we want our UI components to work. We should be able to read our code from top to bottom and intuitively know what the output will be, just like the good old HTML. We should be able to write composable, testable and reproducible components and be free to choose what kind of dependency management we want to use, or how to structure our code.

What if we take inspiration from the functional world and create a UI where we have pure and referentially transparent components; components with no side-effects and predictable output? If we coupled this with immutable data and components with single responsibilities, can we get a blazing fast and smart way to build UIs? It turns out we can!

In this workshop we start by looking at how we can use a virtual DOM and functional cursors of immutable data to isolate components, and making them pure. Once we've grasped the general concepts, we introduce an architecture for doing unidirectional top-down rendering, with very little architectural overhead. After this workshop, you should be able to understand and use unidirectional UI components to build testable and easy-to-reason-about web applications. Technologies used will be Facebook's React and Immutable.js, and Omniscient.js. This workshop is intended for developers who have some experience with frontend development.

Primarily for: Developers, Architects

Participant requirements: Computers preferably with Node.js installed.