Components are a lot like lego blocks. By themselves, they serve a small purpose. Singular in function, but has a multitude of different use cases. When you take that one step forward and build on top of that one block, the possibilities are endless. This application of thought can be used with web components when built in a certain way. That is, to scale.

As you grow in your engineering career, you’ll learn that it always saves time, in the long run, to do things as close to the best way possible. For components, that’s building things that are solid yet flexible. This allows for extending a component, as opposed to creating a new one. So with that being said, let’s get into how to build components for scale!

Start With An Agnostic Feature

A big problem most people have is that they try to tie in business logic too soon. At its core, any component should have some degree of functionality that is reusable somewhere else. Could be as small as a single button, or as complex as an input dial. Doesn’t really matter what it is, but there is always a core agnostic feature. Singling the specific feature(s) out where you define your lego blocks in your codebase.

Keep Initial Flexibility Limited

The long-term goal for our components is to scale to the sky. However, keeping on the theme of starting off with small singular features, we must build the same way. We address this by limiting the flexibility we build into the component at the beginning. This is important so feature focus isn’t lost, we build as needed, and we’re not overestimating how much we need our component to do before incorporating it elsewhere.

Building Up Through Variants

Taking a stab at another analogy, variants are like flavors of ice cream. They’re made to target a specific audience, but at the end of the day, it’s still ice cream. With our components, that’s the approach we need to use to build flexibility into them. This allows us to keep the same clean baseline singular function, and add on top of it optional parameters that can take it beyond that when needed.

Incorporate Into Bigger Components Intentionally

Now, there are two main reasons why we build our components this way. We do this to use them in greater, more robust components, and to serve a variety of use cases. The former case is where most get themselves tripped up. Building your lego block into a bigger component, or a level higher by into the business logic, requires an understanding of separation of concerns.

Using our lego blocks together to build something more robust is more than just using them together. It takes having mindfulness of what is needed where, how data should flow, and how interactions should trigger different events between them. It’s not hard to do this, just requires being mindful and aware of the purpose of what you’re building and the components themselves. Separately.

In Closing

Building components in your application should take you back to the mindset of a child. Everything is meant to be small, and useful by itself. In truth, most of the components we build should be able to be used across every project we work in. When we build the right way, it’s completely possible. So take the points discussed here, and get to playing with your legos!