Practice
Configuration
Plugins
Showcase
Blog
Guide
Practice
Configuration
Plugins
Showcase
Blog

Component vs Micro-Frontend

Introduction

Components and micro-frontends each serve unique purposes in the development of scalable, maintainable, and efficient web applications.

Components and micro-frontends work at different levels and have different jobs. This document will explain these concepts, showing their special features, uses, and how they work together in making software.

What is a Component?

A component is a reusable UI building block. It encapsulates UI, functionality, and styling, reusable across applications.

Characteristics of a Component

  • Reusability: Components are designed to be reused in different contexts within an application.
  • Encapsulation: They encapsulate their behavior and styling, separating their internal workings from the rest of the application.
  • Interactivity: Components can interact with their environment, receiving inputs and emitting events or outputs.
Example
<Checkbox> Component

Consider a checkbox component in a web application. This simple UI element allows users to make a selection, typically a binary choice, and its appearance and behavior can be customized through various properties:

  • Change the checkbox's size.
  • Modify the checkmark color.
  • Control whether the checkbox is initially checked or unchecked.
  • Alter the label associated with the checkbox.

In this example, the checkbox component's properties and behavior are controlled by its parent component or container, illustrating the component's adaptability and encapsulation within different parts of an application.

What is a Micro-Frontend?

Micro-frontends extend the concept of microservices to the frontend development realm. A micro-frontend is a self-contained portion of a web application, representing a specific business or domain aspect. It allows teams to develop, test, and deploy parts of the application independently.

Characteristics of a Micro-Frontend

  • Independence: Micro-frontends can be developed, tested, and deployed independently of other parts of the application.

  • Domain-specific: They are closely aligned with a specific business domain or functionality.

  • Self-contained: Each micro-frontend is responsible for its own data fetching, processing, and rendering.

Example
User Profile Micro-Frontend

The user profile section of a web application, developed as a micro-frontend, serves as a self-contained unit for user information management. Key aspects include:

  • Preferences: Users can set and modify their preferences.
  • Contact Details: Users can update their contact information.
  • Account Settings: Users have control over their account settings.

This micro-frontend operates with autonomy, supported by:

  • Dedicated Backend Services: For efficient data management.
  • Frontend for User Interaction: Ensuring a seamless user experience.

Key highlights of this micro-frontend include:

  • Encapsulation: It encapsulates user profile management functionalities.
  • Independence: Emphasizes its ability to operate independently.
  • Domain-specific Design: Tailored to meet specific user information management needs.

This example effectively illustrates the micro-frontend architecture's principles, such as:

  • Independent Development: Allows for focused development without dependencies on other parts of the application.
  • Independent Testing: Facilitates thorough testing of the micro-frontend's functionalities in isolation.
  • Independent Deployment: Enables updates and deployments without affecting other areas of the application.

TLDR

Component

A component is a technical solution that encapsulates a specific behavior within a frontend element. This behavior can be modified or controlled by a parent component or container, allowing for reusable and encapsulated UI building blocks within the application.

Micro-Frontend

A micro-frontend, in the context of module federation, is a technical representation of a business subdomain. It possesses its own behavior and logic, which are driven and controlled by itself rather than by external entities. This self-contained approach facilitates independent development and deployment, aligning closely with specific business functionalities or domains.