Download to read offline
knockout.js
- 1.
- 2. Про меня • CTONoda (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 • PresentationModel 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.
- 23. Про knockout.js: DeclarativeBindings • <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.
- 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.