Electrode — open source платформа от WalmartLabs для ReactJS-NodeJS приложений

Меньше чем за год Wallmart.com завершил миграцию на React/Node.js, и мы рады сообщить вам об этом! Цель миграции заключалась в создании новой платформы для повышения эффективности WalmartLabs ^[1] и ее инженеров в будущем.
Мы рады сообщить о том, что мы выложили в open source Electrode ^[2] — платформу, на которой построен Walmart.com.

Масштабы Walmart.com

80 миллионов ежемесячных посетителей, нагрузки до 10000 запросов в секунду, и 15 миллионов товаров, каждый месяц добавляется более 1 миллиона товаров — нагрузки Walmart.com на сегодняшний день. С e-commerce бизнесом, который является второй по величине компанией по розничной торговле в США, нам необходимо не только поддерживать и улучшать Walmart.com, но и максимально задействовать талант и поощрять творческий подход наших инженеров.

Основные цели

В области электронной торговли миграция на другую платформу — серьезная затея. Технологии постоянно развиваются, поэтому важно идти в ногу со временем и быть конкуретноспособным. Но реорганизация всего технического отдела — совсем другая история. С сотней с небольшим инженеров и десятками приложений, платформа Electrode ^[2] была построена для решения основных проблем, с которыми сталкиваются все большие организации:

• Упорядочение цикла разработки — мы хотели, чтобы наши разработчики могли как можно быстрее влиться в разработку, тем самым сократить время разработки проектов. На начальном этапе проекта разработчикам нужно проделать существенный объем работы по конфигурации различных технологий (таких как server-side рендеринг, redux, webpack, css modules, post css, деплой скрипты, интернационализация, JS/CSS linting, настроить karma/mocha, code coverage и т.д.). Для запуска новых приложений, мы хотели объединить все это в одной простой библиотеке с расширяемой структурой, используя передовые разработки. Таким образом Electrode позволяет разработчикам сфокусироваться на реализации функционала, который нужен клиентам.
• Структура и Передовые технологии — с парой сотней инженеров, работающих на десятках различных проектах в WalmartLabs, нам нужно быть уверенными, что все наши приложения согласованы по архитектуре, надежны и легко расширяемы. Нам также нужно обеспечить возможность частых обновлений на всех проектах, предоставляя разработчикам инструменты кодогенериции, которые предоставляют оговоренную структуру для модулей и уменьшают рутинную работу. Система Electrode Archetype ^[3] дает нам руководство и структуру для построения приложений, которым мы можем доверять.
• Повторное использование кода — WalmartLabs поддерживает 12 сайтов Wallmart в 11-ти странах, включая SamsClub.com в США и Asda в Великобритании. Обмениваться и использовать одни и те же React компоненты на разных проектах — отличный способ повысить эффективность, но только в том случае, если этим компонентам можно доверять, они качественны и стабильны. Electrode Archetype ^[3] позволяет придерживаться определенной структуры, а инструменты, как Electrode Explorer ^[4], позволяют легко найти нужный компонент среди тысячи других.
• Производительность/Universal JavaScript — Мы были уверены, чтобы отображение страниц на стороне сервера (server side rendering) могло бы улучшить производительность приложения и SEO, поэтому Electrode предоставляет Вам готовое решение. Но мы увидели дополнительные возможности и пошли дальше, тем самым создав Electrode Caching and Profiling ^[5](профилирование и кешинг компонентов на сервере), Above the Fold Render ^[6](предотвращает отображение компонентов на сервере) и Redux Router Engine ^[7](обрабатывает асинхронные данные на сервере).

Electrode ^[8] предоставляет решения вышеупомянутых проблем, и мы хотели бы поделиться этими решениями с сообществом.

Используйте Electrode в Вашем приложении!

Наша философия в создании Electrode заключается в том, чтобы разработчики могли бы использовать только то, что нужно без изменения архитектуры приложения. Поэтому мы разделили архитектуру на три части: Electrode Core ^[9], Electrode Modules ^[10] и Electrode Tools ^[11].

1. Electrode Core ^[9] — позволяет начать новый проект быстро с простой, но заданной архитектурой, использующей передовые технологии.
2. Electrode Modules ^[10] — дает доступ к модулям, которые позволяют выполнять различного рода задачи от отображения на сервере до гибкого контроля настроек. Эти модули могут использоваться независимо от Electrode Core, что означает возможность их использования в ваших проектах.
3. Electrode Tools ^[11] — используйте наши мощные разработки, которые включают в себя инструмент поиска компонентов(Electrode Explorer ^[4]) для многократного использования и для оптимизации JavaScript бандлов (Electrify ^[12] и Bundle Analyzer ^[13]). Эти инструменты могут быть использованы в существующих приложениях независимо от использования Electrode Core.

Если коротко, Electrode является качественной платформой для создания Universal React/Node.js приложений. С ее помощью был разработан Walmart.com. Теперь разработчики могут использовать Electrode платформу или ее отдельные части, по мере необходимости.

Как Electrode повлиял на WalmartLabs

— Масштаб использования — большая часть Walmart.com теперь работает на платформе Electrode, в том числе домашняя страница, логин, корзина, оплата, категории и просмотр товаров. Мы находимся в процессе миграции SamsClub.com на Electrode и планируем использовать Electrode для Walmart Grocery в следующем году.
— Производительность — наша направленность на производительность значительно повлияла на наши приложения. Среди страниц, возвращаемых с сервера: домашняя страница теперь на 20% быстрее, а страница логина — на 15%. На странице оформления заказа, которая отображается на стороне клиента, теперь на 20% быстрее. Страницы, которые отображались только на стороне клиента и теперь отображаются и сервером, и мы получили улучшение производительности до 30% в некоторых случаях. Кроме того, размер JavaScript кода на странице уменьшился на 20%.
— Продуктивность разработчиков — новые инженеры начинают разрабатывать в первый же день работы в WalmartLabs. Большинство инженеров в состоянии производить рабочий код в течении нескольких дней после их начала работы.
— Повторное использование кода — мы наблюдаем огромное количество React и Redux компонентов, использующихся во всех наших приложениях и брендах, как Walmart.com и SamsClub.com. В результате, когда одно приложение или бренд могут быстро и легко использовать функционал, созданный для другого бренда/приложения происходит значительное снижение времени разработки проекта.
— В целом, наши инженеры довольны использованием передовых технологий, у нас активное внутреннее сообщество разработчиков, и Walmart конкурирует на рынке более эффективно.

Инвестируя в будущее

Мы по-прежнему улучшаем Electrode. Дальнейшие улучшения будут направлены на мобильные устройства, производительность и многое другое. И, потому что WalmartLabs привержен к open source, наши инвестиции — это инвестиции для всех разработчиков, которые хотят использовать Electrode.

Мы будет работы увидеть приложения, которые разработчики будут создавать используя Electrode. Вы можете детальнее изучить функционал Electrode ^[14] на официальном сайте electrode.io ^[2], прочтите Краткое руководство ^[15] или же просто изучайте проект на GitHub ^[16].

Автор: semashko_sergey

Источник ^[17]