Михаил Давыдов "Масштабируемые JavaScript-приложения"

2,929 views
2,838 views

Published on

Михаил Давыдов "Масштабируемые JavaScript-приложения"
Я.Субботник в Челябинске в рамках конференции UWDC
О докладе:
О чем нужно подумать во время проектирования архитектуры. Какую архитектуру нужно заложить, чтобы приложение могло безболезненно развиваться.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,929
On SlideShare
0
From Embeds
0
Number of Embeds
2,533
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Михаил Давыдов "Масштабируемые JavaScript-приложения"

  1. 1. МасштабируемыеJavaScript-приложенияМихаил ДавыдовJavaScript разработчик группы разработки Веб-чатовЯ.Субботник, Челябинск, 25 февраля 2012 года
  2. 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. 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. Часто код сайта похож на маленький клубок4
  5. 5. Сильная связанность5
  6. 6. 1. Ядро и фреймворки 2. Модули 3. Коммуникация 4. Загрузка и инициализация6
  7. 7. Ядро и фреймворки7
  8. 8. Зависимость от библиотеки8
  9. 9. Нужна обертка — Ядро Ядро Библиотека9
  10. 10. Задачи Ядра1. Обертка библиотеки2. Управляет жизнью частей системы3. Коммуникационный интерфейс4. Контролирует ошибки5. Расширяется10
  11. 11. Модули11
  12. 12. Модули — обособлены12
  13. 13. Модуль состоит из JavaScript + HTML + CSS + ...13
  14. 14. Пример «Ростер» и «Диалог» Моя задача — отображать Моя задача — отображать список контактов и обновлять сообщения пользователей в статусы. чате.14
  15. 15. Модуль в песочнице15
  16. 16. Модуль ограничен 1. Может — вызывать свои методы и песочницы — использовать свой HTML элемент 2. Должен спрашивать разрешения 3. Запрещено — создавать глобалы — использовать нестандартные глобалы — общаться с модулями напрямую16
  17. 17. Жесткая архитектура Модули Песочница Ядро Библиотека17
  18. 18. Ни один из объектов не знает о всем приложении!18
  19. 19. Расширяемая архитектура Модули Песочница Ядро Расширения Библиотека Плагины19
  20. 20. Коммуникация20
  21. 21. var Module1 = { "someAction": function () { Module2.getSomeValue(); }};var Module2 = { "getSomeValue": function () { return data; }};21
  22. 22. var Module1 = { "someAction": function () { Module2.getSomeValue(); }};var Module2 = { "getSomeValue": function () { return data; }};22
  23. 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. 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
  25. 25. Загрузка и инициализация25
  26. 26. Схемы загрузки кода 1. Все сразу — Несколько тегов script — Не блокирующая загрузка скриптов — Сборка скриптов в один файл 2. По необходимости — AMD: Асинхронная декларация модулей 3. ???26
  27. 27. Сколько? 1 Мб JavaScript — 500..1500 мс jQuery.min (100 Кб) 150 мс Яндекс.Вебчат (160 Кб) 230 мс Твиттер (240 Кб) 350 мс Яндекс.Почта (500 Кб) 730 мс Ext.JS Full (1 Мб) 1200 мс27
  28. 28. LMD Ленивая декларация 1. Грузим все сразу — 1 запрос к серверу — модули загружаются синхронно 2. Инициализируем только нужное — время старта минимально — исключены сетевые лаги 3. Убраны лишние обертки AMD 4. Код модулей изолирован28
  29. 29. Соберем все вместе29
  30. 30. Жесткая и расширяемая архитектура Модули Песочница Ядро Расширения Библиотека Плагины30
  31. 31. Профит1. Повторное использование модулей2. Модульное тестирование3. Изменения модулей без опасений4. События минимизируют связанность31
  32. 32. http://clck.ru/08Hdn32
  33. 33. Михаил Давыдов JavaScript и Node.js разработчик azproduction@yandex-team.ru Twitter @azproduction Habr http://azproduction.habrahabr.ru Github https://github.com/azproduction33

×