Successfully reported this slideshow.
Observable как атом приложения
ЯАртем Бей - разработчик интерфейсов@defly_selfhttp://tweereal.com/http://youscan.ru/ (мониторинг соц. медиа)
“we believe that the essential material to beaddressed by a subject at this level is not thesyntax of particular programmi...
<button onclick=‘handler()’>$(‘.click-button’).click(handler);фреймворки, AMD и даже новые языкипрограммирования (Dart, Cl...
В чем сложность?
В событиях!
• Сложно компоновать несколько событий• Сложно соблюдать очередность• Одни события могут создавать другие иза этим всем сл...
Способы борьбы• Дисциплина• Control-flow библиотеки• Promises
Control-flowasync.parallel([function(callback){setTimeout(function(){callback(null, one);}, 200);},function(callback){setT...
PromisesQ.fcall(step1).then(step2).then(step3).then(step4).then(function (value4) {// Do something with value4}, function ...
Functional Reactive ProgrammingFRP
Обработка данныхкоторые меняются современем
События оборачиваются в потоки,которые возможно• Фильтровать• Объединять (merge)• Комбинировать (zip)• Тротлить (throttle)...
Сервис подсказок (RxJS)/* Only get the value from each key up */var keyups =Rx.Observable.fromEvent(input, keyup).select(f...
Сервис подсказок - 2 (RxJS)var suggestions = distinct.select(function (text) {return searchWikipedia(text);}).switchLatest...
Ещё проще!(уменьшаем наши требования)
Данные + событияДанные которые меняютсяДанные + событие
Observable
Observable на js-псевдокодеfunction Observable () {var value; // valuevar subscribers; // [sub1, sub2, ...]function notify...
Knockout style APIobservableExample = observable(); // create observableobservableExample(value); //set valueobservableExa...
Подписчики илизависимые observables
Подписчик - тот же observable, укоторого значение всегдасоответствует значению заданнойфункции, аргументы которой другиеob...
Computedvar x = observable(0);var y = observable(0);var r = computed(function() {return Math.sqrt(x()*x() + y()*y());});
Computed. Обратная операцияvar r = computed({read: readHandler,// previouswrite: function(r) {if (r >= 0) {x(r*Math.cos(Ma...
Computed. Пример из жизниvar isFormValid = computed(function() {return (login().length > 2) && (password().length > 5);});...
Observable коллекции – скажутподписчикам, что изменилсянабор её элементов (а не самиэлементы)
id1 id2 id2user1 user2 user2fullProfile1 fullProfile2 fullProfile3
id1 id2user1 user2fullProfile1 fullProfile3
В масштабах приложенияWebSockets Repository WorkersObservablesUI (data binding)
Возможные проблемы• Иногда необходим computed.dispose()• Throttle• Производительность (много работы забортом)
Profit• Декларативность• Тестируемость• Круто работает в связке с data binding• Snapshots
Что посмотреть и почитать?RxJS, Bacon.js;Knockout (Knockup, Durandal);obs (https://github.com/pluma/obs) + Rivets;Прочитат...
Observable как атом приложения
Observable как атом приложения
Observable как атом приложения
Observable как атом приложения
Upcoming SlideShare
Loading in …5
×

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

432 views

Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. Observable как атом приложения
  2. 2. ЯАртем Бей - разработчик интерфейсов@defly_selfhttp://tweereal.com/http://youscan.ru/ (мониторинг соц. медиа)
  3. 3. “we believe that the essential material to beaddressed by a subject at this level is not thesyntax of particular programming-languageconstructs, nor clever algorithms forcomputing particular functions efficiently, noreven the mathematical analysis ofalgorithms and the foundations ofcomputing, but rather the techniques used tocontrol the intellectual complexity oflarge software systems.”Structure and Interpretation of Computer Programs
  4. 4. <button onclick=‘handler()’>$(‘.click-button’).click(handler);фреймворки, AMD и даже новые языкипрограммирования (Dart, ClojureScript,CoffeeScript, TypeScript и тд).
  5. 5. В чем сложность?
  6. 6. В событиях!
  7. 7. • Сложно компоновать несколько событий• Сложно соблюдать очередность• Одни события могут создавать другие иза этим всем сложно следить
  8. 8. Способы борьбы• Дисциплина• Control-flow библиотеки• Promises
  9. 9. Control-flowasync.parallel([function(callback){setTimeout(function(){callback(null, one);}, 200);},function(callback){setTimeout(function(){callback(null, two);}, 100);}],// optional callbackfunction(err, results){// the results array will equal [one,two] even though// the second function had a shorter timeout.});
  10. 10. PromisesQ.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();
  11. 11. Functional Reactive ProgrammingFRP
  12. 12. Обработка данныхкоторые меняются современем
  13. 13. События оборачиваются в потоки,которые возможно• Фильтровать• Объединять (merge)• Комбинировать (zip)• Тротлить (throttle)• Преобразовывать• Буферизировать• и так далее...
  14. 14. Сервис подсказок (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();
  15. 15. Сервис подсказок - 2 (RxJS)var suggestions = distinct.select(function (text) {return searchWikipedia(text);}).switchLatest().where(function (data) {return data.length == 2 && data[1].length > 0;});
  16. 16. Ещё проще!(уменьшаем наши требования)
  17. 17. Данные + событияДанные которые меняютсяДанные + событие
  18. 18. Observable
  19. 19. Observable на js-псевдокодеfunction Observable () {var value; // valuevar 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() {//..}}
  20. 20. Knockout style APIobservableExample = observable(); // create observableobservableExample(value); //set valueobservableExample(); //get valueobservableExample.subscribe(newValueHandler);
  21. 21. Подписчики илизависимые observables
  22. 22. Подписчик - тот же observable, укоторого значение всегдасоответствует значению заданнойфункции, аргументы которой другиеobservable.
  23. 23. Computedvar x = observable(0);var y = observable(0);var r = computed(function() {return Math.sqrt(x()*x() + y()*y());});
  24. 24. Computed. Обратная операцияvar r = computed({read: readHandler,// previouswrite: function(r) {if (r >= 0) {x(r*Math.cos(Math.PI/4));y(r*Math.sin(Math.PI/4));} else {throw new Error(‘Не может быть отрицательным’);}}});
  25. 25. Computed. Пример из жизниvar isFormValid = computed(function() {return (login().length > 2) && (password().length > 5);});var canSend = computed(function() {return !messageSent() && !loading() && isFormValid();});
  26. 26. Observable коллекции – скажутподписчикам, что изменилсянабор её элементов (а не самиэлементы)
  27. 27. id1 id2 id2user1 user2 user2fullProfile1 fullProfile2 fullProfile3
  28. 28. id1 id2user1 user2fullProfile1 fullProfile3
  29. 29. В масштабах приложенияWebSockets Repository WorkersObservablesUI (data binding)
  30. 30. Возможные проблемы• Иногда необходим computed.dispose()• Throttle• Производительность (много работы забортом)
  31. 31. Profit• Декларативность• Тестируемость• Круто работает в связке с data binding• Snapshots
  32. 32. Что посмотреть и почитать?RxJS, Bacon.js;Knockout (Knockup, Durandal);obs (https://github.com/pluma/obs) + Rivets;Прочитать SICPhttp://awelonblue.wordpress.com/2012/07/01/why-not-events/http://elm-lang.org/https://speakerdeck.com/search?q=frp

×