🏗️ Frontend Architecture

📐 Introduction to Frontend Architecture

Frontend architecture defines how you structure, organize, and scale your application. The right architecture depends on your team, complexity, and requirements.

Key Decision Factors

🏢 Monolithic Architecture

A single, unified codebase where all features live together. The simplest and most common starting point.

Structure

// Typical monolithic folder structure
my-app/
├── src/
│   ├── components/       // All components together
│   │   ├── Header.jsx
│   │   ├── UserCard.jsx
│   │   └── ProductCard.jsx
│   ├── pages/            // All pages
│   │   ├── Home.jsx
│   │   ├── Dashboard.jsx
│   │   └── Settings.jsx
│   ├── services/         // API calls
│   ├── hooks/            // Custom hooks
│   ├── store/            // Global state
│   └── App.jsx           // Single entry point
├── package.json          // One package
└── webpack.config.js     // One build

Characteristics

Pros & Cons

When to Use

Code Example

// src/App.jsx - Single entry point with unified routing
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';

// All pages imported in one place
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

function App() {
    return (
        // Single global store wraps everything
        <Provider store={store}>
            <BrowserRouter>
                <Layout>
                    // All routes defined together
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/settings" element={<Settings />} />
                    </Routes>
                </Layout>
            </BrowserRouter>
        </Provider>
    );
}

🧱 Component-Based Architecture

Building UIs from reusable, self-contained components with clear hierarchies. This is fundamental to modern frontend development.

Container vs Presentational Pattern

// Container: Manages state, fetching, business logic
function UserListContainer() {
    // State management
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [filter, setFilter] = useState('');
    
    // Data fetching
    useEffect(() => {
        fetchUsers()
            .then(setUsers)
            .finally(() => setLoading(false));
    }, []);
    
    // Business logic - filtering
    const filteredUsers = useMemo(() => 
        users.filter(u => u.name.includes(filter)),
        [users, filter]
    );
    
    // Pass data to presentational component
    return (
        <UserList 
            users={filteredUsers}
            loading={loading}
            filter={filter}
            onFilterChange={setFilter}
        />
    );
}

// Presentational: Only handles rendering
function UserList({ users, loading, filter, onFilterChange }) {
    // Only UI logic - no business logic!
    if (loading) return <Spinner />;
    
    return (
        <div className="user-list">
            <SearchInput 
                value={filter}
                onChange={onFilterChange}
                placeholder="Search users..."
            />
            
            <div className="user-grid">
                {users.map(user => (
                    <UserCard key={user.id} user={user} />
                ))}
            </div>
            
            {users.length === 0 && (
                <EmptyState message="No users found" />
            )}
        </div>
    );
}

Compound Components Pattern

// Compound components - Flexible composition with shared state

const Tabs = ({ children, defaultValue }) => {
    const [activeTab, setActiveTab] = useState(defaultValue);
    
    return (
        // Shared context for child components
        <TabsContext.Provider value={{ activeTab, setActiveTab }}>
            <div className="tabs">{children}</div>
        </TabsContext.Provider>
    );
};

// Tab trigger button
Tabs.Trigger = function TabTrigger({ value, children }) {
    const { activeTab, setActiveTab } = useContext(TabsContext);
    
    return (
        <button 
            className={activeTab === value ? 'active' : ''}
            onClick={() => setActiveTab(value)}
        >
            {children}
        </button>
    );
};

// Usage - Clean, declarative API
<Tabs defaultValue="general">
    <Tabs.List>
        <Tabs.Trigger value="general">General</Tabs.Trigger>
        <Tabs.Trigger value="security">Security</Tabs.Trigger>
    </Tabs.List>
    
    <Tabs.Content value="general">
        <GeneralSettings />
    </Tabs.Content>
</Tabs>

🔀 Micro-Frontend Architecture

Breaking a frontend into independent, deployable micro-applications. Each team owns and deploys their part independently.

Integration Approaches

Communication Between Micro-Frontends

// Event Bus Pattern - Loosely coupled communication

class EventBus {
    listeners = new Map();
    
    on(event, callback) {
        if (!this.listeners.has(event)) {
            this.listeners.set(event, new Set());
        }
        this.listeners.get(event).add(callback);
        
        // Return unsubscribe function
        return () => this.listeners.get(event).delete(callback);
    }
    
    emit(event, data) {
        if (this.listeners.has(event)) {
            this.listeners.get(event).forEach(cb => cb(data));
        }
    }
}

// Product Catalog (Team A) - Emits event
function ProductCard({ product }) {
    const addToCart = () => {
        window.__EVENT_BUS__.emit('cart:add', { productId: product.id });
    };
    return <button onClick={addToCart}>Add to Cart</button>;
}

