These are the slides of my talk at DevCamp 2017 (http://www.devcamp.com.br), Campinas, Brazil.
It's about best practices for better application state management. It's mainly derived from my many years experiences with React, Flux, Redux, etc. and other front-end technologies, and shall give some tips on how to deal with states in component based web applications.
Originally, it's an interactive slideshow (made with ReactJS ;-) ) and better be viewed here: https://ohager.github.io/devcamp2017_slides
Hint: you may use Google's online translation for more or less comprehensive translations to other languages
19. 6/29/2017 DevCamp 2017
https://ohager.github.io/devcamp2017_slides/#/?export& 19/55
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})
}
45. 6/29/2017 DevCamp 2017
https://ohager.github.io/devcamp2017_slides/#/?export& 45/55
function deepFreeze(obj) {
for(let pn in obj) {
if (typeof obj[pn] === 'object')
deepFreeze(obj[pn])
}
return Object.freeze(obj)
}
class ApplicationStateManager {
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
46. 6/29/2017 DevCamp 2017
https://ohager.github.io/devcamp2017_slides/#/?export& 46/55
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
})
}
53. 6/29/2017 DevCamp 2017
https://ohager.github.io/devcamp2017_slides/#/?export& 53/55
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?
54. 6/29/2017 DevCamp 2017
https://ohager.github.io/devcamp2017_slides/#/?export& 54/55
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