Implementing unidirectional user interface in legacy project
Tushar Jarhad (@tjarhad)�Software Engineer @ Red Panda Innovation Labs
KOKO Networks �Cleanstar Ventures, East Africa
Launchpad for startups
Challenge
React
Problem of build integration with backend code
Snabbdom
View
function View ( {model, handler}){
return h('div.page',
{ style: fadeInOutStyle },
[
h('div',
{ style: counter},
model.counter)
])
}
JSX
import { html } from 'snabbdom-jsx';
function View ( {model, handler}){
return
<div>
<div selector=".counter"> {model.counter}</div>
</div>
}
Intent
<button
selector=".plus"
dataset={({value: "1"})}
on-click={(e) => handler({type:'add', payload:e})}>
Increment</button>
Action Update
const R = require('ramda');�function actionUpdate(model, action) {
let actionType = action.type;
switch(actionType){
case 'add':
return R.assoc('counter', model.counter + 1, model);
case 'subtract':
return R.assoc('counter', model.counter - 1, model);
default: return model
}
}
Action Handler & Patch
function updateUI() {
const newVnode = <View model={model} handler={handler}/>
vnode = patch(vnode, newVnode);
}
function handler(action) {
model = actionUpdate(model, action)
updateUI();
}
Libraries
Building with Flask Application
References
Questions?
THANK YOU!