Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

627 views

Published on

  • Be the first to comment

  • Be the first to like this

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

  1. 1. Rich-client, или Как я пересталбояться и полюбил велосипедыВладимир Дупелев
  2. 2. Rich UI приложение•Функциональность без перезагрузки страницы•Большой объем данных•Разнообразные визуальные компоненты•Вложенные диалоги•Быстрый отклик•Стабильность
  3. 3. Где проблемы?•Архитектура•Отображение•Поддержка
  4. 4. Архитектура Rich UI приложения•Уровни абстракции, модули•Разрешение зависимостей•Асинхронная работа с сервером
  5. 5. Разрешение зависимостей•Поиск файлов•Объявления модулей•Кеширование модулей•Создание синглетонов•ПерезаписьСпецификация Модуля:- CommonJS / Modules- CommonJS / Packages- AMD
  6. 6. Быстрый загрузчикМодуль RequreJSИмя можно опуститьМагия поиска модуляЦиркулярные зависимостиВремя и памятьИзмененияИмя модуля = Путь в проектеПоиск только по имениДоверяйте программистамСоберите ядро в один файл
  7. 7. Определение модуляAMDdefine([a.js, b.js],function(A, B) {…})Не сопоставить пути и аргументыДобавить в середину невозможноКонфликты именИзмененияdefine({A:a.js, B:b.js},function($$) {…})Группировка путей и имен модулейЛегко изменять, удалять, добавлятьЕсть корневое пространство
  8. 8. Архитектура Rich UI приложения•Уровни абстракции, модули•Разрешение зависимостей. Inversion of control•Асинхронная работа с сервером
  9. 9. ОбещанияШаблон future, в библиотеке JQuery - Deferred•Откажитесь от цепочек .then•Динамический require ведет к deferred•Разрешите модули заранее, используйте их синхронно
  10. 10. Где проблемы?•Архитектура•Отображение•Поддержка
  11. 11. •Model — чистые данные•ModelView — активные данные + команды•Bindings — связь активных данных и компонентов•View — компоненты и DOMШаблон MVVM
  12. 12. •Различные источники и схемы данных•Несколько операций на чтение и запись•Каскады асинхронных команд•Прерывание и подключение•Агрегация в сервисном слоеModel — чистые данные
  13. 13. •Содержит свойства или набор сущностей•Дает их изменить•Бросает события•Не воздействует на вложенные активные данные•Содержит бизнес-логику•Аккуратно разрушаетсяModelView — активные данные
  14. 14. BackboneРазбор параметровОпции для событийСобытие «всё изменилось»Отслеживание цикловУстановка свойствИзмененияПара - имя, значениеОтдельный код для silentНикогда не используетсяТестирование
  15. 15. Backbone, AngularJSРазбор параметровНе различает цельВсегда отрабатываетСобытия измененияИзмененияОднозначные параметрыОтдельный код для self triggerПроверка на disposed
  16. 16. •Компонент — тоже активная модель•Отображается в DOM•Следит за свойствами, обновляет DOM•Следит за событиями DOM, обновляет свойства•Не содержит бизнес-логики•Аккуратно разрушаетсяView — компоненты и DOM
  17. 17. Представление DOMJQuery оберткаЧитает из html строкиСсылка на DOM ElementДобавление .append()Вставка в броузер .append()ИзмененияСвой dslОбъект в AST со свойством idКонкатинация строкВставка в броузер .innerHTML
  18. 18. Вставка 10 000 <div>.append()500-1000мсНе теряем DOM ElementУстановка событий когда угодноStrings + InnerHTML30-60мсЛенивый поиск по idУстановка событий после вставки
  19. 19. Где проблемы?•Архитектура•Отображение•Поддержка
  20. 20. Поддержка Rich UI приложения•Лог– Отдавайте на сервер– Покажите объекты в JSON•Дамп состояния– Данные — малый объем, быстро– Компонеты — большой объем, медленно•Консоль
  21. 21. Спасибо за внимание!

×