28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab. Роман Якобчук. "Flux в стиле FRP: связываем React и Bacon" Впомните свои превые впечатления от декларативного описания UI в Angular/Ember/React? Это было прекрасно, но пора идти дальше! Я покажу, как строить крупные проекты используя скороть и декларативность Реакта, подкрепив их логикой в стиле FRP. Вы узнаете, что такое "неявный стэйт", как просто от него избавиться с помощью Bacon.js и насколько это облегчает жизнь. Сможете забыть про проблемы с асинхронностью и получать удовольствие от технологий о которых все говорят, но мало кто делает. Подробнее: http://geekslab.co/ https://www.facebook.com/GeeksLab.co https://www.youtube.com/user/GeeksLabVideo

1. Flux в стилі FRP: єднаємо
React і Bacon
Роман Якобчук

2. React
1. Модна, трендова технологія
2. Абстрагує від роботи з DOM
3. Неймовірно швидка
4. Легка в розумінні
5. Але це лише View
2

3. Flux
View
Action Store
Dispatcher
3

4. Що використаємо?
MVC FRP
Популярно + -
Зручна робота з данними + -
Масштабуємо + +
Асинхронність - +
Автоматичне оновлення залежностей - +
4

5. View
Action Store
MVC
Dispatcher
FRP
5

6. Коли НЕ використовувати FRP
• ви працюєте з данними що рідко змінюються
• в команді не нема кому підтримувати
• це явний оверхед
6

7. Коли використовувати FRP
• багато залежних станів
• є декілька джерел надходження сигналів
• є жорстка асинхронність
7

8. Що треба пам'ятати про FRP
• Все зберігається в стрімах
• Все іммутабельно
8

9. Бібліотеки JS
• Bacon.js
• RxJS
• Kefir.js
• Scala.js
9

10. Code Samples
var targetText = Bacon
.fromEventTarget(document, 'mousemove')
.filter(targetContainsText)
.map(getTextFromEvent)
.skipDuplicates();
01.
02.
03.
04.
05.
10

11. Асинхронність
Чи відноситься остання відповідь до останнього запиту?
var responses = targetText
.flatMapLatest(postText);
responses.onValue(processResponse);
01.
02.
03.
11

12. Додаємо джерело подій
var buttonPresses = buttons
.asEventStream('click')
.map(processButtonClick);
var responses = targetText
.merge(buttonPresses)
.flatMapLatest(postText);
01.
02.
03.
04.
05.
06.
12

13. React
Props State
поточний стан компонента
“Every time your data changes, it’s like hitting refresh in a server rendered
app.”
Pete Hunt,Facebook
13

14. Data Flow
• Проблеми старого плеєра
• Неаявний стан
• Вибір технології
14

15. Архітектура Бандури
View
• Сам плеєр
• Progress-bar
• Volume-bar
15

16. Архітектура Бандури
Action
• UI
• Внутрішні івенти(елементи логіки)
• Обогртка для розробників
• Дистанційне керуваня(веб-сокет)
• Пряме підключення до стрімів
16

17. Dispatcher/Store
dispatcherAPI =
collections : new Bacon.Bus()
...
#-------------
playlistsCollection = collections
.scan(new PLCollection(), (collection, ev) ->
collection[ev.action](ev.playlist)
...
01.
02.
03.
04.
05.
06.
07.
08.
17

18. Оновлюємо View
playlistsCollection.onValue (PLC) ->
UI.player.setProps PLCollection: PLC
UI.progressbar.setProps currentTrack: ...
01.
02.
03.
18

19. Додамо джерело сигналу
remoteActions = Bacon.fromEventTarget ws , 'message', ...
controls.plug(remoteActions)
01.
02.
19

21. Роман Якобчук
• http://roma.if.ua
• Skype: r.iakobchuk
• Email: r.iakobchuk@gmail.com
Links
https://github.com/romabelka/jsLab
https://github.com/romabelka/bandura.js
http://www.reactivemanifesto.org
21