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» и в переменных • Изменения вносить практически невозможно
- 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
- 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 объекты • Простые/массивы/вычисляемые • Уведомление при изменении значения • Трассировка зависимостей • Автоматическая • Динамическая
- 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