Effective Application State Management (@DevCamp2017)

6/29/2017 DevCamp 2017
https://ohager.github.io/devcamp2017_slides/#/?export& 1/55
EFFECTIVE
APPLICATION STATE
MANAGEMENT
Oliver Hager - Dextra 🤘

6/29/2017 DevCamp 2017
O que é o estado de aplicação?

6/29/2017 DevCamp 2017

6/29/2017 DevCamp 2017
LIÇÃO 1

6/29/2017 DevCamp 2017
BAD 💩
render(){
return (
this.state.userRole === 'admin' ?
<AdminComponent/> :
<UserComponent/>
)
}

6/29/2017 DevCamp 2017
GOOD 👍
render(){
return (
this.state.userIsAdmin ?
<AdminComponent/> :
<UserComponent/>
)
}

6/29/2017 DevCamp 2017
render(){
function calculateTotalCost(items){
return items.reduce(
(p,item) => p+(item.price*item.quantity), 0.0
).toFixed(2);
}
return (
<div>
<CartItemList items={this.state.cartItems}/>
<div className='cart-total'>{
calculateTotalCost(this.state.cartItems) + '$'
}<div/>
<div/>
)
}

6/29/2017 DevCamp 2017
⭐ Mantenha mais simples possível, p.e. booleano

6/29/2017 DevCamp 2017
LIÇÃO 2
Compose your state

6/29/2017 DevCamp 2017
TRIVIAL 👍
const update = (state, newState) => Object.assign({}, state, newState);
const updateState = (state, newState) => ({ ...state, ...newState }); //

6/29/2017 DevCamp 2017
ASSIGN/... VS MERGE
New Repl ohagermy repls community
BETA
DevCamp2017: Assign vs Merge
share save run
Babel Compiler v6.4.4
Copyright (c) 2014-2015 Sebastian McKenzie

6/29/2017 DevCamp 2017
⭐ Use composição para montar estado

6/29/2017 DevCamp 2017
LIÇÃO 3
Make your state immutable

6/29/2017 DevCamp 2017

6/29/2017 DevCamp 2017
class ItemList extends Component {
constructor() {
this.state.items = Store.getState().items
}
// assume this method is called when our store was updated
onStoreUpdate() {
this.setState({items: Store.getState().items })
}
addItem(item) {
let items = this.state.items
items.push(item) // Bad 💩
}
render() {
return (
<ItemEditor onAdd = {this.addItem} />
/*...*/
)
}
}

6/29/2017 DevCamp 2017
class ItemList extends Component {
constructor() {
this.state.items = Store.getState().items
}
// assume this method is called when our store was updated
onStoreUpdate() {
this.setState({items: Store.getState().items })
}
addItem(item) {
let items = this.state.items
items.push(item) // State mutated in STORE!
}
render() {
return (
<ItemEditor onAdd = {this.addItem} />
/*...*/
)
}
}

6/29/2017 DevCamp 2017
SOLUÇÃO SUBÓTIMA 😕
addItem(item) {
let items = _.cloneDeep(this.state.items)
items.push(item) // store won't be mutated
Store.update({items: items})
}

6/29/2017 DevCamp 2017
SOLUÇÃO MELHOR 😊
constructor() {
// Copy by reference for immutable data is ok!
this.state.items = Store.getImmutableState().get('items')
}
// ...
addItem(item) {
// you cannot simply add an item to the list, you need to use the API
let copiedItems = Immutable(this.state.items).asMutable()
copiedItems.push(item)
// assumes that update() makes the state somehow immutable
Store.update({items: copiedItems})
}

6/29/2017 DevCamp 2017
COMO FAZER IMUTÁVEL? 🤔
New Repl ohagermy repls community
BETA
DevCamp2017: Immutable
share save run
Babel Compiler v6.4.4
Copyright (c) 2014-2015 Sebastian McKenzie

6/29/2017 DevCamp 2017
COMO FAZER IMUTÁVEL? 🤔
https://github.com/facebook/immutable-js [60KiB]
https://github.com/rtfeldman/seamless-immutable [8KiB]
https://github.com/Yomguithereal/baobab [33KiB]
https://github.com/planttheidea/crio [51KiB]
... etc etc pp

