Upload
fwdays
View
184
Download
0
Embed Size (px)
Citation preview
Shehet Gregory Grammarly
Treasure hunt in the land of Reactive frameworks
• Software Engineer at
• Front-End Digest on
Shehet Gregory
Treasure hunt in the land of Reactive frameworks
STOP GEEK?
Few animations Blank slides
But I have a STICKERS!!!
Whoami?
Grammarly
Vue.js -> React.js
History 2014-2015
Flux vs ReFlux
History 2014-2015
EventEmitter?
History
Inspiration
Architecture?
MV**?
Anarchy
War
ReFlux Flux
Dan Abramov @dan_abramov Redux
JS + ELM = Redux
Immutable data
• State snapshots • Replayable actions • State hydration • Traceability • Time travelling
Silver bullet
Goodbye Flux
Demo. Todo?
Redux 10 Todo List Demo
What Inside?
Redux 100000 Todo List Demo
Results
Add Todo (ms) Toggle Todo (ms)
Redux 2187 887
Stop. Redux? Need to fix our bullet
Redux Connect?
React?
Andrew Clark @acdlite
https://github.com/acdlite/react-fiber-architecture
React Next
Fiber? Not ready.
Try to decouple state
constinitialState={todos:[]}
constinitialState={todos:[],completedNumber:0}
//TodocomponentStatethis.state={completed:false}
Try to decouple state
constinitialState={todos:[]}
constinitialState={todos:[],completedNumber:0}
//TodocomponentStatethis.state={completed:false}
Try to decouple state
constinitialState={todos:[]}
constinitialState={todos:[],completedNumber:0}
//TodocomponentStatethis.state={completed:false}
Not bad
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
Add todo x2.5 Toggle todo x18
Redux decouple vs Redux
Stop. Is it Redux?
React 100000 Todo List Demo
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
Add todo 15 ms Toggle todo 12 ms
React vs Redux decouple
Michel Weststrate @mweststrate MobX
MobX 100000 Todo List Demo
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
Add todo x2.4 Toggle todo x19
MobX vs Redux
Add todo 60 ms Toggle todo 8 ms
MobX vs React
Magic?
Observable, Mutable data
• Excels at complex, coupled domains • And complex, deep calculations • Mimimal boilerplate • Efficient • Unopinionated • Encourages strong typing
How it works?
Todo Model and @observable
classTodoModel{@observableid@observabletext@observablecompletedconstructor(id,text){this.id=idthis.text=textthis.completed=false}toggleTodo(){this.completed=!this.completed}}
Todo Model and @observable
classTodoModel{@observableid@observabletext@observablecompletedconstructor(id,text){this.id=idthis.text=textthis.completed=false}toggleTodo(){this.completed=!this.completed}}
Todo Model and @observable
classTodoModel{@observableid@observabletext@observablecompletedconstructor(id,text){this.id=idthis.text=textthis.completed=false}toggleTodo(){this.completed=!this.completed}}
Todo Component with @observer
@observerclassTodoextendsComponent{render(){return(<lionClick={this.props.todo.toggleTodo}style={{textDecoration:this.props.todo.completed?'line-through':'none' }}>{this.props.todo.text}</li>)}}
Todo Component with @observer
@observerclassTodoextendsComponent{render(){return(<lionClick={this.props.todo.toggleTodo}style={{textDecoration:this.props.todo.completed?'line-through':'none'}}>{this.props.todo.text}</li>)}}
@observable?
No magic. Only abstraction.
Redux Predictability through transactional state
MobX Simplicity through minimally defined,
automatically derived state
by @mweststrate
Second popular state management
30% less code
Redux 208
MobX 157
Stop! Hollywar! Our silver bullet!
redux-actions redux-act
…
MobX 100000 with DevTool Todo List Demo
Read morehttps://mobxjs.github.io/mobx/
npm install mobx mobx-react
yarn add mobx mobx-react
npm install mobx mobx-react
Redux & MobX
Immutable & Mutable Data
MobX-State-Tree
Benefit•snapshot-able •state container •replayable actions •efficient •transparent reactive derivations •patches •middleware •references •dependency injection
MobX-State-Tree-Redux 100000 Todo List Demo
Stack• redux actions • redux dispatching • redux provider & connect • redux devtools • redux store • redux reducers • mobx-state-tree factories • mobx-state-tree actions
Redux? MobX? How it works?
createFactoryconstTodoStore=createFactory({todos:arrayOf(Todo),findTodoById:function(id){returnthis.todos.find(todo=>todo.id===id) },[ADD_TODO]:action(function({text}){this.todos.unshift({id:nextTodoId++,text})}),[TOGGLE_TODO]:action(function({id}){consttodo=this.findTodoById(id)todo.completed=!todo.completed})})
createFactoryconstTodoStore=createFactory({todos:arrayOf(Todo),findTodoById:function(id){returnthis.todos.find(todo=>todo.id===id)},[ADD_TODO]:action(function({text}){this.todos.unshift({id:nextTodoId++,text})}),[TOGGLE_TODO]:action(function({id}){consttodo=this.findTodoById(id)todo.completed=!todo.completed})})
Mock Storeconsttodos=window.todos=todosFactory(initialState)
conststore=asReduxStore(todos)
connectReduxDevtools(todos)
Mock Storeconsttodos=window.todos=todosFactory(initialState)
conststore=asReduxStore(todos)
connectReduxDevtools(todos)
Mock Storeconsttodos=window.todos=todosFactory(initialState)
conststore=asReduxStore(todos)
connectReduxDevtools(todos)
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
MobX State Tree Redux 3813 835
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
MobX State Tree Redux 3813 835
Add todo x1.75 Toggle todo 52 ms
MobX State Tree Redux vs Redux
Read morehttps://github.com/mobxjs/mobx-state-tree
yarn add mobx-state-tree
What about FRP?
Vesa Karvonen @VesaKarvonen Calmm-js
Bacon or Kefir?
BRAL BACON REACTIVE ATOM LENS
KRAL KEFIR REACTIVE ATOM LENS
Bral 10000 Todo List Demo
Kral 10000 Todo List Demo
Slowwwwly…..
Problemfind(t=>t.id===id)
List to Map
Kefir is faster
Kral 100000 Todo List Demo
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
MobX State Tree Redux 3813 835
KRAL 1467 253
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
MobX State Tree Redux 3813 835
KRAL 1467 253
Add todo x2.4 Toggle todo x3.5
KRAL vs Redux
Add todo x1.6 (562 ms) Toggle todo x5.6 (208 ms)
KRAL vs MobX
Atomconsttodo=Atom({text:'Sometext',completed:false})todo.get()//{text:"Sometext",completed:false}todo.view('text').get()//'Sometext'todo.view('text').set('Anothertext')//'Anothertext'todo.view('completed').modify(completed=>!completed) //false
Atom .get()/set()consttodo=Atom({text:'Sometext',completed:false})todo.get()//{text:"Sometext",completed:false}todo.view('text').get()//'Sometext'todo.view('text').set('Anothertext')//'Anothertext'todo.view('completed').modify(completed=>!completed) //false
Lens/Viewconsttodo=Atom({text:'Sometext',completed:false})todo.get()//{text:"Sometext",completed:false}todo.view('text').get()//'Sometext'todo.view('text').set('Anothertext')//'Anothertext'todo.view('completed').modify(completed=>!completed) //false
Atom .modify()consttodo=Atom({text:'Sometext',completed:false})todo.get()//{text:"Sometext",completed:false}todo.view('text').get()//'Sometext'todo.view('text').set('Anothertext')//'Anothertext'todo.view('completed').modify(completed=>!completed)//false
Reactive HTMLconstTodo=({todo})=><K.lionClick={()=>todo.view('completed').modify(completed=>!completed)}style={{textDecoration:todo.view('completed').map(completed=>completed?'line-through':'none') }}>{todo.view('text')}</K.li>
Reactive HTMLconstTodo=({todo})=><K.lionClick={()=>todo.view('completed').modify(completed=>!completed)}style={{textDecoration:todo.view('completed').map(completed=>completed?'line-through':'none') }}>{todo.view('text')}</K.li>
Reactive HTMLconstTodo=({todo})=><K.lionClick={()=>todo.view('completed').modify(completed=>!completed)}style={{textDecoration:todo.view('completed').map(completed=>completed?'line-through':'none')}}>{todo.view('text')}</K.li>
Reactive HTMLconstTodo=({todo})=><K.lionClick={()=>todo.view('completed').modify(completed=>!completed)}style={{textDecoration:todo.view('completed').map(completed=>completed?'line-through':'none') }}>{todo.view('text')}</K.li>
Kral(Kefir) K* Bral (Bacon) B*
Welcome Karet
importReactfrom'karet'
Karet TodoconstTodo=({todo})=><lionClick={()=>todo.view('completed').modify(completed=>!completed)}style={{textDecoration:todo.view('completed').map(completed=>completed?'line-through':'none'),cursor:'pointer'}}>{todo.view('text')}</li>
Karet 100000 Todo List Demo
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
MobX State Tree Redux 3813 835
KRAL 1467 253
Karet 1140 167
ResultsAdd Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45
MobX State Tree Redux 3813 835
KRAL 1467 253
Karet 1140 167
Add todo x1.9 (1024 ms) Toggle todo x5.3
Karet vs Redux
Add todo x1.25 (235 ms) Toggle todo x3.7 (132 ms)
KRAL vs MobX
Add todo x1.28 (327 ms) Toggle todo x3.7 (122 ms)
Karet vs KRAL
Benefits• Immutable data • Observables • Optimized HTML rendering
yarn add kral-* karate
Read morehttps://github.com/calmm-js
ResultsAdd Todo (ms) Toggle Todo (ms)
React 845 37
Redux decouple state 860 49
MobX 905 45
Karet 1140 167
KRAL 1467 253
Redux 2187 887
MobX State Tree Redux 3813 835
ResultsAdd Todo (ms) Toggle Todo (ms)
React 845 37
MobX 905 45
Karet 1140 167
KRAL 1467 253
Redux 2187 887
ResultsAdd Todo (ms) Toggle Todo (ms)
MobX 905 45
Karet (KRAL) 1140 167
Redux 2187 887
Back to React
JS is Overhype
What is good or bad?
React + View = ❤
Architecture?
Pure Functions
Actions
State management?
Mutabel vs Immutable
Observer
View Update
Observable Components
MobX @4.0
<Observer>{()=><div>{this.props.observer}</div>}</Observer>
Inspiration
Try to code your architecture
MobX–Reactor
https://github.com/amsb/mobx-reactor
MobX inspired by redux, react-redux and redux-saga
What next?React.js Conf 2016 - Andrew Clark - Back to React
https://www.youtube.com/watch?v=ZVYVtUFDf28
What next?You Might Not Need Redux - Dan Abramov
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
Think about your product and architecture
Thank you! Questions are welcome
@AGambit95