1. Rich-client, или Как я перестал
бояться и полюбил велосипеды
Владимир Дупелев

2. Rich UI приложение
• Функциональность без перезагрузки страницы
• Большой объем данных
• Разнообразные визуальные компоненты
• Вложенные диалоги
• Быстрый отклик
• Стабильность

4. Где проблемы?
• Архитектура
• Отображение
• Поддержка

5. Архитектура Rich UI приложения
• Уровни абстракции, модули
• Разрешение зависимостей
• Асинхронная работа с сервером

6. Разрешение зависимостей
• Поиск файлов
• Объявления модулей
• Кеширование модулей
• Создание синглетонов
• Перезапись
Спецификация Модуля:
- CommonJS / Modules
- CommonJS / Packages
- AMD

7. Быстрый загрузчик
Модуль RequreJS
Имя можно опустить
Магия поиска модуля
Циркулярные зависимости
Время и память
Изменения
Имя модуля = Путь в проекте
Поиск только по имени
Доверяйте программистам
Соберите ядро в один файл

8. Определение модуля
AMD
define(['a.js', 'b.js'],
function(A, B) {…})
Не сопоставить пути и аргументы
Добавить в середину невозможно
Конфликты имен
Изменения
define({A:'a.js', B:'b.js'},
function($$) {…})
Группировка путей и имен модулей
Легко изменять, удалять, добавлять
Есть корневое пространство

9. Архитектура Rich UI приложения
• Уровни абстракции, модули
• Разрешение зависимостей. Inversion of control
• Асинхронная работа с сервером

10. Обещания
Шаблон future, в библиотеке JQuery - Deferred
• Откажитесь от цепочек .then
• Динамический require ведет к deferred
• Разрешите модули заранее, используйте их синхронно

11. Где проблемы?
• Архитектура
• Отображение
• Поддержка

12. • Model — чистые данные
• ModelView — активные данные + команды
• Bindings — связь активных данных и компонентов
• View — компоненты и DOM
Шаблон MVVM

13. • Различные источники и схемы данных
• Несколько операций на чтение и запись
• Каскады асинхронных команд
• Прерывание и подключение
• Агрегация в сервисном слое
Model — чистые данные

14. • Содержит свойства или набор сущностей
• Дает их изменить
• Бросает события
• Не воздействует на вложенные активные данные
• Содержит бизнес-логику
• Аккуратно разрушается
ModelView — активные данные

15. Backbone
Разбор параметров
Опции для событий
Событие «всё изменилось»
Отслеживание циклов
Установка свойств
Изменения
Пара - имя, значение
Отдельный код для silent
Никогда не используется
Тестирование

16. Backbone, AngularJS
Разбор параметров
Не различает цель
Всегда отрабатывает
События изменения
Изменения
Однозначные параметры
Отдельный код для self trigger
Проверка на disposed

17. • Компонент — тоже активная модель
• Отображается в DOM
• Следит за свойствами, обновляет DOM
• Следит за событиями DOM, обновляет свойства
• Не содержит бизнес-логики
• Аккуратно разрушается
View — компоненты и DOM

18. Представление DOM
JQuery обертка
Читает из html строки
Ссылка на DOM Element
Добавление .append()
Вставка в броузер .append()
Изменения
Свой dsl
Объект в AST со свойством id
Конкатинация строк
Вставка в броузер .innerHTML

19. Вставка 10 000 <div>
.append()
500-1000мс
Не теряем DOM Element
Установка событий когда угодно
Strings + InnerHTML
30-60мс
Ленивый поиск по id
Установка событий после вставки

20. Где проблемы?
• Архитектура
• Отображение
• Поддержка

21. Поддержка Rich UI приложения
• Лог
– Отдавайте на сервер
– Покажите объекты в JSON
• Дамп состояния
– Данные — малый объем, быстро
– Компонеты — большой объем, медленно
• Консоль

22. Спасибо за внимание!