Embed Size (px)
Citation preview
React1. Модна, трендова технологія
2. Абстрагує від роботи з DOM
3. Неймовірно швидка
4. Легка в розумінні
5. Але це лише View
2
Flux
View
Action Store
Dispatcher
3
Що використаємо?MVC FRP
Популярно + -
Зручна робота з данними + -
Масштабуємо + +
Асинхронність - +
Автоматичне оновлення залежностей - +
4
View
Action StoreMVC
DispatcherFRP
5
Коли НЕ використовувати FRP• ви працюєте з данними що рідко змінюються
• в команді не нема кому підтримувати
• це явний оверхед
6
Коли використовувати FRP• багато залежних станів
• є декілька джерел надходження сигналів
• є жорстка асинхронність
7
Що треба пам'ятати про FRP• Все зберігається в стрімах
• Все іммутабельно
8
Бібліотеки JS• Bacon.js
• RxJS
• Kefir.js
• Scala.js
9
Code Samplesvar targetText = Bacon
.fromEventTarget(document, 'mousemove')
.filter(targetContainsText)
.map(getTextFromEvent)
.skipDuplicates();
01.
02.
03.
04.
05.
10
АсинхронністьЧи відноситься остання відповідь до останнього запиту?
var responses = targetText
.flatMapLatest(postText);
responses.onValue(processResponse);
01.
02.
03.
11
Додаємо джерело подійvar buttonPresses = buttons
.asEventStream('click')
.map(processButtonClick);
var responses = targetText
.merge(buttonPresses)
.flatMapLatest(postText);
01.
02.
03.
04.
05.
06.
12
ReactProps State
поточний стан компонента
“Every time your data changes, it’s like hitting refresh in a server rendered
app.”
Pete Hunt, Facebook
13
Data Flow• Проблеми старого плеєра
• Неаявний стан
• Вибір технології
14
Архітектура БандуриView
• Сам плеєр
• Progress-bar
• Volume-bar
15
Архітектура БандуриAction
• UI
• Внутрішні івенти(елементи логіки)
• Обогртка для розробників
• Дистанційне керуваня(веб-сокет)
• Пряме підключення до стрімів
16
Dispatcher/StoredispatcherAPI =
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
Оновлюємо ViewplaylistsCollection.onValue (PLC) ->
UI.player.setProps PLCollection: PLC
UI.progressbar.setProps currentTrack: ...
01.
02.
03.
18
Додамо джерело сигналуremoteActions = Bacon.fromEventTarget ws , 'message', ...
controls.plug(remoteActions)
01.
02.
19
Роман Якобчук• http://roma.if.ua
• Skype: r.iakobchuk
• Email: [email protected]
Links
https://github.com/romabelka/jsLab
https://github.com/romabelka/bandura.js
http://www.reactivemanifesto.org
21
