Presented at FITC's Web Unleashed 2017 conference
More info at www.fitc.ca/webu
Fred Daoud
Modernizing Medicine
Overview
Do you use React or any other virtual-DOM-based library that you love, but wonder about how to structure and manage application state? Perhaps you’ve looked at Redux, but got bogged down in boilerplate and action constants. Then you wondered about asynchronous actions. Does the list of libraries and dependencies that you need to solve common problems just keep piling up? Wasn’t React supposed to be a simple view library?
Let’s talk about other ways to manage the data flow of your web applications. We want a single state object, one-directional data flow, reactive views as plain functions, decoupled and reusable components, routing, time-traveling, …all without any fuss. We’ll assemble this in a way that lets you keep using your favourite libraries (React, Preact, Inferno, Snabbdom, Mithril, etc.), and write your code with regular JavaScript functions, giving you state management with the freedom to structure your application as best suits your requirements.
Objective
Show developers great ways to manage the state of applications using React or any virtual-DOM library.
Target Audience
Front-end JavaScript developers
Assumed Audience Knowledge
JavaScript and basic React or other virtual dom library.
Five Things Audience Members Will Learn
Managing application state with a single model and unidirectional flow
Creating decoupled, reusable components (with plain objects and functions!)
Assembling and composing with simple functional programming techniques
Routing made simple, using the library of your choice
Time-travelling and other cool development tools
10. model = single source of truth
view = function(model)
const initialModel = { counter: 0 };
const view = model => (
<div>Counter is {model.counter}</div>
);
11. actions update the model
const createActions = update => ({
increment: () => update(model => {
model.counter++;
return model;
})
// after calling update(...),
// view is automatically re-rendered
});
12. views call actions
const createView = actions => model => (
<div>
<div>Counter is {model.counter}</div>
<button onClick={actions.increment}>Increment</button>
</div>
);
31. USINGMEIOSISTRACERINCHROME
Install meiosis as a dev dependency
Install the Chrome extension
// Only for using Meiosis Tracer in development.
import { trace } from "meiosis";
trace({ update, dataStreams: [ models ] });
32. USINGMEIOSISTRACERINPAGE
Also install meiosis-tracer as a dev dep.
<div id="tracer"></div>
// Only for using Meiosis Tracer in development.
import { trace } from "meiosis";
import meiosisTracer from "meiosis-tracer";
trace({ update, dataStreams: [ models ] });
meiosisTracer({ selector: "#tracer" });