Electrode — open source платформа від WalmartLabs для ReactJS/NodeJS додатків

image

Менше ніж за рік 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.

image

  1. Electrode Core — дозволяє почати новий проект швидко з простий, але заданою архітектурою, що використовує передові технології.
  2. Electrode Modules — дає доступ до модулів, які дозволяють виконувати різного роду завдання від зображень на сервері до гнучкого контролю налаштувань. Ці модулі можуть використовуватися незалежно від Electrode Core, що означає можливість їх використання у ваших проектах.
  3. 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.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.