System Design for Front-End Engineers - Facebook News Feed

Jun 27, 2024

System Design for Front-End Engineers - Facebook News Feed

Introduction

  • Purpose: To prepare for front-end system design interviews, particularly for tech companies.
  • Challenge: Lack of resources for front-end system design; making own videos to fill the gap.
  • Case Study: Design Facebook news feed within a 15-minute timeframe.

Plan Overview

  1. General Requirements
  2. Specific Requirements (Platforms and Accessibility)
  3. Components Architecture
  4. Data Entities
  5. Data API
  6. Data Store
  7. Infinite Scroll
  8. Optimization
  9. Accessibility

1. General Requirements

Feature Overview

  • Infinite scrollable news feed based on user subscriptions from groups, pages, and friends.
  • Users can share stories with images, links, etc.
  • Users can post stories with comments, links, images, and videos.

2. Specific Requirements

Functional Requirements

  • Accessible on a wide range of devices.
  • Support for users with disabilities.

3. Components Architecture

Key Components

  • Story Component: Avatar, title, date of posting, text, images, control panel (like, comment, share).
  • Comment List: Displays user comments below the stories.
  • Dependency Graph: Visual representation for understanding component dependency and data flow.
  • Example Schema: News Feed > Stories Components > Story Card, Comment List, Comment Input, Comment.

4. Data Entities

Entity Breakdown

  • Story Entities: ID, comments, media (links, video), date (timestamp), content (text), user origin (e.g., page, group, type, name).
  • Comment Entities: ID, media type, author (User ID), creation date, content.
  • Media Entities: Type (link, video), URL format.

5. Data API

Key Endpoints

  • Get Posts: API Key, User ID, exclude comments flag, timestamp/cursor, page size, min ID.
  • Create Post: API Key, User ID, post data.
  • Create Comment: API Key, User ID, post ID, comment data.
  • Subscribe: For server-side events to load new stories.

API Protocols

  • REST: Scalable, supports HTTP caching.
  • GraphQL: Efficient for multi-level data but lacks HTTP built-in caching.
  • Chosen Approach: REST with server-side events for real-time updates and HTTP/2 support.

6. Data Store

Front-End Storage

  • Fetching Points: Load posts with parameters and push to the front-end store.
  • Normalization: Flatten store to keep a constant number of DOM elements.
  • Edge Cases: Use server-side events for real-time updates.
  • Store Structure: Maintain efficient access through normalized IDs.

7. Infinite Scroll

Implementation

  • Why Infinite Scroll?: Keeps users engaged without requiring additional actions.
  • Mechanism: Intersection Observer API to detect viewport changes.
  • Sliding Window Technique: Maintain constant number of nodes; replace old data with new when scrolling.
  • Avoid Performance Issues: Keep and update a limited set of DOM elements.

8. Optimization

Network Performance

  • Asset Optimization: Use Brotli compression, serve images in WebP format.
  • HTTP/2: Multiplexing to load resources efficiently.
  • Bundles Splitting: Separate application into smaller bundles for efficient loading.

Rendering Performance

  • Time to First Content: Use server-side rendering for initial load.
  • Inlined Critical Styles/Scripts: Serve within HTML to prevent blocking rendering.
  • CSS Modules and Strategies: BAM, CSPM class naming to keep selectors simple.

JavaScript Performance

  • Do Less: Reduce the amount of work on the main thread.
  • Cache Results: Use web workers for heavy computations, cache for repeating tasks.

9. Accessibility

Key Factors

  • Color Schemes: Support various color blind options.
  • Screen Readers: Ensure all inputs and text areas have ARIA attributes.
  • Images: Include appropriate alt attributes for images.
  • Hotkeys: New story, post story, scroll down/up, help, return to main menu, sharing options.

Summary

  • Covered components architecture, data models, APIs, data store, infinite scroll, optimization, and accessibility.

  • Provided schema and recommendations for implementing Facebook news feed as a front-end engineer.

  • Note: Open for comments and feedback to improve content.