[Перевод] Electrode — open source платформа от WalmartLabs для ReactJS/NodeJS приложений
Меньше чем за год Wallmart.com завершил миграцию на React/Node.js, и мы рады сообщить вам об этом! Цель миграции заключалась в создании новой платформы для повышения эффективности WalmartLabs и ее инженеров в будущем.
Мы рады сообщить о том, что мы выложили в open source Electrode — платформу, на которой построен Walmart.com.
Масштабы Walmart.com
80 миллионов ежемесячных посетителей, нагрузки до 10000 запросов в секунду, и 15 миллионов товаров, каждый месяц добавляется более 1 миллиона товаров — нагрузки Walmart.com на сегодняшний день. С e-commerce бизнесом, который является второй по величине компанией по розничной торговле в США, нам необходимо не только поддерживать и улучшать Walmart.com, но и максимально задействовать талант и поощрять творческий подход наших инженеров.
Основные цели
В области электронной торговли миграция на другую платформу — серьезная затея. Технологии постоянно развиваются, поэтому важно идти в ногу со временем и быть конкуретноспособным. Но реорганизация всего технического отдела — совсем другая история. С сотней с небольшим инженеров и десятками приложений, платформа Electrode была построена для решения основных проблем, с которыми сталкиваются все большие организации:
- Упорядочение цикла разработки — мы хотели, чтобы наши разработчики могли как можно быстрее влиться в разработку, тем самым сократить время разработки проектов. На начальном этапе проекта разработчикам нужно проделать существенный объем работы по конфигурации различных технологий (таких как server-side рендеринг, redux, webpack, css modules, post css, деплой скрипты, интернационализация, JS/CSS linting, настроить karma/mocha, code coverage и т.д.). Для запуска новых приложений, мы хотели объединить все это в одной простой библиотеке с расширяемой структурой, используя передовые разработки. Таким образом Electrode позволяет разработчикам сфокусироваться на реализации функционала, который нужен клиентам.
- Структура и Передовые технологии — с парой сотней инженеров, работающих на десятках различных проектах в WalmartLabs, нам нужно быть уверенными, что все наши приложения согласованы по архитектуре, надежны и легко расширяемы. Нам также нужно обеспечить возможность частых обновлений на всех проектах, предоставляя разработчикам инструменты кодогенериции, которые предоставляют оговоренную структуру для модулей и уменьшают рутинную работу. Система Electrode Archetype дает нам руководство и структуру для построения приложений, которым мы можем доверять.
- Повторное использование кода — WalmartLabs поддерживает 12 сайтов Wallmart в 11-ти странах, включая SamsClub.com в США и Asda в Великобритании. Обмениваться и использовать одни и те же React компоненты на разных проектах — отличный способ повысить эффективность, но только в том случае, если этим компонентам можно доверять, они качественны и стабильны. Electrode Archetype позволяет придерживаться определенной структуры, а инструменты, как Electrode Explorer, позволяют легко найти нужный компонент среди тысячи других.
- Производительность/Universal JavaScript — Мы были уверены, чтобы отображение страниц на стороне сервера (server side rendering) могло бы улучшить производительность приложения и SEO, поэтому Electrode предоставляет Вам готовое решение. Но мы увидели дополнительные возможности и пошли дальше, тем самым создав Electrode Caching and Profiling (профилирование и кешинг компонентов на сервере), Above the Fold Render (предотвращает отображение компонентов на сервере) и Redux Router Engine (обрабатывает асинхронные данные на сервере).
Electrode предоставляет решения вышеупомянутых проблем, и мы хотели бы поделиться этими решениями с сообществом.
Используйте Electrode в Вашем приложении!
Наша философия в создании Electrode заключается в том, чтобы разработчики могли бы использовать только то, что нужно без изменения архитектуры приложения. Поэтому мы разделили архитектуру на три части: Electrode Core, Electrode Modules и Electrode Tools.
- Electrode Core — позволяет начать новый проект быстро с простой, но заданной архитектурой, использующей передовые технологии.
- Electrode Modules — дает доступ к модулям, которые позволяют выполнять различного рода задачи от отображения на сервере до гибкого контроля настроек. Эти модули могут использоваться независимо от Electrode Core, что означает возможность их использования в ваших проектах.
- Electrode Tools — используйте наши мощные разработки, которые включают в себя инструмент поиска компонентов (Electrode Explorer) для многократного использования и для оптимизации JavaScript бандлов (Electrify и Bundle Analyzer). Эти инструменты могут быть использованы в существующих приложениях независимо от использования 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 на официальном сайте electrode.io, прочтите Краткое руководство или же просто изучайте проект на GitHub.
Комментарии (4)
Psychosynthesis
5 декабря 2016 в 03:26 (комментарий был изменён)
+2↑
↓
По моему Рэндел снова в тему.
DeLuxis
5 декабря 2016 в 07:06
–2↑
↓
5 декабря 2016 в 07:15
0↑
↓
И что вы этим хотели показать? Что сайт волмарта не открывается? Так это и не его сайт.5 декабря 2016 в 07:15
0↑
↓
https://www.walmart.com/
