Introducing Electrode, an open source release from @WalmartLabs
In less than one year, Walmart.com has completed its migration to React/Node.js and we are proud of that accomplishment! The goal was to build a new application platform to help @WalmartLabs and its engineers scale for the future.
Today, we are excited to announce the open source release of Electrode, the application platform powering Walmart.com.
Walmart.com at Scale
80 million monthly visitors, loads up to 10,000 requests per second, and 15 million items, adding more than one million new items each month is what Walmart.com’s scale is all about. With an e-commerce business that holds the number two online retailer spot in the U.S., we needed not just to scale Walmart.com, but to really leverage the talent and creativity of our engineering base.
Core Goals
In e-commerce development, platform migration is serious business. Technology evolves constantly and it’s important to move and adapt to stay competitive. However, transforming an engineering organization is a completely different story. With over a few hundred engineers, and dozens of applications, the Electrode platform was built to solve core problems that every large scale organization faces:
- Streamlined Development Cycle - We wanted our developers to on-board and start new projects quickly to realize the end goal of reduced time to market. When starting a new application, there are a lot of technologies and configurations that developers have to glue together (such as rendering on the server side, redux, webpack configs, css modules, post css, deployment scripts, internationalization, javascript/css linting, karma/mocha configs, code coverage configs, etc). To jump start new applications, we wanted to combine all of that in one easy to use package with a scalable structure that follows best practices. This way Electrode allows developers to focus their attention on building features that customers want.
- Structure and Best Practices - With hundreds of engineers across dozens of teams here at @WalmartLabs, we need to ensure that all of our applications are consistent and reliable, and follow the most scalable development practices. We also needed to focus results in consistent builds and deployments across projects, along with great scaffolding to start developers off on the right path. Electrode’s archetype system is what gives us the best practices and structures for building scalable applications we can trust.
- Code Reuse - @WalmartLabs powers Walmart’s 12 websites across 11 countries, including SamsClub.com in the U.S., and Asda in the U.K. Sharing React components across projects and brands is a great way to improve productivity — but only if developers can find the components and trust their quality and consistency. Electrode’s archetypes ensure consistent structure, and tools like Electrode Explorer that make it easy to search through thousands of components to find what you need.
- Performance/Universal JavaScript - We knew that server side rendering (SSR) could make a difference to performance and SEO, so Electrode supports it out of the box. But we saw an opportunity to push the boundaries of performance even further, so we created Electrode Caching and Profiling, Above the Fold Render, and Redux Router Engine.
The problems we solved at @WalmartLabs, we want to solve for the community. So that’s what Electrode gives you out of the box — solutions to the above problems.
Electrify your App!
Our philosophy in creating Electrode was that developers should be able to take just what they need, without having to change the structure of their app. That’s why we split it into three parts: Electrode Core, Electrode Modules, and Electrode Tools.
1. Electrode Core - Get new projects started quickly with a simple, consistent structure that follows modern best practices.
2. Electrode Modules - Access pre-packaged modules that help complete a variety of complex tasks and features, from server-side render caching to flexible configuration management. These modules can be used independently of Electrode Core, which means you can integrate them into your existing apps
3. Electrode Tools - Use our powerful tools, which include a tool that enables discovery of reusable components (Electrode Explorer) and another to help optimize JavaScript bundles (Electrify and Bundle Analyzer). These tools can be consumed by existing applications independently without consuming Electrode core.
In short, Electrode is a quality platform for building universal React/Node.js applications. It’s powering Walmart.com. And, now developers can use Electrode Platform as a whole or take its pieces, as appropriate.
The impact of Electrode on @WalmartLabs
- Scale - The majority of Walmart.com now runs on the Electrode platform, including the home, login, cart, checkout, category, and item views. We are in the process of moving SamsClub.com to Electrode, and we plan to have Walmart Grocery on Electrode next year.
- Performance - Our focus on performance has made a significant impact on our applications. Among server-side rendered pages, the home page is now 20% faster and the login page is 15% faster. The checkout page, which is client-side rendered, is 20% faster. Pages that were client-side rendered and are now server-side rendered have seen performance improvements of up to 30%. Furthermore, our JavaScript bundle size has decreased by 20%.
- Developer Productivity - We’re able to on-board our engineers the same day that they join @WalmartLabs. Most engineers are able to release code within a few days of their start date.
- Reuse - We see a huge number of React & Redux components being used across our applications and brands, such as Walmart.com and SamsClub.com. The result is a significant improvement in time to market, when one application or brand is able to quickly and easily leverage functionality created for another brand or application.
- Overall, our engineers are excited about the modern technologies they use, our internal developer community feels energized, and Walmart is able to compete more effectively.
Investing in the Future
We are still improving Electrode. Future enhancements will include a deeper focus on mobile, enhancements in 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 are excited to see what developers will build with Electrode. Check out the electrode.io site, dive into Electrode’s features in detail, use our Getting Started: Quick Guide to start building now, or just check out our GitHub.
Special Thanks
A very special thanks to Laurent Desegur, our VP of Engineering who supported us every step of the way. Without him, the platform, the transformation, and the open source release wouldn’t have been possible.
Thanks are due to Jack Herrington, who led a grassroots campaign evangelizing React and energizing developers.
Thanks to Joel Chen, Arpan Nanavati, and Caoyang Shi.
Thanks to our leadership and everyone else who played a part in making Electrode a success story.
