UI component explorers — your new favorite tool

Building complex UIs one component at a time

UI components make you think reusable, predictable, and modular. This may be true for small apps where you can easily recall each component from memory. As an app grows teams encounter two challenges: there’s a flood of components and component complexity increases. What is, in theory, a solid architecture for building modern UIs becomes unwieldy in large apps.

How can frontend engineers ensure their modular UI adapt to evolving requirements and increasing scope? Let’s see how component explorers are crucial to frontend professionals for taming the requirements of building and growing modern apps.

The digital revolution mirrors the industrial revolution

Modularization

Two hundred years ago pioneers of the industrial revolution built complex machines and streamlined manufacturing to make goods and services more accessible. Less than a decade ago our friends in devops landed on microservice architecture to create modular distributed systems. Today’s frontend engineers seek to build modular UIs to assemble more powerful and complex apps.

The recent adoption of these frontend patterns have finally enabled frontend engineers to make headway on building web app interfaces in a modular way.

Standardized components : Idioms established by popular frameworks like React, Angular, and Vue leads to consistency between components.

: Idioms established by popular frameworks like React, Angular, and Vue leads to consistency between components. Page-agnostic components : Components are designed to live in isolation from their intended setting and data context

: Components are designed to live in isolation from their intended setting and data context State-based view layers (i.e., declarative templating): “The separation of UI state, the underlying logical situation of what the user can see, from the layout (DOM).” — paraphrased from Tom Coleman

Component explorers

Component explorers help engineers build modular UIs by visualizing components so that they can be constructed in isolation of an app’s business logic and layout. They allow you to simulate component states for testing and serve to index your app’s UI components for later reuse. Consider a component explorer a dictionary for your modular UI that lives alongside your production app[s].

Toggling between states helps engineers & designers visualize component state and interactions between states. (Chromatic)

Robust user interfaces

Engineering is prone to bugs. The essential complexity in building apps is inescapable. Component explorers seek to mitigate inconsistency by showing the many states of components.

Highlighting the various permutations enables developers to build each state independently. All states of a component can thus be tested in isolation and the states that are particularly difficult to replicate can be mocked (e.g., loading). Toggling between permutations helps engineers quickly verify what’s expected and fine tune the interactions or animations between states. Just as machine tools like lathes are useful for building mechanical parts, a component explorer is a useful interface for building interfaces.

Rapid development

As Fred Brooks wrote in Mythical Man Month, “… our ideas are faulty, we have bugs”. The first product release cannot be the last because the subsequent iterations are needed to iron out the bugs in our thinking and code.

Our ideas are faulty, we have bugs

Since ideas are prone to bugs, apps must be easily adaptable to accommodate new learning. Dissecting UIs into interchangeable components enables rapid reconfiguration of the pieces as business needs change. The component model encourages interchangeability by isolating component state from business logic. A component explorer makes this separation evident by providing a sandbox to develop the UI component in isolation of the app.

The model also allows for parallel production where a team of people can work on different pieces of the UI simultaneously without distraction or state pollution from other parts of the app. The combination of interchangeability and distributed production enables rapid product development. In short: your team gets things done faster.

Component explorers like Electrode Explorer by Walmart Labs organize components for easy discovery and reuse.

Documented, organized, and reusable

Reuse is the major source of cost-savings in any industry development notwithstanding. @WalmartLabs re-uses components across a dozen high-traffic sites to shorten features’ time to market. Facebook has a dedicated UI component team to make, adjust, and approve new pieces of interface. HubSpot relies on a component explorer for discoverability and documentation of in-house components.

Building quality interfaces cheaply seems like a contradiction. However, in a component explorer, you have a tool which does the heavy-lifting for documentation and organization resulting in reusable UI components at little impact to the project speed.

Collaborative

UI engineering is inherently visual. Code-only pull requests are an incomplete representation of the work. In order to truly unlock collaboration UI must be made real. Visualizing components allows developers create scannable artifacts that are easy to share with collaborators and stakeholders.