making scalable javascript application
DESCRIPTION
TRANSCRIPT
![Page 1: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/1.jpg)
Масштабируемые JavaScript-приложенияМихаил ДавыдовJavaScript разработчик группы разработки Веб-чатов
Я.Субботник, Екатеринбург, 2 июля 2011 года
![Page 2: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/2.jpg)
2
![Page 3: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/3.jpg)
<a href="javascript:
external.AddFavorite (location, 'Мой сайт!')
"> Добавить закладку</a>
3
Байт 40 JavaScript
![Page 4: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/4.jpg)
4
![Page 5: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/5.jpg)
5
Код стал меняться
// Lamo code<buttononclick="doStuff.call(this, event)"/> // Pro code$('button').click(doStuff);
![Page 6: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/6.jpg)
6
$(function () { // Типичный код для сайта $('#button').click(function (event) { alert(this.innerHTML); });
$('#list').uberScrollerPluginStart({ "theme": "red" });
$('#lazy_thing').click(function () { $.get('/lazy/thing/body.html', doLazyLoad.bind(this)); });
/* Ещё десяток разных стилей и плагинов */});
![Page 7: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/7.jpg)
$(function () { // Типичный код для сайта $('#button').click(function (event) { alert(this.innerHTML); });
$('#list').uberScrollerPluginStart({ "theme": "red" });
$('#lazy_thing').click(function () { $.get('/lazy/thing/body.html', doLazyLoad.bind(this)); });
/* Ещё десяток разных стилей и плагинов */});
7
Для сайта — это хорошо!
![Page 8: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/8.jpg)
8
Часто код сайта похож на маленький клубок
![Page 9: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/9.jpg)
9
![Page 10: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/10.jpg)
Сильная связанность
10
![Page 11: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/11.jpg)
Структура
11
![Page 12: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/12.jpg)
12
![Page 13: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/13.jpg)
Зависимость от библиотеки
13
![Page 14: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/14.jpg)
14
Ядро
Библиотека
Нужна обертка — Ядро
![Page 15: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/15.jpg)
Задачи Ядра
15
1. Обертка библиотеки
2. Управляет жизнью частей системы
3. Коммуникационный интерфейс
4. Контролирует ошибки
5. Расширяется
![Page 16: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/16.jpg)
Модули
16
![Page 17: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/17.jpg)
Структура как на МКС
17
![Page 18: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/18.jpg)
Модули — обособлены
18
![Page 19: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/19.jpg)
19
JavaScript + HTML + CSS + ...Модуль состоит из
![Page 20: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/20.jpg)
20
Модуль «Ростер»
Моя задача — отображать список контактов и обновлять статусы.
![Page 21: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/21.jpg)
21
Модуль «Диалог»
Моя задача — отображать сообщения пользователей в чате.
![Page 22: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/22.jpg)
Модуль в песочнице
22
![Page 23: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/23.jpg)
Модуль ограничен
23
1. Может — вызывать свои методы и песочницы — использовать свой HTML элемент2. Должен спрашивать разрешения3. Запрещено — создавать глобалы — использовать нестандартные глобалы — общаться с модулями напрямую
![Page 24: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/24.jpg)
24
var Module = (function (global) { "use strict"; var $content; return { "init": function ($) { // $=sandbox $content = $.$('<div/>') .appendTo($.box());
$.on("message", function (e) { $content.text(e.data); }); }, "destroy": function () { /*,..,*/ } }; // Тут может быть ещё какой-то код}(this))
![Page 25: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/25.jpg)
25
Ядро
Библиотека
Песочница
Модули
Жесткая архитектура
![Page 26: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/26.jpg)
Ни один из объектов не знает о всем приложении!
26
![Page 27: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/27.jpg)
27
Расширяемая архитектура
Расширения
Плагины
Ядро
Библиотека
Песочница
Модули
![Page 28: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/28.jpg)
Коммуникация
28
![Page 29: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/29.jpg)
29
var Module1 = { "someAction": function () { Module2.getSomeValue(); }}; var Module2 = { "getSomeValue": function () { return 'data'; }};
![Page 30: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/30.jpg)
30
var Module1 = { "someAction": function () { Module2.getSomeValue(); }}; var Module2 = { "getSomeValue": function () { return 'data'; }};
![Page 31: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/31.jpg)
// Слабая связанностьvar Module1 = { "init": function ($) { $.on('event', function (e) { console.log(e.data); }); }}; var Module2 = { "someAction": function ($) { $.trigger('event', 'data'); }};
31
![Page 32: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/32.jpg)
32
// Слабая связанностьvar Module1 = { "init": function ($) { $.on('event', function (e) { console.log(e.data); }); }}; var Module2 = { "someAction": function ($) { $.trigger('event', 'data'); }};
![Page 33: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/33.jpg)
Асинхронные функции
33
![Page 34: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/34.jpg)
Асинхронные функции
34
![Page 35: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/35.jpg)
// Синхронный кодvar Storage = { "read": function (key) { return localStorage[key]; }};
var data = Storage.read('key'), pData = process(data);$.trigger('data', pData);
35
![Page 36: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/36.jpg)
// Асинхронный кодvar Storage = { "read": function (key, cb) { $.get('/read/' + key, cb); }};
Storage.read('key',function(data) { var pData = processData(data); $.trigger('data', pData);}.bind(this));
36
![Page 37: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/37.jpg)
Соберем все вместе
37
![Page 38: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/38.jpg)
38
Жесткая и расширяемая архитектура
Расширения
Плагины
Ядро
Библиотека
Песочница
Модули
![Page 39: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/39.jpg)
Повторное использование
39
![Page 40: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/40.jpg)
Модульное тестирование
40
![Page 41: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/41.jpg)
Можем менять без опасения
41
![Page 42: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/42.jpg)
События — это по течению
42
![Page 43: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/43.jpg)
Асинхронность — решение будущих проблем
43
![Page 44: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/44.jpg)
Вопросы?
44
![Page 45: Making Scalable JavaScript Application](https://reader034.vdocument.in/reader034/viewer/2022042521/548f715bb4795969178b4bdf/html5/thumbnails/45.jpg)
Михаил ДавыдовJavaScript и Node.js разработчик
Twitter @azproduction
Habr http://azproduction.habrahabr.ru
45