6/29/2017 DevCamp 2017
THE GOOD THINGS 🍺
// optimize our rendering process (React-wise)
shouldComponentUpdate(nextProps, nextState){
// comparing by reference
return this.state.items !== nextState.items;
}
⭐ Evite alterações acidentais (bom para times)

6/29/2017 DevCamp 2017
THE BAD THING(S) 🍋
⭐ Mais verboso/trabalhoso para alterar

6/29/2017 DevCamp 2017
LIÇÃO 4
Flatten the state
Keep it simple 2

6/29/2017 DevCamp 2017
const posts = [
{
"id": 123,
"author": {
"id": 1,
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": 324,
"commenter": {
"id": 2,
"name": "Nicole",
"text" : "Nicole + Paul = Love 💕"
}
},
{
"id": 325,
"commenter": {
"id": 5,
"name": "Klaus",
"text" : "Yo, Mann. Geiler Scheiss!"
}
}
]
}
];
PROBLEM👾

6/29/2017 DevCamp 2017
UPDATE
posts.find( p => p.id === 123).author.name = 'Dude';
UPDATE IMMUTABLE
// update
const post = posts.find( p => p.id === 123);
// seamless-immutable API
const updatedPost = Immutable.setIn(post, ["author", "name"], "Elmar");
// insert
const atIndex = posts.findIndex( p => p.id === 123);
const newPost = { /* ... */ };
posts.slice(0, atIndex).concat(newPost).concat(posts.slice(atIndex+1)); // 😲 WTF?

