Мне нравится использовать React. Данная библиотека – отличное решение для многих задач, так как она не навязывает конкретный паттерн или архитектуру. Разработчик сам решает что лучше для той или иной ситуации. Существует множество уже готовых архитектурных решений. Большинство выбирает Redux. Существует множество библиотек использующее идеи FRP, например Calmm или MobX. Как результат, получаем много подходов, решающие одну и туже задачу. В своем докладе хочу поговорить о различных архитектурных решениях, посмотреть на плюсы и минусы той или иной библиотеки, и прийти к консенсусу.

1. Shehet Gregory
Grammarly
Treasure hunt in the land of
Reactive frameworks

2. • Software Engineer at
• Front-End Digest on
Shehet
Gregory

3. Treasure hunt in the land of
Reactive frameworks

4. STOP GEEK?

5. Few animations
Blank slides
But I have a STICKERS!!!

6. Whoami?

7. Grammarly

8. Vue.js -> React.js
History 2014-2015

9. Flux vs ReFlux
History 2014-2015

10. EventEmitter?
History

11. Inspiration

13. Architecture?

14. MV**?

15. Anarchy

16. War
ReFlux Flux

17. Dan Abramov
@dan_abramov
Redux

18. JS + ELM = Redux

19. Immutable data
• State snapshots
• Replayable actions
• State hydration
• Traceability
• Time travelling

20. Silver bullet

21. Goodbye Flux

22. Demo. Todo?

23. Redux 10 Todo List Demo

24. What Inside?

25. Redux 100000
Todo List Demo

26. Results
Add Todo (ms) Toggle Todo (ms)
Redux 2187 887

27. Stop. Redux?
Need to fix our bullet

28. Redux Connect?

29. React?

30. Andrew Clark
@acdlite

31. https://github.com/acdlite/react-fiber-architecture
React Next

32. Fiber? Not ready.

33. Try to decouple state
const initialState = {
todos: []
}
const initialState = {
todos: [],
completedNumber: 0
}
// Todo component State
this.state = {
completed: false
}

34. Try to decouple state
const initialState = {
todos: []
}
const initialState = {
todos: [],
completedNumber: 0
}
// Todo component State
this.state = {
completed: false
}

35. Try to decouple state
const initialState = {
todos: []
}
const initialState = {
todos: [],
completedNumber: 0
}
// Todo component State
this.state = {
completed: false
}

36. Not bad

37. Results
Add Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49

38. Add todo x2.5
Toggle todo x18
Redux decouple vs Redux

39. Stop. Is it Redux?

40. React 100000
Todo List Demo

41. Results
Add Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37

42. Add todo 15 ms
Toggle todo 12 ms
React vs Redux decouple

43. Michel Weststrate
@mweststrate
MobX

44. MobX 100000
Todo List Demo

45. Results
Add Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45

46. Results
Add Todo (ms) Toggle Todo (ms)
Redux 2187 887
Redux decouple state 860 49
React 845 37
MobX 905 45

47. Add todo x2.4
Toggle todo x19
MobX vs Redux

48. Add todo 60 ms
Toggle todo 8 ms
MobX vs React

49. Magic?

50. Observable, Mutable data
• Excels at complex, coupled domains
• And complex, deep calculations
• Mimimal boilerplate
• Efficient
• Unopinionated
• Encourages strong typing

51. How it works?

52. Todo Model and
@observable
class TodoModel {
@observable id
@observable text
@observable completed
constructor(id, text) {
this.id = id
this.text = text
this.completed = false
}
toggleTodo() {
this.completed = !this.completed
}
}

53. Todo Model and
@observable
class TodoModel {
@observable id
@observable text
@observable completed
constructor(id, text) {
this.id = id
this.text = text
this.completed = false
}
toggleTodo() {
this.completed = !this.completed
}
}

54. Todo Model and
@observable
class TodoModel {
@observable id
@observable text
@observable completed
constructor(id, text) {
this.id = id
this.text = text
this.completed = false
}
toggleTodo() {
this.completed = !this.completed
}
}

55. Todo Component
with @observer
@observer class Todo extends Component {
render() {
return (
<li
onClick={this.props.todo.toggleTodo}
style = {{
textDecoration: this.props.todo.completed ? 'line-through' : 'none'
}}>
{ this.props.todo.text}
</li>
)
}
}

