Григорий Шехет "treasure hunt in the land of reactive frameworks"

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