1. Observable как атом приложения

2. Я
Артем Бей - разработчик интерфейсов
@defly_self
http://tweereal.com/
http://youscan.ru/ (мониторинг соц. медиа)

4. “we believe that the essential material to be
addressed by a subject at this level is not the
syntax of particular programming-language
constructs, nor clever algorithms for
computing particular functions efficiently, nor
even the mathematical analysis of
algorithms and the foundations of
computing, but rather the techniques used to
control the intellectual complexity of
large software systems.”
Structure and Interpretation of Computer Programs

5. <button onclick=‘handler()’>
$(‘.click-button’).click(handler);
фреймворки, AMD и даже новые языки
программирования (Dart, ClojureScript,
CoffeeScript, TypeScript и тд).

6. В чем сложность?

7. В событиях!

8. • Сложно компоновать несколько событий
• Сложно соблюдать очередность
• Одни события могут создавать другие и
за этим всем сложно следить

11. Способы борьбы
• Дисциплина
• Control-flow библиотеки
• Promises

12. Control-flow
async.parallel([
function(callback){
setTimeout(function(){
callback(null, 'one');
}, 200);
},
function(callback){
setTimeout(function(){
callback(null, 'two');
}, 100);
}
],// optional callback
function(err, results){
// the results array will equal ['one','two'] even though
// the second function had a shorter timeout.
});

13. Promises
Q.fcall(step1)
.then(step2)
.then(step3)
.then(step4)
.then(function (value4) {
// Do something with value4
}, function (error) {
// Handle any error from step1 through step4
})
.done();

14. Functional Reactive Programming
FRP

15. Обработка данных
которые меняются со
временем

16. События оборачиваются в потоки,
которые возможно
• Фильтровать
• Объединять (merge)
• Комбинировать (zip)
• Тротлить (throttle)
• Преобразовывать
• Буферизировать
• и так далее...

17. Сервис подсказок (RxJS)
/* Only get the value from each key up */var keyups =
Rx.Observable.fromEvent(input, 'keyup')
.select(function (e) {
return e.target.value;
})
.where(function (text) {
return text.length > 2;
});/* Now throttle/debounce the input for 500ms */
var throttled = keyups
.throttle(500 /* ms */);/* Now get only distinct values,
so we eliminate the arrows */
var distinct = keyups
.distinctUntilChanged();

18. Сервис подсказок - 2 (RxJS)
var suggestions = distinct
.select(function (text) {
return searchWikipedia(text);
})
.switchLatest()
.where(function (data) {
return data.length == 2 && data[1].length > 0;
});

19. Ещё проще!
(уменьшаем наши требования)

20. Данные + события
Данные которые меняются
Данные + событие

21. Observable

23. Observable на js-псевдокоде
function Observable () {
var value; // value
var subscribers; // [sub1, sub2, ...]
function notifySubscribers() {
subscibers.forEach(notify);
}
this.addSubscriber = function(subscriber) {
//...
subscribers.push(subscriber);
}
this.removeSubscriber = function(subscriber) {
// scan and remove subscriber
}
this.setValue = function(newValue) {
//...
if (!equal(value, newValue)) {
notifySubscribers();
}
}
this.getValue = function() {
//..
}
}

24. Knockout style API
observableExample = observable(); // create observable
observableExample(value); //set value
observableExample(); //get value
observableExample.subscribe(newValueHandler);

25. Подписчики или
зависимые observables

26. Подписчик - тот же observable, у
которого значение всегда
соответствует значению заданной
функции, аргументы которой другие
observable.

27. Computed
var x = observable(0);
var y = observable(0);
var r = computed(function() {
return Math.sqrt(x()*x() + y()*y());
});

28. Computed. Обратная операция
var r = computed({
read: readHandler,// previous
write: function(r) {
if (r >= 0) {
x(r*Math.cos(Math.PI/4));
y(r*Math.sin(Math.PI/4));
} else {
throw new Error(‘Не может быть отрицательным’);
}
}
});

29. Computed. Пример из жизни
var isFormValid = computed(function() {
return (login().length > 2) && (password().length > 5);
});
var canSend = computed(function() {
return !messageSent() && !loading() && isFormValid();
});

30. Observable коллекции – скажут
подписчикам, что изменился
набор её элементов (а не сами
элементы)

31. id1 id2 id2
user1 user2 user2
fullProfile1 fullProfile2 fullProfile3

32. id1 id2
user1 user2
fullProfile1 fullProfile3

33. В масштабах приложения
WebSockets Repository Workers
Observables
UI (data binding)

34. Возможные проблемы
• Иногда необходим computed.dispose()
• Throttle
• Производительность (много работы за
бортом)

35. Profit
• Декларативность
• Тестируемость
• Круто работает в связке с data binding
• Snapshots

36. Что посмотреть и почитать?
RxJS, Bacon.js;
Knockout (Knockup, Durandal);
obs (https://github.com/pluma/obs) + Rivets;
Прочитать SICP
http://awelonblue.wordpress.com/2012/07/01/why-not-
events/
http://elm-lang.org/
https://speakerdeck.com/search?q=frp