// Checkout (Team B) - Listens for event
function CartIcon() {
    const [count, setCount] = useState(0);
    
    useEffect(() => {
        return window.__EVENT_BUS__.on('cart:add', (item) => {
            setCount(prev => prev + 1);
        });
    }, []);
    
    return <span>🛒 {count}</span>;
}

📦 Module Federation

Webpack 5 feature for sharing modules between applications at runtime. The most flexible approach for micro-frontends.

Configuration

// Remote App webpack.config.js (Products micro-frontend)
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;

module.exports = {
    output: {
        publicPath: 'http://localhost:3001/',
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'products',                   // Unique name
            filename: 'remoteEntry.js',         // Entry file
            
            // Modules this app EXPOSES to others
            exposes: {
                './ProductList': './src/components/ProductList',
                './ProductCard': './src/components/ProductCard',
            },
            
            // Dependencies shared with host
            shared: {
                react: { singleton: true },
                'react-dom': { singleton: true },
            },
        }),
    ],
};

// Host App webpack.config.js (Shell application)
module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'shell',
            
            // Remote apps this host CONSUMES
            remotes: {
                products: 'products@http://localhost:3001/remoteEntry.js',
                checkout: 'checkout@http://localhost:3002/remoteEntry.js',
            },
            
            shared: {
                react: { singleton: true },
                'react-dom': { singleton: true },
            },
        }),
    ],
};

Using Remote Modules

// Host App - Dynamic import with React.lazy
const ProductList = React.lazy(() => import('products/ProductList'));

function ProductsPage() {
    return (
        <Suspense fallback={<ProductsSkeleton />}>
            <ProductList />
        </Suspense>
    );
}

🏝️ Islands Architecture

Partial hydration - only interactive parts (islands) are JavaScript, rest is static HTML. Perfect for content-heavy sites.

Hydration Strategies (Astro)

Astro Example

// BlogPost.astro - Static by default
---
import Header from '../components/Header.astro';      // Static
import Comments from '../components/Comments.jsx';    // Interactive
import ShareButtons from '../components/ShareButtons.jsx';
---

<Layout>
    <!-- Static header - no JavaScript -->
    <Header />
    
    <!-- Static content -->
    <article>
        <h1>{post.title}</h1>
        <Content />
    </article>
    
    <!-- Interactive Island - hydrate when visible -->
    <ShareButtons client:visible />
    
    <!-- Another island -->
    <Comments postId={post.id} client:visible />
</Layout>

🎨 Rendering Patterns

Different strategies for when and where to render your application.

Comparison

SSR Example (Next.js)

