Design Patterns

Frontend design patterns and project architecture patterns

🧩 Frontend Patterns

01

Component Pattern

Build reusable UI components with consistent interfaces. Each component should be self-contained and follow single responsibility.

Reusable Encapsulated
02

Module Pattern

Organize code into modules with clear boundaries. Use IIFE or ES6 modules to encapsulate functionality.

Modular Scoped
03

Observer Pattern

Implement event-driven communication between components. Useful for handling user interactions and state changes.

Event-driven Reactive
04

Factory Pattern

Create objects without specifying exact classes. Useful for generating similar components with variations.

Creational Flexible

🏛️ Architecture Patterns

05

Progressive Enhancement

Start with basic HTML, add CSS for presentation, then JavaScript for enhanced functionality. Ensures content accessibility.

Accessibility Graceful Degradation
06

Progressive Web App

Build web applications that work offline, support push notifications, and provide native-like experiences.

Offline Native-like
07

JAMstack

JavaScript, APIs, and Markup architecture. Pre-built markup for performance, with dynamic content from APIs.

Static-first Performance
08

Micro-frontend

Decompose frontend into independent features. Each team can develop and deploy features independently.

Distributed Independent