How's Linear so fast? A technical breakdown
This article meticulously details how Linear, the issue tracker, achieves its renowned speed through a series of intentional engineering and design decisions. It highlights strategies like local-first data, optimistic UI updates, and aggressive front-end optimizations, presenting a blueprint for highly responsive web applications. HN finds it popular for validating alternative approaches to web app development, sparking debate on trade-offs between perceived speed and data consistency, and offering practical takeaways.
The Lowdown
The article by Dennis Brotzky dissects the architecture of Linear, a popular issue tracking tool, to uncover the secrets behind its exceptionally fast user experience. It contrasts Linear's approach with traditional CRUD applications, emphasizing that its speed is a cumulative result of numerous deliberate choices rather than a single 'silver bullet.' Brotzky, an admirer of Linear's design, reverse-engineers its performance strategies by studying the app, its blog posts, and conference talks, providing a comprehensive guide for developers aiming to build equally responsive web apps.
- Database in the Browser: Linear inverts the traditional client-server model by using IndexedDB as the primary UI data source. Mutations apply locally and asynchronously sync with the server, eliminating network latency as a bottleneck for UI updates.
- Instant First Load: Linear achieves rapid initial loading by meticulously optimizing its build pipeline, aggressively code-splitting JavaScript, preloading assets with
modulepreload, and utilizing a service worker to cache the full app. - Client-Side Rendering (CSR) Done Right: Despite common criticisms, Linear's CSR approach is made instant through careful optimization, inlining critical CSS/JS for an app shell, and authenticating users by checking local storage first.
- Robust Sync Engine: The core of Linear's responsiveness is its sync engine, which ensures data is always available locally, handles optimistic mutations without waiting for the network, and uses granular MobX observables for efficient, atomic UI updates.
- Designed for Speed: Beyond engineering, Linear's speed is a product of design, with a keyboard-first input model, extensive shortcuts, and a powerful command palette that leverages the local data store for instant searches.
- Thoughtful Animations: Animations are carefully implemented, restricting to composite properties (transform, opacity) that leverage the GPU, avoiding layout-triggering properties, using short durations, and often employing asymmetric timing for instant appearance and gradual dismissal.
Ultimately, Linear's perceived speed is a testament to a holistic approach where the server acts as a sync target, the client is a rich data environment, and every engineering and design decision is geared towards minimizing user wait time and maximizing responsiveness. The author praises Linear's commitment to these principles from its inception, providing a valuable blueprint for others.
The Gossip
Optimistic Updates: Perceived Speed vs. Practical Pitfalls
The central discussion revolves around Linear's reliance on optimistic UI updates, where changes are immediately reflected client-side and synced asynchronously. While praised for creating a "native" feel, many commentators express significant concerns about the "sad path" scenarios, such as network failures, data conflicts, and potential silent data loss. Critics argue that this approach prioritizes perceived speed over data correctness and user awareness of sync status, while Linear's co-founder asserts that failures are rare and handled with clear (though sometimes delayed) user feedback.
CSR vs. Latency: Challenging the 300ms Benchmark
A significant portion of the discussion scrutinizes the article's opening assertion that traditional CRUD apps take "300ms" to update, contrasting it with Linear's sub-millisecond perceived speed. Many argue that well-optimized traditional backends, especially those geographically close to users, can achieve much lower latencies, making Linear's "client-side first" approach less of a universal necessity. However, proponents of CSR commend its simplicity and potential for superior user experience when SEO isn't a primary concern.
Linear's Luster: Appreciations and Anomalies
Many commentators express strong admiration for Linear's engineering and user experience, often calling it a benchmark for web application performance and a superior issue tracker. The article is seen as a valuable resource for understanding how to achieve such high quality. However, some users report experiencing slowness or high CPU usage, indicating that the touted performance isn't always universal, while others initially found its clean UI unimpressive until deeper usage revealed its strengths.