Summary: How Linear Achieves Exceptional Speed

Linear, a productivity tool, is renowned for its speed, updating issues in mere milliseconds compared to the typical 300ms of traditional CRUD apps. This performance is not due to a hidden trick but a combination of foundational decisions and optimizations. Here's a breakdown of the strategies contributing to Linear's speed:

Key Techniques:

1. Database in the Browser:

   • Linear utilizes IndexedDB, allowing the UI to read from a local database.
   • Updates are applied locally first, then asynchronously synced to the server, reducing reliance on network requests.

2. Sync Engine:

   • The server acts as a sync target rather than a source of truth.
   • Local updates are made optimistic, applying changes without waiting for server confirmation.

3. Client-Side Rendering (CSR):

   • Despite criticisms of CSR, Linear uses a simplified stack with React, TypeScript, and MobX.
   • The approach maintains a consistent mental model without server-rendering complexities.

4. Initial Load Optimization:

   • Linear focuses on reducing JavaScript and CSS sizes, employing bundlers like Rolldown.
   • Code is aggressively split into smaller, on-demand chunks, reducing initial load times by up to 59%.

5. Preloading and Caching:

   • Modulepreload and service workers cache resources, enabling offline use and fast subsequent loads.
   • A service worker precaches route-level chunks, while preloading reduces network round-trips.

6. Optimized Animations and UI Design:

   • Animations avoid layout-triggering properties and use fast transitions.
   • A keyboard-centric design offers quick navigation through shortcuts and a global command palette.

Conclusion:

Linear's speed results from a carefully designed architecture prioritizing local processing and reducing network dependency. This approach combines frontend optimizations with thoughtful UI design, enabling a fast, fluid user experience. The lessons from Linear emphasize reducing network dependencies, optimizing frontend resources, and ensuring a responsive UI through design and engineering synergies.