Build Scalable User Interface by Componentization

Build Scalable User Interfaces through Componentization

@ UI

Introduction

Recently, we are undergoing a major overhaul of the existing product design system, expecting to collaborate with people from different fields. Therefore, this article is written for those with no prior knowledge of web pages, mainly introducing the concept of “user interface componentization.” This article is still being drafted with references from various sources.

What is a Component?

A component is a piece of a puzzle, a building block, a gear… it is a concept that can be reused and combined into larger objects. This concept has existed since the early days of the web. For example, a web component can be a button, an input box, or a dropdown menu:

<!-- Button -->
<button>Click me</button>


<!-- Input box -->
<input type="text" />


<!-- Dropdown menu -->
<select>
  <option>Option One</option>
  <option>Option Two</option>
</select>

In addition to the above examples, there are many “native (browser-supported)” components that can be directly rendered in the browser. Developers can structure them in a declarative way, allowing the browser to handle their behavior.

So, in summary, most web components have the following characteristics:

  • Displayed on the page
  • Have certain properties that can be passed in
  • Can optionally add child content
  • Hide implementation details
  • Default styles
  • Can be declared for reuse
  • Have default states

Modern mainstream front-end frameworks such as React, Vue, Angular, or Web Components also adopt the concept of componentization. Componentization is a fundamental concept essential for web development.

The Concept of Componentization

After understanding the concept of componentization, it becomes clear that this is a very practical idea! Instead of building a massive system, it is better to break the system down into many small components and then combine these components to construct a large system. This approach has the following benefits:

  1. Reduces repetitive work
  2. Maintains consistency
  3. Clearer responsibilities

It seems like a simple principle, but we still spend a lot of time writing AWD web pages based on pages without considering the long-term maintenance and scalability of the product. The process of componentization not only involves creating new components but also requires considering how to organize existing systems into reliable and maintainable components, which requires teamwork to achieve:

  • Components should start from the scratch of the visual stage.
  • Components should have corresponding rules for creation.

Rules of Componentization

Components should be small enough to solve specific problems but not so small that they cannot be part of a larger solution. In simple terms, components should have clear and unique responsibilities while also accommodating the differences within the system, such as: logo, button, menu, input, dropdown, video, image are all examples of small and precise interface components.

Building Components in an Isolated Environment

Components should not rely on external environments to function, whether in terms of functionality or styling. Components should be independent to ensure they work correctly in any environment:

  • Functionality: Similar to the concept of pure functions🔗, components should not implicitly depend on external states for their behavior but should determine their behavior through passed-in properties.
  • Styling: Be cautious when using styles like absolute, fixed, or margins🔗 that rely on or affect the external environment. Such styles can cause components to lose their independence, leading to inconsistent behavior in different environments.

Further Reading