Walmart Debuts Electrode, an Open Source Platform for React/Node.js Apps – InApps Technology 2022

The nation’s number two online retailer, Walmart, has a brand new product line: Electrode, an open source universal React/Node.js application platform. Developers are invited to use Walmart Labs’ Electrode as a full platform, or take advantage of Electrode’s modular architecture to take only the pieces they need.

Not every developer faces the scale challenge of 80 million monthly visitors browsing over 15 million items for a request load up to 10,000 requests per second.  The company’s engineers developed the Electrode platform to solve issues the retail giant’s web storefront was experiencing with performance, structural consistency and code redundancy between child branches of the company’s e-commerce operations.

Electrode, however — said Alex Grigoryan, software engineer at Walmart Labs — is useful at any scale for any developer seeking “performant, responsive applications with the holy grail of code reusability.”

Back in 2015, Grigoryan said, Walmart.com was running on a Backbone/Java application stack, and looking to migrate to a more responsive environment. The e-commerce site was increasingly utilizing single-page applications and performance was suffering. “Our checkout page, for example, is a single page app, and the bigger that got, the less responsive it became, especially on mobile,” said Grigoryan.

In the search for a more performant stack, the company’s software engineers vetted the available array of frameworks and libraries and ultimately chose React and Node.js. “React had a great architecture, and Node was the best engine to render React,” said Grigoryan. It took just under a year for the company’s engineers to migrate to its chosen new stack, and along the way, they began to tinker and customize.

This tinker space is how Electrode came to exist, at first as a kind of container for custom fixes. “It was the place where, if there was an issue where multiple apps all hit, we put the fixes in Electrode,” explains Grigoryan.  As more apps developed and launched, Electrode grew. The team was especially interested in browser HTML for performance and SEO value, he adds, “So every bot can just read the HTML instead of trying to read the output of the JavaScript. As a result, one of the things Electrode does well is server side performant rendering and sharing components.”

To Market, to Market

Component sharing was key for a team of several hundred engineers working across varied corporate branches: Walmart Labs supports not just Walmart.com, but also the e-commerce faces of Sam’s Club and Asda (Walmart in the U.K.), for a total of 12 shopping websites across 11 countries. Sharing React components across company projects and brands were essential to improving efficiency and streamlining the development cycle — but only if the dev team can find the right components and trust in their quality and consistency.

“When starting a new application, developers need to glue together so many pieces — server side rendering, Redux, webpack configs, CSS modules and post-deployment scripts, code coverage configs, and so on,” said Grigoryan. With considerable repetition in its business architecture — for example, shoppers can spin a “Carousel of Deals” on at least three of its 12 retail sites — the Electrode team worked to combine all the foundational components on one easy to use package, all the better to jump-start new applications and reduce time to market. After all, time is money when you’re a company that earns $466 in profit every second.

With a prime directive of component sharing and code reuse, the team structured the Electrode platform as a series of interlocking components. First is Electrode Core, for building the fundamental structure of a new app.  On top of that comes Electrode modules, a library of pre-packaged task managers from server-side render caching to flexible configuration management. Electrode Modules are independent of Electrode Core, thus integrable into existing apps. Finally, there is a suite of Electrode Tools. These include one called Explorer, designed to enable discovery of reusable components, and Electrify and Bundle Analyzer to help optimize JavaScript bundles. Everything is open source and available on GitHub.

These days, the bulk of Walmart.com operates on the Electrode platform, including the home page, login, cart, checkout, and category and item views. The company has already seen performance increases both sitewise and internally. Regarding metrics, Grigoryan reports that the homepage is now 20 percent faster, for example, and even the client-side rendered checkout page is 20 percent faster. Pages that migrated to server-side rendering are as much as 30 percent faster, while at the same time JavaScript bundle size has decreased by 20 percent. He also said that employee morale and productivity are up as well: “We can on-board our engineers the same day they join Walmart Labs, and most can release code within a few days of their start.”

Productivity has been particularly rocket-boosted by the ability to reuse “a huge number” of React and Redux components across applications. Walmart’s various child brands can now quickly and easily make use of functionality already created for sibling brands and applications.

As a result of the move to React/Node.js, Grigoryan concludes, “the engineers are excited about the modern technologies they use, our internal developer community feels energized, and Walmart can compete more effectively.”

Can You Feel It in the Air?

Indeed, Electrode keeps surging ahead. Last week, Walmart Labs announced the release of Electrode Over the Air (Electrode OTA),  a 100 percent open source solution for enabling React Native updates, using Microsoft’s Code Push on the client side.

“We’ve been investigating React Native and think there’s a lot of opportunity there,” said Grigoryan. “With Electrode OTA we can update users’ apps over the air without having to go to the Apple store and wade through that approval process, and same with going through Android, providing a native experience.”

Electrode OTA allows users to control access and security by hosting, managing and monitoring JavaScript bundles on their server. A few tweaks to the Code Push client application, pointing it to your server, instead of Microsoft’s, and voila — seamless deployment of React Native bundles to client apps running on iOS and Android.  And, since Electrode OTA is open source, developers are free to modify, customize and pimp it out to suit their needs. Though of course, Electrode OTA is designed to plug seamlessly into the Electrode Server infrastructure, so perhaps those needs have already been anticipated and solved.

Opening the Electrode Kimono

Alex Grigoryan has been intimately involved with the evolution of Electrode and said he is both proud of and excited about the launch — most of all due to the “100 percent open source” nature of the beast.

“A lot of companies open source only parts of their ecosystem, but we have opened the entire platform that runs Walmart.  So you know it’s robust, as a platform,” he said.

And why was Walmart — a company not exactly known for transparent retail practices — willing to open the Electrode kimono?

“As a whole, Walmart believes in open source, that we have to give back to the community — because the community was there to us give us Node and React, the foundations of our stack,” said Grigoryan. “We have a roadmap planned around React and React Native, and as we hit challenges, we will build them into the Electrode platform so the community can benefit from the work we’ve done.”

Grigoryan said he was “very supported in open sourcing” by company executives, particularly Laurent Desegur, Walmart’s Vice President of Engineering, and Chief Technology Officer of Walmart Labs, Jeremy King.

“They get it, that it’s not just us putting resources into this,” said Grigoryan. “Ultimately, we believe it will allow us all to build better software, which the community can extend Electrode’s capabilities into areas we haven’t even thought of yet.”

Feature image via Pixabay.