Особенности проекта • Миллионы юзеров ежедневно • Огромная кодовая база • Много legacy • Постоянное добавление новых фич и

доработка старых • Интеграция с другими проектами

Как это было (2007 г.) • Полная загрузка страницы при переходе • Скрипты либо inline, либо общие в отдельных

файлах • Местами AJAX • PrototypeJS 1.6.0.3

THE SPICE MUST FLOW

Задача (2009 г.): Ускорить загрузку страниц минимальными манипуляциями. Никаких глобальных переработок сервера и клиента.

Как решаем: Будем загружать только «тело» страницы и перерисовывать его. Отдача «тела» решается шаблонизатором.

Что на клиенте? Booster! 1. Нажали ссылку 2. http://my.mail.ru/...#page=<path> 3. Отследили изменение 4. Загружаем 5. Вставляем в DOM и обрабатываем

Автоматически скрипты не отрабатывают, так что: • Inline-скрипт вставляется в DOM через новый

элемент script • Если внешний, то проверяем не добавляли ли

до этого • Нет? Тогда по аналогии с inline

Ещё печали: • setTimeout() / setInterval() • window.onload / DOMReady / ... • Проблемы с глобальным scope • Race Conditions

// bar.js

var myMessage = "...";

var Bar = {

showMessageIn: function (el) {

el.innerHTML = myMessage;

}

};

<script type="text/javascript" src="bar.js"></script>

<script type="text/javascript">

Bar.showMessageIn(...);

</script>

// quux.js

function myMessage() {

return "quux";

}

...

Ускорение на 40% минимум. Лучше было, конечно, провести ряд подготовительных мер и внедрять постепенно.

Задача (2011 г.): Попробовать избавиться от PrototypeJS, потому что…

Так почему же? • Есть баги • Избыточен • Неудобный API • Мало стороннего

var els = $$('div[class!=""]');

Попытка обновления до 1.7 Большая часть багов решена, но... Начались проблемы с JSON в ответах сервера. jQuery?

Хитрый план: обёртка над PrototypeJS • Делаем API более удобным • Фиксим баги в рамках обёртки • Потом сможем смигрировать на jQuery • Пишем сотни тестов (jsTestDriver)

Стало сильно лучше, но: • Недостаток документации • «А вот как тут? Это на jQuery? Долго? С нуля?!»

Может хотя бы попробуем?..

Задача (начало 2012 г.): Внедрить jQuery ;)

Готовимся: • PrototypeJS пока оставляем • Переносим на jQuery работу с AJAX • Убираем потенциально опасное из PrototypeJS

• Подменяем функции PrototypeJS для работы с JSON • Заменяем Ajax из PrototypeJS на свой

• При разборе JSON из ответа используем JSON.parse() (для старья - JSON3)

• При ошибке используем парсер из PrototypeJS 1.6

• Собираем статистику по кривым JSON-ответам

ECMAScript 5 • Все пересечения PrototypeJS с ES5 для нас

потенциально опасны • Есть полезные функции • Для старых браузеров добавляем polyfill

Ничего пока с ним не делаем - смотрим как приживается.

Задача (тот же период): Внедрить модульность. Нужно понять, что является для нас модулем и как будем внедрять.

Модули • Каждый сервис - модуль • Общая функциональность - модуль • Нужна поддержка зависимостей

AMD (RequireJS Optimizer + almond) • Стал стандартом де-факто • Легко интегрировать сторонние модули • PrototypeJS застолбил за собой $ • Не нужно следить за порядком файлов

jQuery прижился! • Выставляем его через AMD • Переносим модули первой необходимости на

AMD • Итеративно переносим сервисы на AMD • Визуальные модули мигрируют на jQuery

Сборщик • Проверяем наличие требуемых программ • Ставим необходимые сторонние утилиты • Собираем модули • JSLint, минификация, запуск тестов, …

В результате • Остался legacy, использующий PrototypeJS • Остались маленькие кусочки, использующие

обёртку • Концепция jQuery + AMD работает и вполне

устраивает

Андрей Плешков

п р о г р а м м и с т, « М о й М и р »

a . p l e s h k o v @ c o r p . m a i l . r u