Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A.pleshkov

480 views

Published on

  • Be the first to comment

  • Be the first to like this

A.pleshkov

  1. 1. Особенности проекта• Миллионы юзеров ежедневно• Огромная кодовая база• Много legacy• Постоянное добавление новых фич и доработка старых• Интеграция с другими проектами
  2. 2. Как это было (2007 г.)• Полная загрузка страницы при переходе• Скрипты либо inline, либо общие в отдельных файлах• Местами AJAX• PrototypeJS 1.6.0.3
  3. 3. THE SPICE MUST FLOW
  4. 4. Задача (2009 г.):Ускорить загрузку страниц минимальнымиманипуляциями.Никаких глобальных переработок сервера иклиента.
  5. 5. Как решаем:Будем загружать только «тело» страницы иперерисовывать его.Отдача «тела» решается шаблонизатором.
  6. 6. Что на клиенте? Booster!1. Нажали ссылку2. http://my.mail.ru/...#page=<path>3. Отследили изменение4. Загружаем5. Вставляем в DOM и обрабатываем
  7. 7. Автоматически скрипты не отрабатывают, так что:• Inline-скрипт вставляется в DOM через новый элемент script• Если внешний, то проверяем не добавляли ли до этого• Нет? Тогда по аналогии с inline
  8. 8. Ещё печали:• setTimeout() / setInterval()• window.onload / DOMReady / ...• Проблемы с глобальным scope• Race Conditions
  9. 9. // bar.jsvar myMessage = "...";var Bar = { showMessageIn: function (el) { el.innerHTML = myMessage; }};
  10. 10. <script type="text/javascript" src="bar.js"></script><script type="text/javascript">Bar.showMessageIn(...);</script>
  11. 11. // quux.jsfunction myMessage() { return "quux";}...
  12. 12. Ускорение на 40% минимум.Лучше было, конечно, провести рядподготовительных мер и внедрять постепенно.
  13. 13. Задача (2011 г.):Попробовать избавиться от PrototypeJS, потомучто…
  14. 14. Так почему же?• Есть баги• Избыточен• Неудобный API• Мало стороннего
  15. 15. var els = $$(div[class!=""]);
  16. 16. Попытка обновления до 1.7Большая часть багов решена, но...Начались проблемы с JSON в ответах сервера.jQuery?
  17. 17. Хитрый план: обёртка над PrototypeJS• Делаем API более удобным• Фиксим баги в рамках обёртки• Потом сможем смигрировать на jQuery• Пишем сотни тестов (jsTestDriver)
  18. 18. Стало сильно лучше, но:• Недостаток документации• «А вот как тут? Это на jQuery? Долго? С нуля?!»
  19. 19. Может хотя бы попробуем?..
  20. 20. Задача (начало 2012 г.):Внедрить jQuery ;)
  21. 21. Готовимся:• PrototypeJS пока оставляем• Переносим на jQuery работу с AJAX• Убираем потенциально опасное из PrototypeJS
  22. 22. • Подменяем функции PrototypeJS для работы с JSON• Заменяем Ajax из PrototypeJS на свой • При разборе JSON из ответа используем JSON.parse() (для старья - JSON3) • При ошибке используем парсер из PrototypeJS 1.6 • Собираем статистику по кривым JSON-ответам
  23. 23. ECMAScript 5• Все пересечения PrototypeJS с ES5 для нас потенциально опасны• Есть полезные функции• Для старых браузеров добавляем polyfill
  24. 24. Ничего пока с ним не делаем - смотрим как приживается.
  25. 25. Задача (тот же период):Внедрить модульность.Нужно понять, что является для нас модулем и какбудем внедрять.
  26. 26. Модули• Каждый сервис - модуль• Общая функциональность - модуль• Нужна поддержка зависимостей
  27. 27. AMD (RequireJS Optimizer + almond)• Стал стандартом де-факто• Легко интегрировать сторонние модули• PrototypeJS застолбил за собой $• Не нужно следить за порядком файлов
  28. 28. jQuery прижился!• Выставляем его через AMD• Переносим модули первой необходимости на AMD• Итеративно переносим сервисы на AMD• Визуальные модули мигрируют на jQuery
  29. 29. Сборщик• Проверяем наличие требуемых программ• Ставим необходимые сторонние утилиты• Собираем модули• JSLint, минификация, запуск тестов, …
  30. 30. В результате• Остался legacy, использующий PrototypeJS• Остались маленькие кусочки, использующие обёртку• Концепция jQuery + AMD работает и вполне устраивает
  31. 31. Андрей Плешковп р о г р а м м и с т, « М о й М и р »a.pleshkov@corp.mail.ru

×