// pages/products.jsx - Server-Side Rendering
export default function ProductsPage({ products }) {
    // Products already available - server fetched them
    return (
        <div>
            <h1>Products</h1>
            {products.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </div>
    );
}

// Runs on EVERY request on the server
export async function getServerSideProps(context) {
    const res = await fetch('https://api.example.com/products');
    const products = await res.json();
    
    return { props: { products } };
}

ISR Example (Next.js)

// pages/products/[id].jsx - Incremental Static Regeneration
export async function getStaticProps({ params }) {
    const product = await fetchProduct(params.id);
    
    return {
        props: { product },
        
        // Revalidate every 60 seconds
        revalidate: 60
    };
}

export async function getStaticPaths() {
    const topProducts = await fetchTopProducts(100);
    
    return {
        paths: topProducts.map(p => ({ params: { id: p.id } })),
        fallback: 'blocking'  // Generate others on-demand
    };
}

📊 State Management Patterns

Different approaches to managing application state based on your needs.

Types of State

Pattern Comparison

Redux Toolkit Example

// Modern Redux with Redux Toolkit
import { createSlice, configureStore } from '@reduxjs/toolkit';

const cartSlice = createSlice({
    name: 'cart',
    initialState: { items: [], total: 0 },
    
    reducers: {
        addItem(state, action) {
            const existing = state.items.find(i => i.id === action.payload.id);
            
            if (existing) {
                existing.quantity += 1;
            } else {
                state.items.push({ ...action.payload, quantity: 1 });
            }
            
            state.total = state.items.reduce(
                (sum, item) => sum + item.price * item.quantity, 0
            );
        },
    },
});

// Usage in component
function ProductCard({ product }) {
    const dispatch = useDispatch();
    
    return (
        <button onClick={() => dispatch(addItem(product))}>
            Add to Cart
        </button>
    );
}

React Query Example

// Server state management with React Query
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function useProducts(category) {
    return useQuery({
        queryKey: ['products', category],
        queryFn: () => fetchProducts(category),
        staleTime: 5 * 60 * 1000,         // Fresh for 5 minutes
        refetchOnWindowFocus: true,       // Refetch on tab focus
    });
}

// Usage
function ProductsPage() {
    const { data: products, isLoading, error } = useProducts('electronics');
    
    if (isLoading) return <Spinner />;
    if (error) return <Error message={error.message} />;
    
    return products.map(p => <ProductCard key={p.id} product={p} />);
}

📁 Feature-Based Architecture

Organizing code by business feature/domain instead of technical type. Groups related code together.

src/
├── components/
├── hooks/
├── services/
├── store/
└── pages/

// Problem: Related code
// scattered everywhere

src/
├── features/
│   ├── auth/
│   ├── products/
│   └── cart/
├── shared/
└── pages/

// Benefit: Related code
// grouped together

Feature Module Structure

src/features/products/
├── components/           // Product-specific components
│   ├── ProductList.jsx
│   ├── ProductCard.jsx
│   └── ProductFilters.jsx
├── hooks/                // Product-specific hooks
│   ├── useProducts.js
│   └── useProductFilters.js
├── services/             // Product API calls
│   └── productService.js
├── store/                // Product state
│   └── productSlice.js
├── types/                // Product types
│   └── product.types.ts
└── index.js              // Public API exports

Public API Pattern

// features/products/index.js - Only export what others need

// Components
export { ProductList } from './components/ProductList';
export { ProductCard } from './components/ProductCard';

// Hooks
export { useProducts } from './hooks/useProducts';

// Types
export type { Product, ProductFilters } from './types/product.types';

// Internal components are NOT exported
// Creates clear boundaries between features


// Usage in pages
import { ProductList, useProducts } from '@/features/products';
import { CartButton } from '@/features/cart';

function ProductsPage() {
    const { products, isLoading } = useProducts();
    
    return (
        <Layout>
            <CartButton />
            <ProductList products={products} loading={isLoading} />
        </Layout>
    );
}

🧹 Clean Architecture

Separating business logic from UI and infrastructure concerns. Dependencies point inward only.

Layer Responsibilities

Example

// DOMAIN LAYER - Pure business logic
export class Product {
    constructor(
        public readonly id: string,
        public readonly name: string,
        public readonly price: number,
        public readonly stock: number
    ) {}
    
    // Business rule
    canOrder(quantity: number): boolean {
        return this.stock >= quantity;
    }
}

// APPLICATION LAYER - Use cases
export class GetProductsUseCase {
    constructor(private productRepository: IProductRepository) {}
    
    async execute(filters?: ProductFilters): Promise<ProductDTO[]> {
        const products = await this.productRepository.getAll();
        return products.map(p => ({ id: p.id, name: p.name }));
    }
}

// UI LAYER - React hook
export function useProducts() {
    const [products, setProducts] = useState([]);
    
    const useCase = useMemo(() => {
        const repository = new ProductApiRepository();
        return new GetProductsUseCase(repository);
    }, []);
    
    useEffect(() => {
        useCase.execute().then(setProducts);
    }, []);
    
    return { products };
}

⚛️ Atomic Design

Building UI from smallest atoms to complete pages. Creates a systematic component hierarchy.

Component Hierarchy

Example

// ATOMS - Basic building blocks
function Button({ variant = 'primary', children, ...props }) {
    return <button className={`btn btn-${variant}`} {...props}>{children}</button>;
}

// MOLECULES - Combinations of atoms
function SearchBar({ value, onChange, onSearch }) {
    return (
        <div className="search-bar">
            <Icon name="search" />
            <Input value={value} onChange={onChange} />
            <Button onClick={onSearch}>Search</Button>
        </div>
    );
}

// ORGANISMS - Complex sections
function Header({ user, onSearch }) {
    return (
        <header className="header">
            <Logo />
            <Navigation />
            <SearchBar onSearch={onSearch} />
            <UserMenu user={user} />
        </header>
    );
}

// TEMPLATES - Page structure
function MainLayout({ children, user }) {
    return (
        <div className="main-layout">
            <Header user={user} />
            <main>{children}</main>
            <Footer />
        </div>
    );
}

// PAGES - Complete pages
function ProductsPage() {
    const { user } = useAuth();
    const { products } = useProducts();
    
    return (
        <MainLayout user={user}>
            <h1>Products</h1>
            <ProductGrid products={products} />
        </MainLayout>
    );
}

📋 Summary & Decision Guide

Quick Reference

Decision Matrix

Common Combinations