Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Масштабируемые JavaScript приложения

Масштабируемые JavaScript приложения

О чем нужно подумать во время проектирования архитектуры. Какую архитектуру нужно заложить, чтобы приложение могло безболезненно развиваться.

Video https://events.yandex.ru/lib/talks/154/

Mikhail Davydov

October 11, 2012
Tweet

More Decks by Mikhail Davydov

Other Decks in Programming

Transcript

  1. 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. $(function () { // Типичный код для сайта $('#button').click(function (event)

    { alert(this.innerHTML); }); $('#list').uberScrollerPluginStart({ "theme": "red" }); $('#lazy_thing').click(function () { $.get('/lazy/thing/body.html', doLazyLoad.bind(this)); }); /* Ещё десяток разных стилей и плагинов */ }); 3 Для сайта — это хорошо!
  3. Задачи Ядра 10 1. Обертка библиотеки 2. Управляет жизнью частей

    системы 3. Коммуникационный интерфейс 4. Контролирует ошибки 5. Расширяется
  4. 14 Пример «Ростер» и «Диалог» Моя задача — отображать список

    контактов и обновлять статусы. Моя задача — отображать сообщения пользователей в чате.
  5. Модуль ограничен 16 1. Может — вызывать свои методы и

    песочницы — использовать свой HTML элемент 2. Должен спрашивать разрешения 3. Запрещено — создавать глобалы — использовать нестандартные глобалы — общаться с модулями напрямую
  6. 21 var Module1 = { "someAction": function () { Module2.getSomeValue();

    } }; var Module2 = { "getSomeValue": function () { return 'data'; } };
  7. 22 var Module1 = { "someAction": function () { Module2.getSomeValue();

    } }; var Module2 = { "getSomeValue": function () { return 'data'; } };
  8. // Слабая связанность var Module1 = { "init": function (sb)

    { sb.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function (sb) { sb.trigger('event', 'data'); } }; 23
  9. 24 // Слабая связанность var Module1 = { "init": function

    (sb) { sb.on('event', function (e) { console.log(e.data); }); } }; var Module2 = { "someAction": function (sb) { sb.trigger('event', 'data'); } };
  10. Схемы загрузки кода 26 1. Все сразу — Несколько тегов

    script — Не блокирующая загрузка скриптов — Сборка скриптов в один файл 2. По необходимости — AMD: Асинхронная декларация модулей 3. ???
  11. Сколько? 27 1 Мб JavaScript — 500..1500 мс jQuery.min (100

    Кб) 150 мс Яндекс.Вебчат (160 Кб) 230 мс Твиттер (240 Кб) 350 мс Яндекс.Почта (500 Кб) 730 мс Ext.JS Full (1 Мб) 1200 мс
  12. LMD Ленивая декларация 28 1. Грузим все сразу — 1

    запрос к серверу — модули загружаются синхронно 2. Инициализируем только нужное — время старта минимально — исключены сетевые лаги 3. Убраны лишние обертки AMD 4. Код модулей изолирован
  13. Профит 31 1. Повторное использование модулей 2. Модульное тестирование 3.

    Изменения модулей без опасений 4. События минимизируют связанность