Frontend System Design Fundamentals

Frontend Masters course notes · Evgenii Ray

What's Frontend System Design

Chapter	Topics from the Course Plan slide
1. Core Fundamentals	Box Model; Positioning System; Formatting Context; Stacking Context; Browser Rendering Cycle and Reflow; Composition Layers; GPU Acceleration
2. DOM API	API Refresher; Querying methods comparison; Optimizing query performance; Coding Assignment #1
3. Web APIs for Complex UI Patterns	Observer API Overview; Intersection Observer; Coding assignment #2; Mutation Observer; Coding assignment #3; Resize Observer; Coding Assignment #4
4. Virtualisation	Pattern overview; Live-coding
5. Application State design	Search / Access Optimization; Browser Storage API Overview; Memory Offloading
6. Network	Introduction to Browser Networking; Protocols Overview; Talking to server (Long-polling, Web-sockets, SSE); REST / GraphQL
7. Web Application Performance	Javascript; CSS; Images; Other Assets
8. Bonus Section	simulate an interview environment and try to design a Twitter-like application: a news feed.