Building a UI Component Library

Exploring the pros and cons

Unless you have been living under a rock, you have heard of Twitter Bootstrap. It is a ui component libraries that have been built for developers to quickly put together an application or web page without out having to worry about look and feel of the components. Developer might use these tools for different reasons, whether it is easier to prototype or building a smaller personal sites.

I remember when Bootstrap was first release, it seemed like every webpage I went to was using it. Even after people started modifying the base theme, you still knew it was a bootstrap site.

In the enterprise world you have a few more resources and more needs / demands for components that do more than the basic set you get from a library.

Your organization can get more the a quicker prototyping for using a component library. It creates a set of rules your Designers, Developers, and Product Manager have to follow. All of the components work one way, so if you want to put that component somewhere else in the application the functionality and look and feel is already defined. Its a simple unspoken contract that allow for a streamlined development process. If the Product Manager want new functionality added to the component the have to weigh that cost against how that affect the component used in other areas of the application too. It makes a common language which both the Developers and the Designers understand.

Without a component library. Multiple Implementations of shared function, Inconsistent design, Tech Debt In the enterprise size application, you often find that bootstrap fall short of meeting all your needs. Which leaves you will a few hard choices:

• Mix and Mash
• Extend and modify an existing
• Roll your own

Let’s weigh the pros and cons of each!

Mix and Mash

This was very popular, if not the defacto approach to web applications in the jQuery era. JQueryUI would be your base UI component library then add different plugins for additional components

What do we get out of it?

A unique design for our product which represents your brand

What does it cost us?

Huge upfront time sync

Extend and Modify

As more applications started using bootstrap, this became more prevalent because the jQuery components Bootstrap came with very lightweight and you always needed a little more from them. Since they were so lightweight, they were easy to extend. Bootstrap styles we so well documented, with the boom of new application frameworks like Angular, Ember, and others you soon saw versions of the bootstrap components.

What do we get out of it?

A unique design for our product which represents your brand

What does it cost us?

Huge upfront time sync

Roll your own

While this is still rare, it is becoming more and more common. UI Developers had been so used to going into these components and modifing them over the years and due to the rise of frameworks that made managing the DOM with you javascript so much easier. It didn’t seem so daunting to write your own components from scratch.

What do we get out of it?

• A unique design for our product which represents your brand
• Common language between design and development
• Streamlined discussion about feature (since component functionality is set)
• Consistent Visual Design
• Code Reuse
• Increased Velocity (after it is built)

What does it cost us?

Huge upfront time sync

Conclusion

I was able build this component library with the help of a great team. It definitely helped us create a cohesive design and made us think of the applications functionality through its individual parts, we were better off for doing it. The velocity gained once the component library was feature rich was exponential. The only downside was not having a fully dedicated teams (with full UX support). Trying to make the component library (everyones) responsibility to contribute to lead to blockers and delays. If your organization is going to roll your own, find dedicated resources to own, deliver and promote it within your organization.

Side Note: Component Library are becoming more and more advanced with themes, so if you just need different styling and not new functionality these might be a better use for you.