6/29/2017 DevCamp 2017
const normalizedPosts = {
"posts": [
{
"id": 123,
"authorId": 1,
"title": "My awesome blog post",
"comments": [324, 325]
}
// ... more posts
],
"comments": [
{
"id": 324,
"authorId": 2
}, {
"id": 325,
"authorId": 5
}
],
"authors": [
{
"id": 1,
"name": "Paul"
},
{
"id": 2,
"name": "Nicole"
}, {
FLATTENED/NORMALIZED

6/29/2017 DevCamp 2017
⭐ "Estados rasos" simpli cam acesso/alterações

6/29/2017 DevCamp 2017
LIÇÃO 5
Determine your state's scope

6/29/2017 DevCamp 2017
STORY TIME

6/29/2017 DevCamp 2017
ONCE UPON A TIME
⚫ Quis criar um
suggestion/autocomplete

6/29/2017 DevCamp 2017
SO SAD

6/29/2017 DevCamp 2017
ACTION CREATOR
// Action Creator - ES5 old school style, babe
function fetchSuggestions(componentId, url, searchTerm){
var suggestionService = new GenericService(url);
suggestionService.getAll({
textFilter: searchTerm,
//...
})
.then(function (suggestions) {
this.dispatch('fetchSuggestions', {
componentId : componentId, // Hu, I need to manage the component instance!
suggestions : suggestions
});
}.bind(this));
}

6/29/2017 DevCamp 2017
SUGGESTION STORE
var _suggestions = {};
var suggestionStore = {
// get the suggestions for specific component
getSuggestions : function(componentId){ // WTF?
return _suggestions[componentId]; // WTF?
},
// called on dispatch('fetchSuggestions',...)
// -- nanoflux uses a convention based auto-mapping
onFetchSuggestions : function(data){
_suggestions[data.componentId] = Immutable(data.suggestions); // WTF?
this.notifyListeners();
}
};

6/29/2017 DevCamp 2017
⭐ A LISTA DE SUGESTÕES NÃO É
ESTADO DA APLICAÇÃO

6/29/2017 DevCamp 2017
⭐ A LISTA DE SUGESTÕES É ESTADO
DO COMPONENTE!

6/29/2017 DevCamp 2017
COMO DETERMINAR O ESCOPO DO
ESTADO?
Componente Aplicação

6/29/2017 DevCamp 2017
LIÇÃO 6
Manage your state globally

6/29/2017 DevCamp 2017

6/29/2017 DevCamp 2017
BASIC PRINCIPLES
⭐ Deixar acessível por todos os componentes
⭐ Alterar o estado apenas em um único ponto bem de nido

6/29/2017 DevCamp 2017
ACESSO AO ESTADO
Reactive - Hollywood principle: Don't call us, we call you! 📞

6/29/2017 DevCamp 2017
OBSERVER/PUBSUB
function notify(listeners, state) {
for(const pn in listeners){
const l = listeners[pn]
l.f.call(l.c, state)
}
}
class ApplicationStateManager {
constructor(){
this._listenerCount = 0;
this._listeners = {};
this._state = {};
}
listen(fn, ctx) {
// use object map instead of array (is smaller and faster)
this._listeners[++this._listenerCount] = { f: fn, c: ctx }
return this._listenerCount
}
unlisten(listenerId) {
delete this._listeners[listenerId];
}
update(args){
//... update stuff
notify(this._listeners, this._state)
}
getState() { return this._state }
}

6/29/2017 DevCamp 2017
USING BROWSER EVENTS
constructor(){
this._state = {};
}
update(args){
//... update stuff
window.dispatchEvent(new CustomEvent('stateUpdate', { 'detail': this._state }) )
}
getState() { return this._state }
}
// Usage
const mgr = new ApplicationStateManager();
window.addEventListener('stateUpdate', e => { console.log('state updated', e.detail)} )
mgr.update( {} ) // fake update here!
window.removeEventListener('stateUpdate');

6/29/2017 DevCamp 2017
ALTERAR O ESTADO
"Single Source of Truth"🍺

6/29/2017 DevCamp 2017
function deepFreeze(obj) {
for(let pn in obj) {
if (typeof obj[pn] === 'object')
deepFreeze(obj[pn])
}
return Object.freeze(obj)
}
constructor(){
// ...
this._state = {};
}
/* ... */
update(fn){
let s = this._state;
s = deepFreeze(Object.assign({}, s, fn(s)))
notify(this._listeners, s)
}
getState() { return this._state } // immutable, YAY!
}
UPDATE

6/29/2017 DevCamp 2017
UPDATE USAGE
function addItem(newItem){
appStateManager.update( state => {
// need to copy the state, as it is immutable
let items = _.cloneDeep(state.items || []);
items.push(newItem);
return {items: items}; // return new state slice
})
}

6/29/2017 DevCamp 2017
BASIC PRINCIPLES RECAP
⭐ Acesso ao estado de forma reativa com Observer/PubSub ou similar
⭐ Estado alterável apenas pelo próprio State Manager (imutabilidade força)

6/29/2017 DevCamp 2017
LIÇÃO 7
Break huge states in parts

6/29/2017 DevCamp 2017
BEST PRACTICES OF THE TOP DOGS
https://facebook.github.io/ ux/docs/ ux-utils.html#store
http://redux.js.org/docs/recipes/reducers/UsingCombineReducers.htm
https://mobx.js.org/best/store.html
⭐ Flux suporta múltiplos "Stores"
⭐ Redux promove vários "Reducers"
⭐ MobX recomenda "Domain Stores"

6/29/2017 DevCamp 2017
SEPARAÇÃO POR CONTEXTO -
APLICAÇÃO
Noti cações globais, Modais, Indicadores de Carregamento, etc.

6/29/2017 DevCamp 2017
SEPARAÇÃO POR CONTEXTO -
DOMÍNIO
Pedidos, Serviços, Produtos, Compras, Vendas etc.

6/29/2017 DevCamp 2017
RESUMO

6/29/2017 DevCamp 2017
JUST FOR FUN!
Stappo Demo
This small demo is built with RiotJS, BlazeCSS and Webpack
Clear All Add
Your items Stappo Stats
npmnpm v0.0.7v0.0.7
Build Type Size [bytes]
Generic Bundle 1271
Web Bundle 1243
Generic 337
Web 274
Enter name of item to add...
No Items Here
What are you searching for?

6/29/2017 DevCamp 2017
274 BYTES!
function Stappo(a){function d(b){for(var a in
b)"object"==typeof b[a]&&d(b[a]);return
Object.freeze(b)}a=void 0===a?"stappo":a;var c=
{};this.update=function(b)
{c=d(Object.assign({},c,b()));window.dispatchEvent(new
CustomEvent(a,{detail:c}))};this.get=function(){return c}};
Fully reactive App State Manager with immutable states
https://github.com/ohager/stappo

6/29/2017 DevCamp 2017
DANKE!🤘
github.com/ohager
linkedin.com/in/oliverhager
devbutze.com

Effective Application State Management (@DevCamp2017)

More Related Content

What's hot (20)

Similar to Effective Application State Management (@DevCamp2017) (20)

Recently uploaded (20)

Effective Application State Management (@DevCamp2017)