1.
KNOCKOUT.JS
Патрушев Антон

2.
Про меня
• CTO Noda (Naumen subsidiary)
• Разработчик с XX-летним стажем
• Сервер-сайд
• С++ и Python
• Python-активист, программный директор PyCon.RU

3.
Про доклад
• Немного истории (как начиналось)
• Много боли (во что превратилось)
• Немного теории
• Reactive programming
• knockout.js (внезапно)

4.
Про то, чего НЕ будет
• Глубоких сравнений с аналогами и альтернативами
• Религиозных войн (ну разве совсем чуток)
• Чудес и откровений (всё давно известно)
• Золотых молотков

5.
Про проект

6.
Про «приложение на странице»
• Одна страница
• Много JavaScript
• Много AJAX
• Динамическое обновление контента
• Интерактивные элементы
• Tooltip/Completion/Validation
• Throttling/Debouncing

7.
Про коллбэки
• Отображение координат мыши при движении

8.
Про коллбэки
• Отображение координат мыши при движении
• Добавляем галочку – обновлять/не обновлять
• Правим обработчик мыши

9.
Про коллбэки
• Отображение координат мыши при движении
• Добавляем галочку – обновлять/не обновлять
• (Oops!) Вспоминаем, что надо обновить при смене
галочки в позицию обновлять

10.
Про коллбэки

11.
Про коллбэки

12.
Про проблемы событий
• Событие это действие, а не результат
• Нас не волнует само событие
• Нас волнует результат его обработки
• То есть состояние системы
• Состояние системы очень хрупкое
• Много неявного состояния везде
• Тяжело противостоять ошибкам
• Ошибки надо тащить «из глубины» наверх

13.
Про «смерть от внезапной сложности»
• 1000 строк кода на JS/JQuery
• Состояние «во View» и в переменных
• Изменения вносить УЖЕ практически невозможно

14.
Про «смерть от внезапной сложности»
• 1000 строк кода на JS/JQuery
• Состояние «во View» и в переменных
• Изменения вносить практически невозможно

15.
Про «реактивное программирование»

16.
Про «реактивное программирование»

17.
Про «реактивное программирование»

18.
Про «реактивное программирование»
• Переменные - как ячейки в excel
• Модель - формулы и зависимости
• Граф зависимостей
• Явное состояние
• Можно отобразить/залогать
• Все преобразования прозрачны
• Просто тестируется

19.
Про MVVM
• Presentation Model by Martin Fowler (2004)
• Microsoft (WPF/Silverlight) by John Gossman (2005)
• Компоненты
• Model
• View
• ViewModel

20.
Про ViewModel
• Составная часть Presentation
• Отделяет логику View от View
• Предоставляет API для доступа к модели
• Примеры
• Показ/скрытие элементов интерфейса по условию
• Показ/скрытие Popup/Tooltip
• Client-side validation
• Обновление данных при смене фильтра

21.
Про knockout.js
• Реактивный ViewModel
• Observables
• Dependency tracking
• Declarative bindings
• Templating

22.
Про knockout.js: ViewModel

23.
Про knockout.js: Declarative Bindings
• <span data-bind="text: mouseX"></span>
• Контроль отображения
• visible
• text/html, value/checked, options/selectedOptions
• css/style
• attr
• enable/disable, hasFocus
• Control flow
• foreach, if/ifnot, with
• Подписка на события
• click/submit/event
• Возможность использовать выражений (спорная)

24.
Про «ячейки»: Observables
• JS объекты
• Простые/массивы/вычисляемые
• Уведомление при изменении значения
• Трассировка зависимостей
• Автоматическая
• Динамическая

25.
Про «реактивный ViewModel»

26.
Про переезд
• 2000 строк на JS/Jquery
• Долгое раскуривание реактивности
• Выбор библиотеки
• Bacon.js
• RxJS
• Knockout
• 1 неделя на переезд

27.
Про knockout.js
• Free (MIT)
• Чистый JS
• 46kb minified, 16kb compressed (on wire)
• Хорошая поддержка браузеров
• Отличная документация
• Interactive tutorial
• Live examples

28.
Про то, о чём не сказано
• Writable computed observables
• Например, для обработки/валидации входных данных
• Тонкости observable
• Observable.peek()
• rateLimiting (throttle)
• Templating
• Component bindings
• AJAX

29.
Про ссылки
• knockoutjs.com
• wikipedia.org
• Reactive programming
• Model-View-ViewModel
• Мартин Фаулер
• http://martinfowler.com/eaaDev/PresentationModel.html

30.
Про Соловьёва
• http://www.youtube.com/watch?v=R4sTvHXkToQ
• В нём не упоминается knockout.js (где-то в вопросах
только вскользь)
• Подтолкнул к размышлениям "на тему" и направил к
решениям

31.
THE END