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

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

4. THE SPICE MUST FLOW

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

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

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

8. Автоматически скрипты не отрабатывают, так что:
• Inline-скрипт вставляется в DOM через новый
элемент script
• Если внешний, то проверяем не добавляли ли
до этого
• Нет? Тогда по аналогии с inline

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

10. // bar.js
var myMessage = "...";
var Bar = {
showMessageIn: function (el) {
el.innerHTML = myMessage;
}
};

11. <script type="text/javascript" src="bar.js"></script>
<script type="text/javascript">
Bar.showMessageIn(...);
</script>

12. // quux.js
function myMessage() {
return "quux";
}
...

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

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

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

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

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

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

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

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

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

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

24. • Подменяем функции PrototypeJS для работы с JSON
• Заменяем Ajax из PrototypeJS на свой
• При разборе JSON из ответа используем
JSON.parse() (для старья - JSON3)
• При ошибке используем парсер из PrototypeJS
1.6
• Собираем статистику по кривым JSON-ответам

25. ECMAScript 5
• Все пересечения PrototypeJS с ES5 для нас
потенциально опасны
• Есть полезные функции
• Для старых браузеров добавляем polyfill

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

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

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

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

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

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

32. В результате
• Остался legacy, использующий PrototypeJS
• Остались маленькие кусочки, использующие
обёртку
• Концепция jQuery + AMD работает и вполне
устраивает

33. Андрей Плешков
п р о г р а м м и с т, « М о й М и р »
a.pleshkov@corp.mail.ru