Evgenii Ray
Staff UI Engineer
Front-End System Design
4 hours, 37 minutes CC
Course Description
Dive into front-end system design to create scalable, efficient user interfaces! Master core UI fundamentals: box model, browser rendering, DOM manipulation, state management, and performance. Practice by building infinite scrolling with IntersectionObserver. Reinforce what you learn with a simulated design interview, diagramming a social media news feed.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: July 23, 2024
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 5 minutes
Evgenii Ray begins the course with an overview of front-end systems design, which includes API communication, UI data management, user interface interactions, and asset management. The course will dive into these areas and conclude with a simulated systems design interview exercise.
Core Fundamentals
Section Duration: 38 minutes
Evgenii reviews the box model that every DOM element follows. Based on the box-sizing rule, an element's border and padding affect its measured content width. Inline elements do not respond to width and height properties. Block elements have an intrinsic height and default to 100% of the parent container width.
Evgenii introduces the concept of a formatting context within a container. Elements within a context are shielded from the rules of external contexts, and new rulesets can be added by creating a new context. For example, setting a container's display property to flex or grid.
Evgenii explains that the position CSS property allows elements to be removed from the "normal flow" of the page. The static property is the default and maintains the normal flow position. The relative property maintains the normal flow position. However, the final position is determined based on the values of the top, right, bottom, and left offsets. Other properties like absolute, fixed, and XXX completely remove the element from the normal flow, and the final position is based on the containing block.
Evgenii demonstrates the rendering pipeline as reflow occurs on the webpage. After the initial DOM and CSSOM subtrees are built, reflow will work through style, layout, paint, and composite phases. The pipeline required to paint the screen will rely either on the CPU or GPU, depending on the CSS properties used. GPU-based rendering will perform better than CPU-based rendering.
Evgenii explains the difference between render and graphic layers. A graphic layer is constructed when a render layer has 3D or perspective transform CSS properties. Graphic layers are also responsible for video, canvas, opacity animations, CSS filters, and z-index compositing. Graphic layers can drastically increase a web page's memory but perform better since they rely on the GPU.
Evgenii revisits the browser rendering exercise and walks through building all formatting contexts, detecting elements outside normal flow, building a stacking context, and completing the DOM, RenderObject, RenderLayer, and GraphicLayer trees.
DOM API
Section Duration: 28 minutes
Evgenii reviews the global objects and class hierarchy in the DOM API. Query methods are also discussed, and their time complexity, memory cost, and algorithms are compared. In general, getElementById provides the best space and time complexity performance. The querySelector and querySelectorAll have slightly worse performance, but due to caching and browser optimizations, the performance will improve with repetitive runs.
Evgenii shares some performance best practices when querying DOM elements. Simplifying query selectors or using IDs for core containers can provide easy performance gains. This lesson also discusses the performance costs of adding and removing elements.
Evgenii live codes an exercise that implements a card template. The HTML template element creates a fragment that can be manipulated without causing a reflow. Once the template is ready, it's added to the DOM using the appendChild method.
Web APIs for Complex UI Patterns
Section Duration: 36 minutes
Evgenii introduces the Observer API, which includes APIs for detecting intersection, mutation, and resizing of elements. He walks through the Intersection Observer API. An observer is created from the IntersectionObserver constructor and configured with a callback and an object containing an element to check the intersection against and a threshold for the intersection.
Students are instructed to implement an infinite scroll behavior using an intersection Observer. The observer is an element at the bottom of the pages. When it intersects the viewport, the next page of data will be loaded, and new card elements will be populated.
Evgenii explains how the Mutation Observer API detects changes to elements in the DOM subtree. The types of mutations include changes to direct children, attributes, textContent, or any descendants in the subtree.
Students are instructed to create a mutation observer to detect text input and replace any supported tags with their corresponding HTML element.
Evgenii explains there are two methods for tracking when the window or elements are resized. The resize event and corresponding media queries fire when the window size changes. CSS Container Queries and the Resize Observer API fire when elements are resized.
Students are instructed to create a Resize Observer to monitor the size of box elements as they are resized. If their width and height is below 150 pixels, a border radius is added so they appear as a circle. This lesson also includes a summary of the ResizeObserver API
Virtualization
Section Duration: 58 minutes
Evgenii introduces virtualization, a UI optimization technique involving keeping data in memory while rendering only a limited subset to the screen. The virtualization code exercises are introduced. The beginning code project and steps required to implement the virtualization are explained.
Evgenii implements the top and bottom observers for the virtualization container. These observers determine when to load and display additional cards. The handleIntersectionObserver method loops through all the entries and checks if any entry intersects either observer.
Evgenii continues the virtualization exercise by loading data and displaying cards in the container. The initial data set is loaded and displayed. When the bottom observer comes into view, the next set of cards is loaded and displayed.
Evgenii implements a virtualization pool that manages how elements are stored in memory. This allows elements to be reused rather than generating a new element for every card in the data.
Evgenii recycles the elements in the virtualization exercise to avoid creating new elements. The new element positions are calculated based on the previous/next element values plus the margin offset. Absolute positioning is used for reordering the elements so the GPU is leveraged to ensure the best performance.
Evgenii answers questions about virtualization, including the types of applications where virtualization is beneficial and the differences between virtualization and other lazy loading techniques.
Evgenii concludes the virtualization exercise by handling intersections with the top observer. As the container is scrolled up, the elements are recycled to the top of the list. The scroll height calculation is used to maintain the same scroll position on the page.
Application State & Network Connectivity
Section Duration: 42 minutes
Evgenii discusses strategies for managing state in an application. Understanding the trade-offs between IndexedDB, SessionStorage, and LocalStorage and normalizing forms will help optimize access costs. Indexes should be used if an in-app search is required.
Evgenii reviews UDP and TCP protocols and explains UDP doesn't guarantee the order of the data packets received across the network. Other network considerations are discussed, including energy consumption and latency. This lesson also includes the pros and cons of using long polling
Evgenii discusses server-sent events, which are one alternative to long polling. Server-sent events have automatic reconnection handling and are more battery-efficient. They are also a good alternative to Web Sockets and very effective for large text-data streams.
Evgenii explains that Web Sockets are one of the fastest ways to send data between the client and the server. They are bi-directional and will use TCP to send binary packets. The drawbacks of Web Sockets are the infrastructure cost and computing resources required to maintain constant TCP connections. The lesson concludes with a discussion of which networking strategy is best for the application's API.
Evgenii compares classic REST APIs with GraphQL. Adding a GraphQL API introduces additional complexity, including requiring client libraries, caching layers, client state management for syncing data with the server, and the potential impact on JavaScript bundle size. GraphQL can also reduce complexity by providing a single API for client applications but multiple network implementations on the server.
Web Application Performance
Section Duration: 26 minutes
Evgenii discusses the core web vital metrics that help developers identify where to apply performance optimizations. Metrics include Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. This lesson also includes performance differences between http/1.1, http/2, and http/3.
Evgenii highlights strategies for optimizing JavaScript bundle size. The strategies include a multi-bundle compiler, code splitting, code prefetching, and code minification/compression. Other in-application techniques like deferred script loading are also discussed.
Evgenii covers optimization techniques for assets such as CSS stylesheets and images. Similar JS optimizations like splitting, minifying, and compressing can be applied to CSS. Image optimization strategies depend on the type of image asset. The WEBP format is designed to replace PNG, JPG, and GIF usage on web pages. This lesson also includes performance optimizations for fonts and rendering performance.
Systems Design Interview: Social Media News Feed
Section Duration: 38 minutes
Evgenii simulates an interview environment for designing a social media application news feed similar to Twitter. The application requirements and a mock-up of the virtualization are designed. The requirements include both functional and non-functional items.
Evgenii continues the system design for the social media news feed. The state layer and the API are designed. Stories will be managed in a global state with their associated comments and media attachments. The API will use GET requests with server-side events.
Evgenii completes the system design for the social media news feed by describing how to optimize the network, UI rendering, and JavaScript code execution performance.
Wrapping Up
Section Duration: 2 minutes
Evgenii wraps up the course by summarizing the topics discussed and sharing a few key takeaways. He also answers a question about best practices for updating the UI from a stream of data.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops