When Walmart Technology began migrating its e-commerce applications to React and Node.js last year, one of the biggest time sinks proved to be the requisite back-end busy work. Since React is just a library and not a framework, developers needed to invest substantial time and effort scaffolding and gluing together the various technologies needed to power Walmart.com, the second largest e-commerce site in the United States.
“You have to add in React, then Redux, then for your components you’re going to want linting, CSS modules, Babel, Karma, Mocha, et cetera,” explained Alexander Grigoryan, director of software engineering, application platform at Walmart Global eCommerce. “You have to select from a wide range of technologies and libraries, define best practices and figure out the best configurations for all of this across dozens of apps, as well as how to make all of this shareable.”
So last December, in an effort to streamline that process, the team at @WalmartLabs — a Walmart Technology team located in Silicon Valley—began work on an ambitious project: a platform for building universal React/Node.js applications.
The team devised Electrode, an application platform with standardized structure and industry best practices built in. The platform provides boilerplate code so developers can hit the ground running, a system for managing numerous components and applications consistently, as well as stand-alone modules that can be added or subtracted to achieve desired functionality.
Walmart.com now runs on Electrode, and following that successful trial run the platform is being open sourced. Here’s a look at what it can do.
Cutting out the drudgery
One of the biggest pain points for many organizations starting out with React/Node.js is configuring and stitching together all of the technologies necessary to support a web app. This burden became abundantly clear at Walmart when the company first rolled out React for its namesake e-commerce site. To mitigate that burden, @WalmartLabs created Electrode, enabling developers to immediately jump into building new functionality.
Today, new Walmart engineers are fully onboarded on day one and typically ship code within their first week on the job. They can rest easy knowing that whatever they’re building will scale because the underlying structure — Electrode’s archetype system — is already thoroughly stress tested.
“If Walmart uses it and it works at Walmart scale across the whole organization, you know that it’s predicated on best practices and has all the modern technologies built in,” Grigoryan said.
Seamless code reusability
At a company the size of Walmart, with numerous brands and dev teams, code reusability is a vital aspect of productivity. When engineers build a carousel displaying the daily discounts on Walmart.com, they want the same module to work for Sam’s Club as well as the company’s other e-commerce brands. But that’s easier said than done, particularly when dealing with thousands of developers spread across three or four continents. Electrode’s archetype system addresses this issue.
“Electrode fixes that reusability problem by providing standardized structure, configs, builds and deploys,” Grigoryan said. “It’s very easy to reuse other people’s components because they all function in the same way; they’re consistent.”
Of course, it also helps to know what components are available for reuse, and the platform includes tools such as Electrode Explorer to make it easy to search through what’s already been built by others.
Optimizing for performance
One of the chief benefits to building in React is server-side rendering, but because RenderToString() occurs synchronously, there is still much room left for improvement. Electrode includes multiple modules to augment React performance, such as Electrode Caching and Profiling, Above the Fold Render and Redux Router Engine. These all work to improve server-side render performance, which translates to faster page load times for the customer.
In releasing Electrode’s source code to the public, @WalmartLabs hopes the open source community continues to improve the platform, while leveraging it to optimize the performance of their own apps and services and reduce the time to market for new offerings, both for the community, as well as for Walmart.
“If you’re building a new company or a new application, Electrode sets you on the right course immediately and makes sure you’re enabled to be very fast in terms of app performance and deployment,” Grigoryan said. “It enables you to achieve your business goals quickly, just as it has helped Walmart’s.”
Walmart is currently seeking talented software engineers interested in working with open source software in an Agile environment. Check out the current openings.