56. Todo Component
with @observer
@observer class Todo extends Component {
render() {
return (
<li
onClick={this.props.todo.toggleTodo}
style = {{
textDecoration: this.props.todo.completed ? 'line-through' : 'none'
}}>
{ this.props.todo.text}
</li>
)
}
}

57. @observable?

58. No magic.
Only abstraction.

59. Redux
Predictability through transactional state
MobX
Simplicity through minimally defined,
automatically derived state
by @mweststrate

60. Second popular state
management

61. 30% less code
Redux 208
MobX 157

62. Stop! Hollywar!
Our silver bullet!
redux-actions
redux-act
…

63. MobX 100000 with DevTool
Todo List Demo

64. Read more
https://mobxjs.github.io/mobx/

65. npm install mobx mobx-react

66. yarn add mobx mobx-react
npm install mobx mobx-react

67. Redux & MobX

68. Immutable & Mutable
Data

69. MobX-State-Tree

70. Benefit
•snapshot-able
•state container
•replayable actions
•efficient
•transparent reactive derivations
•patches
•middleware
•references
•dependency injection

71. MobX-State-Tree-Redux 100000
Todo List Demo

72. Stack
• redux actions
• redux dispatching
• redux provider & connect
• redux devtools
• redux store
• redux reducers
• mobx-state-tree factories
• mobx-state-tree actions

73. Redux? MobX?
How it works?

74. createFactory
const TodoStore = createFactory({
todos: arrayOf(Todo),
findTodoById: function (id) {
return this.todos.find(todo => todo.id === id)
},
[ADD_TODO]: action(function ({text}) {
this.todos.unshift({
id: nextTodoId++,
text
})
}),
[TOGGLE_TODO]: action(function ({id}) {
const todo = this.findTodoById(id)
todo.completed = !todo.completed
})
})

75. createFactory
const TodoStore = createFactory({
todos: arrayOf(Todo),
findTodoById: function (id) {
return this.todos.find(todo => todo.id === id)
},
[ADD_TODO]: action(function ({text}) {
this.todos.unshift({
id: nextTodoId++,
text
})
}),
[TOGGLE_TODO]: action(function ({id}) {
const todo = this.findTodoById(id)
todo.completed = !todo.completed
})
})

76. Mock Store
const todos = window.todos = todosFactory(initialState)
const store = asReduxStore(todos)
connectReduxDevtools(todos)

77. Mock Store
const todos = window.todos = todosFactory(initialState)
const store = asReduxStore(todos)
connectReduxDevtools(todos)

78. Mock Store
const todos = window.todos = todosFactory(initialState)
const store = asReduxStore(todos)
connectReduxDevtools(todos)

79. Results
Add 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

80. Results
Add 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

81. Add todo x1.75
Toggle todo 52 ms
MobX State Tree Redux vs Redux

82. Read more
https://github.com/mobxjs/mobx-state-tree

83. yarn add mobx-state-tree

84. What about FRP?

85. Vesa Karvonen
@VesaKarvonen
Calmm-js

86. Bacon or Kefir?

87. BRAL
BACON REACTIVE ATOM LENS

88. KRAL
KEFIR REACTIVE ATOM LENS

89. Bral 10000
Todo List Demo

90. Kral 10000
Todo List Demo

91. Slowwwwly…..

92. Problem
find(t => t.id === id)

93. List to Map

94. Kefir is faster

95. Kral 100000
Todo List Demo

96. Results
Add 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

97. Results
Add 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

98. Add todo x2.4
Toggle todo x3.5
KRAL vs Redux

99. Add todo x1.6 (562 ms)
Toggle todo x5.6 (208 ms)
KRAL vs MobX

100. Atom
const todo = Atom({ text: 'Some text', completed: false })
todo.get()
// { text: "Some text", completed: false }
todo.view('text').get()
// 'Some text'
todo.view('text').set('Another text')
// 'Another text'
todo.view('completed').modify(completed => !completed)
// false

