Frontend System Design Essentials
$19.00
Minimum price
$39.99
Suggested price

Frontend System Design Essentials

A practical guide to designing scalable, reliable, and maintainable frontend systems.

About the Book

Modern frontend applications look simple on the surface, but behind every smooth user experience is a system of data flows, rendering strategies, caching layers, pagination models, and real-time updates. This book breaks down those complexities and helps you understand how to design frontends that scale — not just in performance, but in clarity, maintainability, and user experience.

Frontend System Design Essentials introduces a structured approach for thinking about complex UI architecture through the CCDAO framework. You’ll learn how to analyse product requirements, model data effectively, design APIs that support real-world access patterns, and apply techniques like virtualization, optimistic updates, pagination, caching, and performance optimization.

Rather than presenting abstract theories, the book uses concrete case studies — typeahead search, feed lists, modals, and more — to show how system design decisions play out in practice. Each chapter builds on the last, helping you form a mental model you can use in interviews or in your day-to-day work as a senior engineer.

If you want to grow beyond “just building UI” and start designing frontends that hold up under real-world pressure, this book gives you the tools, patterns, and clarity to do it well.

  • Share this book

  • Categories

    • Computers and Programming
    • React
    • Web Development
  • Feedback

    Email the Author(s)

About the Author

Juntao Qiu
Juntao Qiu

Hi, I'm Juntao, and I help developers write better code through clear, practical guidance.

I am deeply committed to contributing to both the online and offline developer communities, sharing insights and knowledge gleaned from my experiences in various projects. Among my contributions are several publications focused on Web Development. Notably, my latest works include "React Anti-Patterns" (2024), "Test-Driven Development with React (2nd)" (2023) and "Maintainable React" (2022).

Additionally, I host a YouTube channel (@icodeit.juntao), where I delve into Clean Code practices and Refactoring techniques, aiming to assist developers in honing their coding skills.

Table of Contents

    • Preface
      • Reading and Writing Data
      • What We’ll Cover in This Book
      • Summary
    • Chapter 1 — From Components to Systems
      • How a simple request turns complex
      • Part I — How a small component grows
      • Part II — Zooming out to the system
      • Part III — Thinking in systems
      • A note on CCDAO and the interview lens
      • Summary — The invisible work
    • Chapter 2 — The CCDAO Framework: A Systematic Approach to Frontend System Design
      • Collect Information
      • Component Structure
      • Data Modeling
      • API Design
      • Optimization Strategies
      • Applying CCDAO in an Interview
      • Why It Matters Beyond Interviews
    • Chapter 3 — Applying CCDAO: Designing a Typeahead Search Box
      • 1. Collect Information
      • 2. Component Structure
      • 3. Data Modeling
      • 4. API Design
      • 5. Optimization Strategies
      • Closing
    • Chapter 4 — Applying CCDAO: Designing a Scalable Feed List
      • 1. Collect Information
      • 2. Component Structure
      • 3. Data Modeling
      • 4. API Design
      • 5. Optimization Strategies
      • Closing
    • Chapter 5 — Data Modeling: Understanding the Domain and the UI
      • Seeing the Domain Clearly
      • Modeling for How the UI Uses Data
      • From Domain to Design
    • Chapter 6 — Case Study: Sidebar Navigation and Feature Entitlements
      • Step 1 — The Starting Point: Logic in the UI
      • Step 2 — When the Rules Multiply
      • Step 3 — Moving Business Logic to the Backend
      • Step 4 — Where Frontend Logic Still Belongs
      • Step 5 — Tailoring APIs with GraphQL or a BFF
      • Lessons from the Sidebar
    • Chapter 7 — Setting Up the Project Environment
      • Why We Use a Starter Project
      • Prerequisites
      • Getting the Project Running
      • Useful Scripts
      • Mock API Setup (MSW)
      • Mock Endpoints Provided
      • Data Shapes You’ll Work With
      • Project Structure (High-Level)
      • Troubleshooting
      • What Comes Next
    • Chapter 8 — Normalisation
      • Why Normalisation Matters
      • A Real Example: Inconsistent User Data
      • Normalisation: A Consistent Source of Truth
      • Transforming the Board Payload
      • React Context: Holding the Normalised Store
      • Hydrating When Rendering
      • Summary
    • Chapter 9 — How Backend Databases Inspire Frontend Normalization
      • A Familiar Pattern From Databases
      • How Databases Reconstruct Data
      • The Frontend Equivalent
      • Why This Matters
      • A Good Place to Pause
    • Chapter 10 — Data Fetching: Managing Requests
      • Showing Real Assignees in the UI
      • Extending the Backend API
      • Updating the Board on Selection
      • Understanding Race Conditions in Search
      • Fixing Race Conditions with Request Cancellation
      • Reducing Request Volume with Debouncing and Throttling
      • Summary
    • Chapter 11 — Pagination
      • Demonstrating Pagination in UserSelect
      • The Pagination Strategies
      • A Simple Users Table
      • Offset Pagination
      • Cursor Pagination
      • Choosing the Right Strategy for UserSelect
      • UI Patterns for Pagination
      • Summary
    • Chapter 12 — Migrating to Express
      • A Brief Introduction to Express
      • Migration
      • Connecting the Frontend
      • Summary
    • Chapter 13 — Server-Side Rendering
      • Rendering strategies
      • How SSR works
      • Bringing SSR into our application
      • Creating the client entry (hydration)
      • Creating the server entry (rendering on the server)
      • Creating separate entry points
      • Configuring Vite for SSR
      • Configuring Vite to build both entries
      • Generating HTML on the server
      • Bringing it together in the Express SSR route
      • Why consistency matters
      • From SSR to SPA behaviour
      • Summary
    • Chapter 14 – Code Splitting and Lazy Loading
      • Why Lazy Loading Helps
      • The Building Blocks of Lazy Loading
      • Implementing Lazy Loading in Our Board Application
      • Another Example: Lazy Loading the List View
      • Understanding the Build Output After Code Splitting
      • What Happens at Runtime
      • How Code Splitting Changes the Bundle
      • Summary
    • Chapter 15 – Prefetch
      • How Prefetch Works Conceptually
      • The Prefetch Function Inside QueryProvider
      • Exposing Prefetch Through a Hook
      • Prefetching Users in Card.tsx
      • How Prefetch and useQuery Work Together
      • The Full Runtime Experience
      • When Prefetch Helps
      • When Prefetch Doesn’t Help
      • Summary
    • Chapter 16 – Data Mutation and Optimistic Updates
      • Creating a New Card (Server-First)
      • Introducing Optimistic Updates
      • Adding a Card Optimistically
      • Deleting a Card Optimistically
      • Things to Keep in Mind
      • Summary
    • Chapter 17 – Realtime Updates
      • Polling
      • Server-Sent Events (SSE)
      • WebSockets
      • Scaling Considerations
      • Summary
    • Chapter 18 – Realtime Updates with Server-Sent Events
      • The pub-sub pattern
      • A simple implementation of pub-sub
      • Using the event emitter with SSE
      • Emitting events from the update API
      • Frontend: consuming SSE with EventSource
      • Demonstration and behaviour
      • Summary

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earnedover $14 millionwriting, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub