Building React.js at Enterprise Scale

Arpan Nanavati
Aug 24, 2016 · 3 min read

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).

Walmart Global Tech Blog

We’re powering the next great retail disruption.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store