Skip to main content

A first attempt at a component library

· 5 min read

Web Components is a collection of different technologies that allow us to build encapsulated, reusable UI components. Web Components includes technologies such as Custom Elements, Templates, and Shadow DOM, and can be used in any modern browser independently of a framework. This allows Web Components to maintain consistent behavior and styles across different JavaScript frameworks or libraries, and is ideal for building cross-platform, modular UI components. For more information about Web Components, please refer to the official documentation: Web Components Overview

Stencil Introduction

Stencil is a framework that focuses on building Web Components, helping developers build efficient, modular components using native Web technologies. Stencil provides features such as incremental compilation, on-demand loading, and automatic optimization to generate lightweight Web components. It supports TypeScript and JSX, allowing developers to efficiently develop and maintain components. For detailed documentation on Stencil, please refer to: Stencil Documentation

Tailwind CSS Introduction

Tailwind CSS is a practical CSS framework that helps developers build responsive UIs in a declarative way through predefined utility classes. Unlike traditional CSS frameworks, Tailwind CSS provides a high degree of customizability, allowing developers to customize their own design systems according to project requirements. At the same time, Tailwind CSS can also be used with a toolchain to implement on-demand loading, which greatly reduces the volume of generated CSS. You can read more about Tailwind CSS at TailwindCSS Documentation

React vs Stencil

While developing air-components, I gained a deeper understanding of the similarities and differences between Stencil and React. Although they are different technology stacks, they have many similarities in component-based development:

Similarities​

  1. JSX syntax: React and Stencil both use similar JSX syntax to structure components, making development very similar.
  2. Component-based thinking: Both follow the component-based development philosophy, encouraging developers to break down the UI into multiple widgets and combine these widgets to build a complete interface.
  3. Lifecycle management: React uses lifecycle methods such as componentDidMount, while Stencil uses hooks such as connectedCallback and disconnectedCallback.
  4. State management: React manages state through state and setState, while Stencil uses the @State() decorator.
  5. Prop passing: React passes data to child components via props, while Stencil defines properties via the @Prop() decorator.

Differences​

  1. Framework dependency: Stencil generates native Web Components that can be used in any modern browser, while React depends on its ecosystem.
  2. Performance optimization: Stencil provides on-demand loading and incremental compilation, which is suitable for developing lightweight components, while React is more suitable for building complex single-page applications. Compared with React, I realized that Stencil provides more flexibility in component-based development, especially for cross-platform development that does not rely on a specific framework.

air-components and air-components-start

air-components is a simple, efficient and easily extensible library of UI components that provides some commonly used UI components such as buttons (air-button), cards (air-card) and paragraphs (air-paragraph). These components are carefully designed to maintain a responsive performance on different devices and can be seamlessly integrated into any modern framework or native web project. To help developers get started quickly, I created air-components-start. This is a simplified template project that comes preconfigured with the necessary tools and dependencies, based on best practices and reduces the workload of developers starting from scratch. Insert image description here

Using air-components-start​

  1. Clone the template project:
git clone https://github.com/SisyphusZheng/air-components-start.git
  1. Install dependencies:
cd air-components-start && npm install
  1. Start the development environment:
npm start

Framework structure

Why Stencil + Tailwind CSS​

Stencil advantages​

  1. Native support for Web Components: No need to rely on other front-end frameworks, components can be run directly in any modern browser.
  2. Automatic optimization: Provides code cleaning and efficient packaging functions to generate lightweight components.
  3. Support for TypeScript: Provides type safety and higher development efficiency.
  4. High performance: Faster development and faster running speeds through incremental compilation and on-demand loading.

Tailwind CSS advantages​

  1. Class names are design: Responsive layouts and custom designs can be implemented quickly by using predefined tool classes.
  2. Highly customizable: The design system can be easily adjusted using configuration files.
  3. Load on demand: The tool chain can be combined to greatly reduce the size of the generated CSS.

Practical process

1. Environment setup​

During the initialization of the air-components project, I took the following steps:

  1. Initialize the project: Quickly create a new project using the official Stencil CLI.
  2. Integrate Tailwind CSS: Use the open source stencil-tailwind-plugin
  3. Configuration file optimization: Tailor tailwind.config.js and Stencil configuration files to your project's needs.

2. Building basic components​

The current air-components includes the following basic components:

air-button​

A fully functional button component that supports multiple states (default, hover, disabled, etc.) and provides a consistent design style.

air-card​

A reusable card component that supports a combination of images, titles, and descriptions.

3. Style management​

  1. Global styles: Global style rules such as color themes and font settings are defined in global.css.
  2. Component-specific styles: Each component is independently styled using Tailwind CSS utility class names to ensure modularity and ease of maintenance.

Design reference: quakdUI​

To improve the design inspiration of air-components, I referenced quakdUI as an excellent example of a design system. quakdUI provides a clean, modern, and highly customizable design style. Its components focus on visual consistency and simplicity, which is very consistent with the design philosophy of air-components. You can adjust the color, spacing, and layout of components based on the design philosophy of quakdUI to give them a consistent look and feel in different UI environments.

Summary

By developing air-components using Stencil and Tailwind CSS, we can quickly build efficient, responsive UI components. These components not only have excellent cross-platform compatibility, but also reduce the learning curve for developers through the template project air-components-start, providing a solid foundation for building modern web applications.