Spotlight on Electrode Explorer — React Component Reuse Without the Hassle
One of the most frequently touted benefits of Facebook’s React library is that its component model encourages code reuse. On a large scale, this means sharing components across applications — for example, using a login box on a standalone login page and on a checkout page. When implemented well, this code reuse can result in faster development time and fewer bugs. But while React components do provide the technical capability of reusing UI code, there are several obstacles to reusability in practice.
For example, components can only be reused if they can be discovered. When an organization has hundreds of components created across dozens of teams, it’s difficult to find the one that solves a specific problem. In some cases there may be multiple possible solutions, each of which will need to be installed via NPM in order to see it and interact with it in context. This is time consuming for engineers, and for product managers and designers it’s likely to be outside of the general workflow, even though knowing what components look like and how they function would be useful to them.
Solving these issues was one of our goals when we built Electrode, the React/Node.js application platform that powers Walmart.com. (I addressed another one of our goals, performance, in a previous post, Using Electrode to Improve React Server Side Render Performance by up to 70%.) @WalmartLabs has hundreds of components spread across dozens of GitHub repositories. To solve the discoverability problem, we created Electrode Explorer, a standalone app that consumes all of the repos in a GitHub organization and runs them as a website. There’s no need to install components locally or search through repos; all of the company’s components are visible in the web app, and can be searched, viewed, and interacted with in one place.
Explorer automatically runs a demo of each component in a “component playground,” allowing you to view the component’s integration and change its props to modify it in real time. If the component has multiple major versions available via NPM, you can switch between those versions to see what’s changed.
Explorer also displays each component’s documentation and dependencies, and the dependencies are color coded to let you know if they’re out of date. Finally, there are links to other applications using the component that you can use as a reference implementation.
There are other important factors affecting component reusability, such as consistent structure and tooling across components and applications. Electrode helps ease those pain points too — but that’s a subject for another post.
Find out more about Electrode Explorer:
Special thanks to Caoyang Shi and Dave Stevens for being the main contributors to Electrode Explorer.
Also, find me on Twitter: @lexgrigoryan
