Михаил Давыдов "Масштабируемые JavaScript-приложения"
- 1. Масштабируемые JavaScript-приложения Михаил Давыдов JavaScript разработчик группы разработки Веб-чатов Я.Субботник, Челябинск, 25 февраля 2012 года
- 2. $(function () { // Типичный код для сайта $('#button').click(function (event) { alert(this.innerHTML); }); $('#list').uberScrollerPluginStart({ "theme": "red" }); $('#lazy_thing').click(function () { $.get('/lazy/thing/body.html', doLazyLoad.bind(this)); }); /* Ещё десяток разных стилей и плагинов */ }); 2
- 3. $(function () { // Типичный код для сайта $('#button').click(function (event) { alert(this.innerHTML); }); $('#list').uberScrollerPluginStart({ "theme": "red" }); Для$.get('/lazy/thing/body.html', { сайта — это хорошо! $('#lazy_thing').click(function () doLazyLoad.bind(this)); }); /* Ещё десяток разных стилей и плагинов */ }); 3
- 4. Часто код сайта похож на маленький клубок 4
- 6. 1. Ядро и фреймворки 2. Модули 3. Коммуникация 4. Загрузка и инициализация 6
- 9. Нужна обертка — Ядро Ядро Библиотека 9
- 10. Задачи Ядра 1. Обертка библиотеки 2. Управляет жизнью частей системы 3. Коммуникационный интерфейс 4. Контролирует ошибки 5. Расширяется 10
- 11. Модули 11
- 13. Модуль состоит из JavaScript + HTML + CSS + ... 13
- 14. Пример «Ростер» и «Диалог» Моя задача — отображать Моя задача — отображать список контактов и обновлять сообщения пользователей в статусы. чате. 14
- 16. Модуль ограничен 1. Может — вызывать свои методы и песочницы — использовать свой HTML элемент 2. Должен спрашивать разрешения 3. Запрещено — создавать глобалы — использовать нестандартные глобалы — общаться с модулями напрямую 16
- 17. Жесткая архитектура Модули Песочница Ядро Библиотека 17
- 18. Ни один из объектов не знает о всем приложении! 18
- 19. Расширяемая архитектура Модули Песочница Ядро Расширения Библиотека Плагины 19
- 20. Коммуникация 20
- 21. var Module1 = { "someAction": function () { Module2.getSomeValue(); } }; var Module2 = { "getSomeValue": function () { return 'data'; } }; 21
- 22. var Module1 = { "someAction": function () { Module2.getSomeValue(); } }; var Module2 = { "getSomeValue": function () { return 'data'; } }; 22
- 23. // Слабая связанность var Module1 = { "init": function (sb) { sb.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function (sb) { sb.trigger('event', 'data'); } }; 23
- 24. // Слабая связанность var Module1 = { "init": function (sb) { sb.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function (sb) { sb.trigger('event', 'data'); } }; 24
- 26. Схемы загрузки кода 1. Все сразу — Несколько тегов script — Не блокирующая загрузка скриптов — Сборка скриптов в один файл 2. По необходимости — AMD: Асинхронная декларация модулей 3. ??? 26
- 27. Сколько? 1 Мб JavaScript — 500..1500 мс jQuery.min (100 Кб) 150 мс Яндекс.Вебчат (160 Кб) 230 мс Твиттер (240 Кб) 350 мс Яндекс.Почта (500 Кб) 730 мс Ext.JS Full (1 Мб) 1200 мс 27
- 28. LMD Ленивая декларация 1. Грузим все сразу — 1 запрос к серверу — модули загружаются синхронно 2. Инициализируем только нужное — время старта минимально — исключены сетевые лаги 3. Убраны лишние обертки AMD 4. Код модулей изолирован 28
- 30. Жесткая и расширяемая архитектура Модули Песочница Ядро Расширения Библиотека Плагины 30
- 31. Профит 1. Повторное использование модулей 2. Модульное тестирование 3. Изменения модулей без опасений 4. События минимизируют связанность 31
- 33. Михаил Давыдов JavaScript и Node.js разработчик azproduction@yandex-team.ru Twitter @azproduction Habr http://azproduction.habrahabr.ru Github https://github.com/azproduction 33