by Cory House
Here’s a question I’ve heard a few times recently:
“What if we create a component library in React/Vue/Angular/whatever and a new component technology replaces it?”
That’s not a question of if. It’s a question of when. These technologies have become wildly popular, but they’re not the end game. Like all technologies, something better will eventually come along and replace them.
But that fact is largely irrelevant. Establishing a library of reusable components for your company today remains absolutely critical.
Move Faster Today
Reusable components help your team move faster by creating higher level abstractions. Components eliminate decision fatigue by programmatically enforcing a standardized approach. Just consider an opinionated form
It can eliminate all the following decisions:
- Should I put the label above the input or beside it?
- Should I display validation errors to the right or below the input?
- What color should the error be?
- How should I mark required fields?
- Should I validate required fields on blur or upon submit?
- How much padding should I place between the label and the input?
The list goes on. These aren’t questions your designers and developers should be asking every time they create a new form.
Reusable components enforce user interface consistency. Your company likely has many developers. Yet your job is to build an app that looks like it was built by one developer.
To do that, it’s critical to use reusable components. Copy/paste isn’t a design pattern. If designers and developers have the freedom to start from scratch again and again, your application will quickly become a patchwork of different looks, feels, and technologies.
In a client side rendered app, every time you use a component you improve performance. Why? Because it minimizes the application’s bundle size and memory footprint. Using a component a second time requires no additional download, and hardly any extra memory.
More code leads to more maintenance. More maintenance leads to higher costs and more people which creates additional communication overhead that slows you down even further. Reusable components minimize the amount of code you need to create and maintain today.
Easier Updates Later
Finally, yes, eventually the component tech you’re using today is going to be legacy. But by creating a reusable component library today, you minimize the surface area that needs updated later.
It’s far easier to migrate a carefully componentized app because you can replace existing components one component at a time. That’s not so easy when your application is a patchwork of different technologies and patterns. Reusable components minimize the surface area you’ll need to update later.
A component library doesn’t actually require that much work. For instance, if you choose React, you need not, (and typically shouldn’t) start from scratch. There are literally dozens of mature component libraries to choose from and 100’s of standalone components as well.
Use a popular component library as your starting point and tweak it to your needs. Trust me, this need not take long and the benefits are significant.
Alternatively, you could choose to create plain CSS components as your foundation. An example of this approach is Stacks from StackOverflow. The advantage to this approach is twofold:
- If your company is currently using multiple component approaches such as React, Angular, and/or Vue, then this CSS approach can be used as the foundation for all.
The disadvantage? You have to build your components from scratch so that they utilize your plain CSS component foundation.
Looking for More on React? ⚛️