Building React.js at Enterprise Scale

Introduction

Walmart has incorporated ReactJS & ReactToolset heavily into the various sites/web apps. React’s component-centric approach blends well in solving legacy stack problems, helping faster adoption and implementation cycles. Engineers like the fact that an entire app or page can be broken down into smaller blocks which are descriptive and re-usable UI elements.

In this post we will read through challenges we faced and the thought processes that go into breaking down monolith pages into smaller components. We will also cover how the Walmart engineering organization contributes, shares ideas, and shares knowledge and code — not an easy task when the engineering org spans horizontally and vertically.

Challenges we faced.

In our legacy system, all of the UI was in a single template, making it harder to read code and make changes. Generally, a good practice is to break down a bigger application into smaller chunks to help sharing and re-usability of different parts of the codebase.

For example, consider the rating view on this product page. The generated HTML would look something like the image below. Imagine copy-pasting this same piece of code across multiple different pages, leading to the question, “Why can this UI code exist in a common place and shared from a single source of truth?”

Pause for a moment and think on how we could build smaller components to make a larger product page in our example above.

Here are some smaller level blocks that can be extracted out into smaller building blocks. React lends well with this component based approach. Shared smaller blocks hide the complexity of tags, CSS, UX from the application developer.

Some example of React components for the above product page would be:

<Stars/>
<Breadcrumbs/>
<ProductTitle/>
<ProductImage/>
<Button/>
.... etc.

This is what that rating’s UI code looks like:

<Stars total={5} average={4.0} />

Recapping the above, we have read through challenges we faced, how components are awesome, how React helps us build smaller components which are shareable, re-useable and easy to read.

In on of our upcoming blog entries, we will dive deeper into process and governance around these shareable components and how new components get implemented, deployed and maintained across a large team of developers (> 300).