Доклад Алексея Дзюбы, Sumy PHP User Group #1, 14.05.2016

1. Путешествия во времени
как метод разработки
2016 © Алексей Дзюба

2. Что происходит в моем коде?
St= f( St-1, At-1 )
Состояние
программы в
текущий момент
времени
Состояние
программы в
предыдущий
момент времени
Действия
пользователя или
другие события
Программный код

3. Спасибо за внимание!

4. Что на самом деле происходит в моем коде?
код
состоя
ние
код
состоя
ние
код
состоя
ние
код
состоя
ниекод
состоя
ние
код
состоя
ние
код
состоя
ние

5. Чистые функции
Тестирование
Отладка
Потокобезопасность
Горячая замена кода
Неизменяемые
данные

6. Функционально чистое отображение данных: React JS
Компонент
Компонент Компонент
Компонент Компонент Компонент
данные,колбеки
DOMдеревоотображения
V = f( S )
отображение компонент данные

7. React JS: JSX
function header(state) { return (
<div>
<h1>{state.title}</h1>
{state.history.length > 0 ?
<undo count={state.history.length}/> : ''}
</div>
)}
function undo(state) { return (
<button>Undo ({state.count}) items</button>
)}

8. Immutable state
Состояние приложения
(неизменяемая структура
данных)
Действия
Фистые
функции
(reducers)
Новая версия
состояния
приложения
Отображение,
сохранение...События

9. Простой пример: Конвертер градусов
Общий
код
Отображение
Логика

10. Immutable state: UNDO
state:
nodes: -
history: -
state:
nodes:
- text: ''
history:
- action: ...
nodes: -
action:
type: ADD_NODE
position: ...
action:
type: EDIT_NODE
text: A
state:
nodes:
- text: 'A'
history:
- action: ...
nodes: ...
- action: ...
nodes: ...
action:
type: UNDO
action:
type: UNDO

11. Хватит ли памяти?
S
..N
A
B
C
S
N
B
Вставка узла D после B
0
1
2
0
1
3
2
nodes other nodesother

12. Обновления и конфликты
S0
S0
S1 S2 S3
S0
S4
A0 A1 A2
S4 S5 S6 S7
A0 A1 A2
S4S0
На сервере ничего не менялось
Кто-то обновил состояние
✓
✘
✓
S3
S7

13. Спасибо за внимание!
λ
● http://redux.js.org/
● https://facebook.github.io/react/
● https://github.com/atamurius/conwork