System Design

dash.js: A reference client implementation by the DASH Industry Forum (DASH-IF) for the playback of MPEG-DASH via JavaScript and compliant MSE/EME platforms.

Vidstack Player: A framework and collection of UI components for building and managing custom media players on the web.

Documentation

<video>: The Video Embed element

Guide to streaming audio and video | MDN

Media Source API | MDN

DASH Adaptive Streaming for HTML 5 Video | MDN

Media Capabilities API | MDN

Topic Card

Music Streaming (e.g. Spotify, SoundCloud)

Case Studies

Spotify

Building the Future of Our Desktop Apps

Building Spotify’s New Web Player

Thinking of State in a World of URLs

Web API | Spotify for Developers

SoundCloud

Playback on Web at SoundCloud

Building The Next SoundCloud (A little dated, but has ideas that are still relevant considering it was written in 2012)

API - Guide - SoundCloud Developers

Resources

What is Encrypted Media Extensions? | web.dev

Documentation

Media Source API

Web Audio API

Topic Card

Collaborative Editor (e.g. Google Docs)

Case Studies

Google Docs

What's different about the new Google Docs: Working together, even apart

What's different about the new Google Docs: Conflict resolution

What's different about the new Google Docs: Making collaboration fast

Improved Accessibility in Google Docs and Sites

Figma

How Figma's multiplayer technology works

Realtime editing of ordered sequences

Notion

The data model behind Notion's flexibility

Others

Issues and Experiences in Designing Real-time Collaborative Editing Systems

A Pragmatic Approach to Live Collaboration

Understanding sync engines: How Figma, Linear, and Google Docs work

Articles

Operational Transformations as an Algorithm for Automatic Conflict Resolution

I was wrong. CRDTs are the future

You don't need CRDTs for collaborative experiences

Operational Transformations (OTs)

Visualization of OT with a central server

Papers

Concurrency Control in Groupware Systems: Paper that introduces operational transforms

High-Latency, Low-Bandwidth Windowing in the Jupiter Collaboration System: One of the earliest research papers on operational transforms with a centralized server

ShareJS ecosystem

ShareJS: Server & client library to allow concurrent editing of any kind of content via operational transforms

ShareDB: Realtime database backend based on operational transforms. Successor to ShareJS.

The Plaintext OT Type: Library for operational transforms on plain text. Used by ShareJS.

The Plaintext OT Type, with proper unicode positions: Successor to text type which accounts for unicode code points. Used by ShareJS.

Etherpad: Project acquired by Google then later released as open source.

OT FAQ: Comprehensive coverage of questions, answers, and references related to the subject of OT.

Conflict-Free Replicated Data Types (CRDTs)

An Interactive Intro to CRDTs

CRDT.tech: Website containing useful resources related to CRDTs.

Yjs: A CRDT implementation in JavaScript

Automerge: Library which provides fast implementations of several different CRDTs, a compact compression format for these CRDTs, and a sync protocol for efficiently transmitting those changes over the network.

An introduction to Conflict-Free Replicated Data Types

Papers

Conflict-free Replicated Data Types: One of the first papers that introduced CRDTs.

CRDTs: Consistency without concurrency control: Introduction to Treedoc, a shared collaborative document built using CRDTs. Its design, implementation, and performance are discussed.

Technologies

Fluid Framework: A collection of client libraries for distributing and synchronizing shared state, built by Microsoft. It can be viewed as a hybrid of operational transformations and CRDTs.

Topic Card