Редизайн Twitter.com, по мнению разработчиков, позволил внести самые смелые изменения в технологии, используемые на сайте. С учетом этого они приступили к реализации новой архитектуры почти полностью на JavaScript. Особое внимание уделили простоте разработки, расширяемости и производительности. В этом обзоре описаны некоторые уникальные решения, разработанные инженерами Twitter.
Клиентское API
Одним из самых важных архитектурных изменений стало то, что twitter.com стал клиентом собственного API. Он извлекает данные таким же образом, что и мобильный сайт, приложения для iPhone, iPad, Android, и другие приложения сторонних разработчиков. Это изменение позволило выделить больше ресурсов команде API, которая внесла более 40 исправлений. При начальной загрузке страницы и при каждом обращении клиентов, все данные извлекаются из высокооптимизированного JSON кэша.
Javascript API
Была разработана библиотека Javascript для доступа REST API @anywhere Твиттера, которая стала хорошей отправной точкой для развития всего проекта. Javascript API предоставляет функции для извлечения и умного кэширования данных на стороне клиента, одновременно в памяти и localStorage, что позволяет свести к минимуму количество сетевых запросов, которые делаются при использовании Twitter.com. Например, каждый запрос твитов за какой-нибудь срок содержит связанные пользовательские данные. В результате чего пользовательские объекты активно кэшируются, и при просмотре профиля не требуется дополнительно запрашивать данные пользователя.
Еще одной особенностью Javascript API, является то, что он предоставляет уведомления о событиях до и после каждого вызова API. Это позволяет регистрировать меняющиеся компоненты, моментально реагировать и вносить соответствующие изменения в пользовательский интерфейс, в то же время не затрагивать неизменные компоненты, основываясь на тех же данных.
Управление страницами
Одной из целей проекта было сделать навигацию по страницам проще и быстрее. Основываясь на традиционной для веба аналогии связанных документов, приложение использует систему маршрутизации страниц, которая обеспечивает тесную связь между URL’ами и их содержимым. Это позволяет обеспечить возможность «богатым» веб-приложениям (RIA) вести себя как обычные веб-сайты. В связи с чем потребовалось разработать «богатую» модель маршрутизации на клиенте. Для этого была спроектирована система маршрутизации для переключения между меняющимися страницами, управляемая URL-хэшем. Когда пользователь перемещается по страницам, приложение кэширует посещенные страницы в памяти. Проблема с быстрым устареванием информации на этих страницах была решена с помощью механизма, который позволяет страницам получать актуальную информацию о событиях через JavaScript API, тем самым синхронизировать их с общим состоянием приложения.
Стек рендеринга
В целях поддержки поисковых роботов и пользователей без JavaScript, потребовалось чтобы система рендеринга работала как на стороне клиента, так и сервера. Для этого был создан стек рендеринга и разработана система просмотра объектов, которая генерирует HTML-фрагменты из объектов API. Также возможности движка были расширены для поддержки подстановки строк на разных языках.
Большое внимание было уделено оптимизации работы в DOM. Например, было внедрено делегирование событий по всем направлениям, что позволило использовать меньше памяти, не беспокоясь о вложенных событиях. Большинство из наших интерфейсов построено из повторно используемых компонентов, поэтому обработка событий была централизована и делегирована нескольким корневым узлам. Также было минимизировано количество перерисовок при формировании HTML-структур до того как они будут внедрены и объедены с релевантными данными на этапе рендеринга HTML-страниц, а не с помощью DOM-манипуляций.
Интеграция медиа
Одной из важнейших функций нового движка – это возможность встраивания стороннего контента прямо на сайте с помощью твита-ссылки на одного из наших контент-партнеров. Для большинства из них, таких как Kiva или Vimeo, использовался стандарт oEmbed, который позволяет легко делать JSON-P-запрос к домену контент-провайдера и встраивать контент, который будет получен в ответ на запрос. Для других медиа-партнеров, таких как TwitPic и YouTube, использовались известные механизмы встраивания ресурсов, которые могут быть получены из URL, тем самым снизить сетевую нагрузку и обеспечить общее ускорение.
Открытый код
Твиттер всегда выбирал технологии open-source и в новом клиенте традиция была продолжена. В разработке были использованы jQuery, Mustache, LABjs, Modernizr и многие другие open-source скрипты и плагины к jQuery. Разработчики крайне благодарны авторам этих библиотек и многим другим людям из сообщества JavaScript за их усилия по написанию открытого JavaScript кода. Мы надеемся, что после внедрения инноваций при разработке здесь в Твиттере, мы сможем вернуть многие из них обратно в сообщество open source подкрепленными нашими собственными технологиями.
