Walmart: Agility Enabled with React.js, Node.js

When Walmart wanted to upgrade its online web site and mobile platform, it needed to marshal its IT resources as skillfully as possible to keep up with the likes of Amazon.com, Target and CostCo.

Eighteen months ago, Alexander Grigoryan, Walmart senior director of software engineering, application platform and online grocery, knew that he would need to meet multiple requirements simultaneously.

The company's monolithic Java ecommerce application was no longer the right solution. The system needed to become a set of modules that could be updated separately. The modules would need to be high performance and be scalable to match Walmart's fluctuating consumer demand. And the site had to become more comprehensible to search engines.

To some extent, Grigoryan's predecessors thought they were accomplishing many of these ends when in a preceding move they switched the consumer facing side of the web site to a Handlebars.js and Backbone.js JavaScript code base. Backbone in particular was supposed to support the notion of single page applications, where a Walmart customer could make choices in what he was looking at in the browser window and the page didn't need to stage a full refresh with each consumer click.

Want to learn more about the use of DevOps? See DevOps: It's an Ongoing Culture, Not a Project.

But there were still issues of scalability, plus availability to the indexing mechanisms of Google, Microsoft Bing and other search engines. Walmart needed to switch to server-side rendering of JavaScript into HTML, instead of sending JavaScript to the client where the client did the transformation. The web-crawling bots gathering site information for search engines extract HTML but not JavaScript.

As a primary building block, Grigoryan and his development staff selected an emerging tool, open source React.js, a JavaScript library for building user interfaces, to replace Handlebars.js and Backbone.js. Like them, React worked with the Node.js version of JavaScript. But unlike them, it transformed the JavaScript into HTML before sending it to the client.

"The unique requirement of Walmart is that you have to be search engine-savvy," said Grigoryan in a recent interview with InformationWeek.

React.js was invented at Facebook in 2011 for constructing an effective news feed interface. It was put into the public sphere as open source code in May 2013 and adopted by Netflix, Airbnb, Instagram and the Bleacher Report, among others. The first "stable" version was Version 15 released in April 2016.

There was also the issue of separate, mobile ecommerce applications taking a long time to update when Walmart was looking for as "snappy" a response as possible to mobile users, Grigoryan said. Walmart has an average 80 million monthly visitors, with the traffic split between its web site and mobile applications. The React.js JavaScript library can be used across both types of ecommerce applications and also works with the legacy Java code.

Adoption of React.js lead Walmart to standardize on Node.js or server-side JavaScript. Under React, Node.js code can be used for both server and client parts of an application, with React converting the client display to browser-friendly HTML. More on the React.js and Node.js can be found in this case study by the Node.js Foundation.

The React.js library was a good fit with the existing Walmart Electrode platform for JavaScript pages. Electrode allows web pages composed of JavaScript to be changed frequently but kept in a consistent style across thousands of pages. Walmart made Electrode open source code on Oct. 3.  Electrode in turn ran on top of Walmart's OneOps virtual machine management platform, released as open source code in January 2016, Grigoryan said. OneOps sits on top of OpenStack cloud software and manages virtual machines regardless of whether they are in a Walmart data center or in one of several clouds, including Microsoft Azure and AWS.

"Ninety-five percent of our traffic now goes through the Electrode/React platform," he noted.

When Walmart wanted to open up its retail platform to third parties last year, the conversion to React using Node.js was a key enabler, said Grigoryan.

The makeover had other advantages. When it came to interactive interfaces, the React library already had many existing components that Walmart could make use of without reinventing the wheel. As it extended its platform to Sam's Club, those components could be re-used.

"We were doing agile development, but our agile was centralized," Grigoryan noted. With a standardized language and toolkit, development could be broken into smaller teams and decentralized to operate closer to Walmart business units.

Where Walmart had previously been limited to a two-week update cycle, the smaller agile teams "were authorized to release code by themselves," allowing several updates a week, when needed, Grigoryan said. "All the teams are empowered to act on a schedule that's best for them," he said.

That allows bugs to get corrected more quickly, and the frequent testing of small updates results in "a lowering of regression bug," he said.

As the Node.js code replaced more of the legacy Java application, consumer "response times improved" for features like the Walmart checkout cart, Grigoryan said. Better response times lead to "an uptick in customer engagement," a common result found with responsive web sites and applications, he added.

New features get tried out with customers more quickly but the change that Grigoryan most appreciates is the fact that the lines began to blur between developers who focused on some aspect of either the front-end user interface or the back-end processing system.

It's easier to find JavaScript developers than many other kinds. And once hired, a JavaScript developer on the Electrode/React platform "is a full stack developer," Grigoryan said, able to address the part of the application that needs attention rather than sticking to a narrow specialty.

With 35 million items for sale and 2017 revenues forecast for $485 billion, Grigoryan's application platform staff has to be as productive and fast moving as he can make it. React.js, Electrode, OpsOne and Node.js code are all helping him achieve that goal, he said.