2. Про меня
• CTO Noda (Naumen subsidiary)
• Разработчик с XX-летним стажем
• Сервер-сайд
• С++ и Python
• Python-активист, программный директор PyCon.RU
3. Про доклад
• Немного истории (как начиналось)
• Много боли (во что превратилось)
• Немного теории
• Reactive programming
• knockout.js (внезапно)
4. Про то, чего НЕ будет
• Глубоких сравнений с аналогами и альтернативами
• Религиозных войн (ну разве совсем чуток)
• Чудес и откровений (всё давно известно)
• Золотых молотков
6. Про «приложение на странице»
• Одна страница
• Много JavaScript
• Много AJAX
• Динамическое обновление контента
• Интерактивные элементы
• Tooltip/Completion/Validation
• Throttling/Debouncing
8. Про коллбэки
• Отображение координат мыши при движении
• Добавляем галочку – обновлять/не обновлять
• Правим обработчик мыши
9. Про коллбэки
• Отображение координат мыши при движении
• Добавляем галочку – обновлять/не обновлять
• (Oops!) Вспоминаем, что надо обновить при смене
галочки в позицию обновлять
12. Про проблемы событий
• Событие это действие, а не результат
• Нас не волнует само событие
• Нас волнует результат его обработки
• То есть состояние системы
• Состояние системы очень хрупкое
• Много неявного состояния везде
• Тяжело противостоять ошибкам
• Ошибки надо тащить «из глубины» наверх
13. Про «смерть от внезапной сложности»
• 1000 строк кода на JS/JQuery
• Состояние «во View» и в переменных
• Изменения вносить УЖЕ практически невозможно
14. Про «смерть от внезапной сложности»
• 1000 строк кода на JS/JQuery
• Состояние «во View» и в переменных
• Изменения вносить практически невозможно
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
• Обновление данных при смене фильтра
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