Electrode - WalmartLabs open source platform for ReactJS / NodeJS applications

Original author: Alex Grigoryan
  • Transfer
image

In less than a year, Walmart.com completed the migration to React / Node.js, and we are pleased to inform you of this! The purpose of the migration was to create a new platform to improve the performance of WalmartLabs and its engineers in the future.

We are pleased to announce that we have posted in open source Electrode - the platform on which Walmart.com is built.

Scale Walmart.com


80 million monthly visitors, loads of up to 10,000 requests per second, and 15 million products, more than 1 million products are added every month - loads of Walmart.com today. With the e-commerce business, which is the second largest retailer in the United States, we need to not only maintain and improve Walmart.com, but also maximize the talent and encourage the creativity of our engineers.

Basic goals


In the field of electronic commerce, migration to another platform is a serious undertaking. Technology is constantly evolving, so it is important to keep up with the times and be competitive. But the reorganization of the entire technical department is a completely different story. With hundreds of small engineers and dozens of applications, the Electrode platform was built to solve the main problems that all large organizations face:

  • Streamlining the development cycle - we wanted our developers to be able to integrate into the development as quickly as possible, thereby reducing the time for developing projects. At the initial stage of the project, developers need to do a significant amount of work on configuring various technologies (such as server-side rendering, redux, webpack, css modules, post css, deploy scripts, internationalization, JS / CSS linting, configure karma / mocha, code coverage and etc.). To launch new applications, we wanted to combine all this in one simple library with an extensible structure, using advanced developments. Thus, Electrode allows developers to focus on implementing the functionality that customers need.

  • Structure and Advanced Technologies - With a couple of hundred engineers working on dozens of different projects at WalmartLabs, we need to be sure that all of our applications are architecture consistent, reliable and easily extensible. We also need to ensure the possibility of frequent updates on all projects, providing developers with code generation tools that provide an agreed structure for modules and reduce the routine. The Electrode Archetype system gives us guidance and structure for building applications that we can trust.

  • Code Reuse - WalmartLabs supports 12 Walmart sites in 11 countries, including SamsClub.com in the US and Asda in the UK. Sharing and using the same React components on different projects is a great way to increase efficiency, but only if you can trust these components, they are high-quality and stable. Electrode Archetype allows you to stick to a specific structure, and tools like Electrode Explorer make it easy to find the right component among thousands of others.

  • Performance / Universal JavaScript - We were confident that server side rendering could improve application and SEO performance, which is why Electrode provides you with a turnkey solution. But we saw additional opportunities and went further, thereby creating Electrode Caching and Profiling (profiling and caching components on the server), Above the Fold Render (prevents the display of components on the server) and Redux Router Engine (processes asynchronous data on the server).

Electrode provides solutions to the above problems, and we would like to share these solutions with the community.

Use Electrode in your application!


Our philosophy in creating Electrode is that developers can use only what they need without changing the architecture of the application. Therefore, we divided the architecture into three parts: Electrode Core , Electrode Modules and Electrode Tools .

image

  1. Electrode Core - allows you to start a new project quickly with a simple but defined architecture using advanced technology.

  2. Electrode Modules - gives access to modules that allow you to perform various tasks from displaying on the server to flexible control settings. These modules can be used independently of Electrode Core, which means that they can be used in your projects.

  3. Electrode Tools - use our powerful development tools that include a reusable component search tool ( Electrode Explorer ) and JavaScript optimization bundles ( Electrify and Bundle Analyzer ). These tools can be used in existing applications regardless of the use of Electrode Core.

In short, Electrode is a quality platform for creating Universal React / Node.js applications. With its help, Walmart.com was developed. Developers can now use the Electrode platform or parts of it as needed.

How Electrode Influenced WalmartLabs


  • Scale of use - most of Walmart.com now runs on the Electrode platform, including the homepage, login, shopping cart, payment, categories and viewing products. We are in the process of migrating SamsClub.com to Electrode and plan to use Electrode for Walmart Grocery next year.
  • Performance - Our focus on performance has significantly affected our applications. Among the pages returned from the server: the home page is now 20% faster, and the login page - 15%. The checkout page, which is displayed on the client side, is now 20% faster. Pages that were displayed only on the client side and are now displayed by the server, and we got a performance improvement of up to 30% in some cases. In addition, the size of JavaScript code on the page decreased by 20%.
  • Developer Productivity - New Engineers Start Developing on their first day at WalmartLabs. Most engineers are able to produce working code within a few days after starting work.
  • Code reuse - we see a huge number of React and Redux components used in all of our applications and brands, like Walmart.com and SamsClub.com. As a result, when one application or brand can quickly and easily use the functionality created for another brand / application, a significant reduction in project development time occurs.
  • In general, our engineers are satisfied with the use of advanced technologies, we have an active internal community of developers, and Walmart competes in the market more efficiently.


Investing in the future


We are still improving Electrode. Further improvements will focus on mobile devices, performance, and more. And, because WalmartLabs is committed to open source, our investment is an investment for all developers who want to use Electrode.

We would be very happy to see applications created using Electrode. You can study Electrode functionality in more detail on the official electrode.io website , read the Quick Start Guide or simply study the project on GitHub .

Also popular now: