📝

System Design for Front-end Engineers: Facebook News Feed

Jun 27, 2024

System Design for Front-end Engineers: Facebook News Feed

Introduction

  • Channel: Aimed at front-end engineers preparing for interviews.
  • Purpose: Share insights on system design for front-end, particularly for Facebook's news feed.
  • Content Nature: Not a structured course, but a personal preparation and thought process.

General Requirements

  • Feature: Infinite scrollable news feed.
  • Content Sources: User subscriptions (groups, pages, friends, etc).
  • User Actions: Share stories, post stories, attach comments, links, images, and videos.

Specific Requirements

  • Device Accessibility: Wide range of devices, including support for disabilities.

Components Architecture

  • Story Component: Avatar, title, posting date, text, images, like/comment/share controls, and a comment list.
  • Dependencies: Need a dependency graph to visualize component relations and data flow.

Data Entities

  • Story Data Structure: ID, comments, media (links, videos), timestamp, content text, origin (type, name), user (nickname, ID) in TypeScript notation.
  • Comment Data Structure: ID, media type, author (user ID), creation date, content.
  • Media Data Structure: Type (link, video), URL.

Data API

  • Endpoints:
    • GET posts: Includes API key, user ID, excludeComments flag, timestamp/cursor, page size, min ID.
    • POST create post: API key, user ID, post data.
    • POST create comment: API key, user ID, post ID, comment data.
    • Protocols: REST and GraphQL, REST preferred for simplicity and scalability.
    • Optimization: Server-side events for new stories instead of long polling or WebSockets.

Data Store

  • Front-end Requirements: Fast, efficient access, minimize multi-level structures.
  • Store Structure: Use normalized flattened state, mapped by IDs for feeds, comments, media, and origins.
  • Fetching Points: Centralized fetching with efficient data passing to components.

Infinite Scroll

  • Concept: Loaded stories dynamically as user scrolls; maintain constant number of DOM elements.
  • Implementation: Intersection observer API for detecting viewport interaction; sliding window technique to manage loaded stories.
  • Optimized Structure: Use top and bottom sentinels for smooth infinite scrolling effect.

Optimization

  • Network Performance:
    • Gzip and Brotli compression.
    • Appropriate image formats (WebP, PNG) and optimization based on viewport.
    • HTTP/2 for multiplexing.
  • Rendering Performance:
    • Server-side rendering for initial content.
    • Inline critical CSS and scripts.
    • Async and deferred script loading.
  • JavaScript Performance:
    • Minimize operations, do tasks asynchronously, cache results, use service workers for heavy tasks.
  • Additional Strategies: Image placeholders, lazy loading images, enabling PWA mode for offline access with service workers.

Accessibility

  • Color Scheme: Support different color blindness.
  • Screen Readers: ARIA attributes for dynamic content updates and input fields.
  • Hotkeys: For new story posting, story navigation, help links, and menu access.
  • Additional Support: Ensure all images have alt attributes, voice-over features for screen readers.

Conclusion

  • Summary: Covered system design structure for Facebook news feed including components, data models, APIs, data stores, infinite scroll, performance optimization, and accessibility.
  • Call to Action: Invite comments for feedback and improvement suggestions.

Attachments: Schemas and diagrams mentioned in the lecture.

Full transcript