101. Atom .get()/set()
const todo = Atom({ text: 'Some text', completed: false })
todo.get()
// { text: "Some text", completed: false }
todo.view('text').get()
// 'Some text'
todo.view('text').set('Another text')
// 'Another text'
todo.view('completed').modify(completed => !completed)
// false

102. Lens/View
const todo = Atom({ text: 'Some text', completed: false })
todo.get()
// { text: "Some text", completed: false }
todo.view('text').get()
// 'Some text'
todo.view('text').set('Another text')
// 'Another text'
todo.view('completed').modify(completed => !completed)
// false

103. Atom .modify()
const todo = Atom({ text: 'Some text', completed: false })
todo.get()
// { text: "Some text", completed: false }
todo.view('text').get()
// 'Some text'
todo.view('text').set('Another text')
// 'Another text'
todo.view('completed').modify(completed => !completed)
// false

104. Reactive HTML
const Todo = ({ todo }) =>
<K.li
onClick={ () => todo
.view('completed')
.modify(completed => !completed)
}
style={{
textDecoration: todo
.view('completed')
.map(completed => completed ? 'line-through' : 'none')
}}
>
{ todo.view('text') }
</K.li>

105. Reactive HTML
const Todo = ({ todo }) =>
<K.li
onClick={ () => todo
.view('completed')
.modify(completed => !completed)
}
style={{
textDecoration: todo
.view('completed')
.map(completed => completed ? 'line-through' : 'none')
}}
>
{ todo.view('text') }
</K.li>

106. Reactive HTML
const Todo = ({ todo }) =>
<K.li
onClick={ () => todo
.view('completed')
.modify(completed => !completed)
}
style={{
textDecoration: todo
.view('completed')
.map(completed => completed ? 'line-through' : 'none')
}}
>
{ todo.view('text') }
</K.li>

107. Reactive HTML
const Todo = ({ todo }) =>
<K.li
onClick={ () => todo
.view('completed')
.modify(completed => !completed)
}
style={{
textDecoration: todo
.view('completed')
.map(completed => completed ? 'line-through' : 'none')
}}
>
{ todo.view('text') }
</K.li>

108. Kral(Kefir) K*
Bral (Bacon) B*

109. Welcome Karet
import React from 'karet'

110. Karet Todo
const Todo = ({ todo }) =>
<li
onClick={ () => todo
.view('completed')
.modify(completed => !completed)
}
style={{
textDecoration: todo
.view('completed')
.map(completed => completed ? 'line-through' : 'none'),
cursor: 'pointer'
}}
>
{ todo.view('text') }
</li>

111. Karet 100000
Todo List Demo

112. Results
Add 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

113. Results
Add 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

114. Add todo x1.9 (1024 ms)
Toggle todo x5.3
Karet vs Redux

115. Add todo x1.25 (235 ms)
Toggle todo x3.7 (132 ms)
KRAL vs MobX

116. Add todo x1.28 (327 ms)
Toggle todo x3.7 (122 ms)
Karet vs KRAL

117. Benefits
• Immutable data
• Observables
• Optimized HTML rendering

118. yarn add kral-* karate

119. Read more
https://github.com/calmm-js

120. Results
Add 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

121. Results
Add Todo (ms) Toggle Todo (ms)
React 845 37
MobX 905 45
Karet 1140 167
KRAL 1467 253
Redux 2187 887

122. Results
Add Todo (ms) Toggle Todo (ms)
MobX 905 45
Karet (KRAL) 1140 167
Redux 2187 887

123. Back to React

124. JS is Overhype

125. What is good or bad?

126. React + View = ❤

127. Architecture?

128. Pure Functions

129. Actions

130. State management?

131. Mutabel vs Immutable

132. Observer

133. View Update

134. Observable
Components

135. MobX @4.0
<Observer>
{ () => <div>{this.props.observer}</div> }
</Observer>

136. Inspiration

137. Try to code your
architecture

138. MobX–Reactor
https://github.com/amsb/mobx-reactor
MobX inspired by redux, react-redux and redux-saga

139. What next?
React.js Conf 2016 - Andrew Clark - Back to React
https://www.youtube.com/watch?v=ZVYVtUFDf28

140. What next?
You Might Not Need Redux - Dan Abramov
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

141. Think about your
product and architecture

142. Thank you!
Questions are welcome
@AGambit95