Согласно исследованию Nielsen Norman Group времени отклика веб-страницы, когда загрузка веб-сайта занимает более 100 миллисекунд, мы начинаем замечать задержку и чувствуем, что компьютер усердно работает по команде (но недостаточно быстро, чтобы наша ожидания). Это проблема, с которой мы столкнулись и в Hootsuite.

По мере того, как мы росли, чтобы обслуживать более крупных клиентов — с сотнями и тысячами участников и социальных сетей — наши клиенты начали сталкиваться с проблемами производительности, такими как задержки загрузки, избыточная связь с сервером и не очень удобное обновление страницы. Самое главное, страницы управления участниками, на которых наши клиенты организуют отношения между участниками и социальными сетями, могут занимать более 500 миллисекунд. Мы переписали наши страницы управления участниками с помощью React + Flux и снизили время загрузки страницы до 100 мс; экономия 80%. Это раннее улучшение вдохновляет нас увидеть, как React & Flux может повысить производительность остальной части нашего сайта.

[идентификатор подписи = ”attachment_3387 align = ”aligncenter” ширина = ”500]

Предыдущая страница управления участниками в BackboneJS[/caption]

Прощай, магистраль

В приложении мы представляем сводку профиля пользователя, организации, к которым он принадлежит, и список социальных учетных записей, которые они могут использовать. Первоначально созданный с помощью BackboneJS, он помог нам структурировать этот раздел и поэкспериментировать со зрелой средой JavaScript. Однако он плохо масштабируется для крупных клиентов, поскольку он перегружен избыточными запросами ajax и обновлениями страниц из-за отсутствия централизованного хранилища данных на стороне клиента. Чтобы решить эти проблемы, мы повторно реализовали этот раздел с помощью React и Flux с реализацией Flummox.

Здравствуйте, React и Flux

Прежде всего, React предоставляет нам многократно используемые компоненты пользовательского интерфейса, которые мы можем легко поддерживать и не отставать от изменений дизайна. Для этого раздела мы внедрили набор повторно используемых общих компонентов, таких как аватары, кнопки и значки, в сотрудничестве с командой дизайнеров. Это предотвратило несогласованность пользовательского интерфейса в приложении, уменьшив усилия разработчиков по реализации этих компонентов и предоставив нам лучший способ организовать структуру внешнего интерфейса.

Вот пользовательский интерфейс для компонента OrganizationItem React. Он имеет два общих библиотечных компонента: Button и StandardIcon. Использование общих компонентов обеспечивает согласованное взаимодействие с пользователем и сокращает время обслуживания разработчиком при изменении дизайна. Этот компонент-контейнер сам по себе может быть легко повторен и отображен в виде набора сводок организации:

Подобные компоненты React управляются данными из хранилища Flux. Flux помогает нам создать универсальное хранилище, доступное через интерфейс, и унифицирует данные, которые мы будем передавать на сервер. В разделе «Управление участниками» используются три хранилища Flux: хранилище участников, организаций и социальных профилей, а также их набор действий. Существующий поток данных создает проблемы, потому что мы получаем данные из ajax-запросов и передаем их в средство визуализации ad hoc. Например, если пользователь пытается добавить новый социальный профиль, приложение обычно выполняет следующее:

Он выполняет свою работу, но зависит от конкретного случая, его сложно поддерживать и синхронизировать, что создает технический долг.

Связывая компоненты React с помощью Flux, мы контролируем формат данных в одном централизованном месте, которое будет автоматически повторно отображать наши компоненты, если состояние соответствующего хранилища изменилось. На приведенной ниже диаграмме показан снимок хранилища SocialProfile Flux. Различные действия проходят через Dispatcher, который взаимодействует с серверной частью с единым источником достоверной информации, отделяя манипуляции данными от уровня пользовательского интерфейса:

В результате мы сократили время рендеринга раздела «Управление участниками» до менее чем 100 мс. Выше показан график, полученный на этапе развертывания новой реализации. Как показано, новое время рендеринга (выделено красным) составляет около 100 мс, а исходная версия непостоянно медленная. Кроме того, если необходимые данные загружаются в хранилище Flux из других областей приложения, управление участниками теперь загружается и отображается мгновенно. Теперь данные и взаимодействия с пользователем напрямую связаны с хранилищем Flux, количество запросов ajax было уменьшено, а принудительное обновление страницы больше не требуется.

[идентификатор подписи = ”attachment_3385 align = ”aligncenter” ширина = ”500]

Новая страница управления участниками, встроенная в React[/caption]

Подробнее о реакции

Забегая вперед, я и моя команда очень рады возможности использовать Flux и React в других областях приложения. Используя универсальное хранилище Flux и многоразовые компоненты React, Hootsuite станет быстрее, удобнее в сопровождении и масштабируемее.

Особая благодарность моему коллеге Габриэлю за помощь в написании этого и Кимли за редактирование копии. :)

Дополнительная литература:

Об авторе

Кэтрин — инженер-программист в команде Engagement. Она любит разработку веб-приложений и мобильных приложений и проводит много времени со своим котом Боузером. Подпишитесь на нее в Твиттере @catherinettt.