Making Scalable JavaScript Application

Масштабируемые
JavaScript-приложения
Михаил Давыдов
JavaScript разработчик группы разработки Веб-чатов
Я.Субботник, Екатеринбург, 2 июля 2011 года

<a href="javascript:
external.AddFavorite
(location, 'Мой сайт!')
">
Добавить закладку
</a>
3
Байт 40 JavaScript

5
Код стал меняться
// Lamo code
<button
onclick="doStuff.call(this, event)"
/>
// Pro code
$('button').click(doStuff);

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));
});
/* Ещё десяток разных стилей
и плагинов */
});

$(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
Для сайта — это хорошо!

8
Часто код сайта похож на
маленький клубок

Сильная связанность
10

Зависимость от библиотеки
13

14
Ядро
Библиотека
Нужна обертка — Ядро

Задачи Ядра
15
1. Обертка библиотеки
2. Управляет жизнью частей системы
3. Коммуникационный интерфейс
4. Контролирует ошибки
5. Расширяется

Структура как на МКС
17

Модули — обособлены
18

19
JavaScript + HTML + CSS + ...
Модуль состоит из

20
Модуль «Ростер»
Моя задача —
отображать список
контактов и обновлять
статусы.

21
Модуль «Диалог»
Моя задача —
отображать сообщения
пользователей в чате.

Модуль в песочнице
22

Модуль ограничен
23
1. Может
— вызывать свои методы и песочницы
— использовать свой HTML элемент
2. Должен спрашивать разрешения
3. Запрещено
— создавать глобалы
— использовать нестандартные глобалы
— общаться с модулями напрямую

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))

25
Ядро
Песочница
Модули
Жесткая архитектура

Ни один из объектов не
знает о всем приложении!
26

27
Расширяемая архитектура
Расширения
Плагины
Ядро
Песочница
Модули

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

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

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

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

Асинхронные функции
33

Асинхронные функции
34

// Синхронный код
var Storage = {
"read": function (key) {
return localStorage[key];
}
};
var data = Storage.read('key'),
pData = process(data);
$.trigger('data', pData);
35

// Асинхронный код
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

Соберем все вместе
37

38
Жесткая и расширяемая
архитектура
Расширения
Плагины
Ядро
Песочница
Модули

Повторное использование
39

Модульное тестирование
40

Можем менять без опасения
41

События — это по течению
42

Асинхронность — решение
будущих проблем
43

Михаил Давыдов
JavaScript и Node.js разработчик
azproduction@yandex-team.ru
Twitter @azproduction
Habr http://azproduction.habrahabr.ru
45

Making Scalable JavaScript Application

Recommended

More Related Content

What's hot (20)

Similar to Making Scalable JavaScript Application (20)

More from Mikhail Davydov (16)

Making Scalable JavaScript Application