...

/

Frontend System Design of Streaming System

Frontend System Design of Streaming System

Explore the fundamentals of design patterns, architectural choices, and modular components to effectively design a modern, interactive streaming frontend.

In this lesson, we will dive into the architecture and design of a robust streaming frontend system, define key modular components, and combine them into a high-level frontend System Design. We’ll approach our design gradually using the following sequence in this lesson:

Section

What We Will Cover

Design patterns and architectures

Choosing suitable frontend design patterns and architectures for the Streaming system.

Components for Newsfeed

Breaking the system into modular components with clear responsibilities.

Component hierarchy

Exploring the dependencies and relationships between components.

High-level design

Discuss how components combine to form the overall frontend.

Detailed design

Connecting frontend components to backend services for data flow.

Preloading and adaptive UI rendering

Exploring how smart preloading makes the streaming frontend responsive and understanding the role of adaptive rendering.

Design patterns and architectures

Building a video streaming frontend requires architectural decisions that optimize performance, scalability, and user experience. The right choices ensure smooth video playback and efficient UI updates, with minimal buffering or interaction delays. A breakdown of critical design considerations is provided below:

  • MVC vs. MVVM: MVC tightly couples UI and business logic, making it inefficient for handling frequent state changes in video playback, user interactions, and recommendations, delaying UI updates. MVVM, however, ensures non-blocking interactions and smooth updates. This is crucial for tracking video progress, dynamically updating UI elements, and managing playback state without affecting performance. Therefore, we consider MVVM as the better choice.

  • SPA vs. MPA: SPAs provide a seamless video playback experience by enabling instant UI updates without full page reloads. This prevents buffering interruptions when switching between videos, recommendations, or user watch history. In contrast, MPAs introduce reload delays, causing playback to restart and negatively impacting user experience. SPA is the preferred architecture here.

  • Micro-frontend vs. monolithic: For streaming, micro-frontends enable independent teams to manage modules like video playback, comments, recommendations, and search. However, a monolithic SPA provides better performance, lower latency, and simpler state synchronization, crucial for real-time streaming and fast UI updates. A monolithic SPA is the optimal choice for streaming.

  • Component-based design: A video streaming application has several reusable UI components to efficiently render and manage the interface. A component-based UI approach ensures that each feature remains modular, scalable, and easy to maintain, improving performance by enabling independent updates and rerenders only when necessary.

The following table summarizes the design decisions for a Streaming Frontend System Design:

Aspect

Options

Chosen Approach and Justification

Architecture patterns

MVVM vs. MVC

MVVM for clean separation of UI and state, ensuring smooth video playback and responsive UI updates.

Frontend architectures

SPA vs. MPA

SPA for smooth video transitions, instant UI updates, and an uninterrupted streaming experience.

Application structure

Monolithic SPA vs. micro-frontend

Monolithic SPA for better performance and lower complexity.

UI design

Component-based vs. monolithic UI

Component-based UI for modular video player, recommendations, and interactive elements like comments and reactions.

Let’s explore what modular components we’ll use for a streaming application.

Components for the streaming frontend

We will design and describe the following core modular components for the streaming service:

  • Navigation and user profile: The navigation component lets users easily move between application sections, such as Home, TV Shows, Movies, My List, Search, etc. The user profile section manages account settings and preferences. It includes the following elements:

    • Navbar: Displays main navigation options.

    • User menu: Allows access to account settings.

    • Search box: Allows input for searching content.

    • User profile: Allows to configure profile and change settings.

Press + to interact
Navigation and user profile component
Navigation and user profile component

The user’s session and preferences are loaded from the global state or fetched from an API call at the start of the session. The search box processes user input and communicates directly with the search and recommendations component to dynamically fetch and display relevant content suggestions and search results.

  • Hero or banner component: This component displays the featured content prominently (e.g., trending shows or recommendations). During page load, it fetches data about the featured content from the backend via an API call. Once the data is fetched, it dynamically renders the banner (for example, the video that starts playing when we load the main page of Netflix). Clicking the “Watch Now” button initiates routing to the video player component, triggering video playback. We have the following elements in this component:

    • Background image or video: The featured show or movie

    • Title and description: Brief details about the content

    • Action buttons: “Watch Now” and “Add to My List”

Press + to interact
Hero or banner component
Hero or banner component
  • Media card component: This component displays individual content (e.g., a ...