TL;DR
Linear’s speed stems from its local-first architecture, storing the database in the browser with IndexedDB, enabling instant UI updates. Its custom sync engine batches changes and updates in the background, eliminating network delays. This approach results in updates happening within a few milliseconds, far faster than traditional apps.
Linear achieves issue updates in just a few milliseconds, a stark contrast to the 300ms typical of traditional CRUD apps, thanks to its innovative local-first architecture and custom sync engine.
Linear’s core strategy involves storing its database within the browser using IndexedDB, allowing immediate local updates without waiting for server responses. When a user modifies an issue, the change is applied instantly in-memory, triggering an immediate UI update, with synchronization to the server happening asynchronously in the background. This eliminates the perceived delay caused by network latency.
The app’s sync engine batches changes and pushes them to the server asynchronously, broadcasting deltas via WebSocket to other clients. This design allows updates to complete within a few milliseconds, a significant improvement over traditional web apps that rely on server round-trips for each change.
Linear’s stack is built on React, TypeScript, MobX, and PostgreSQL, with a focus on simplicity and client-side rendering. The choice of technologies supports granular re-renders and efficient data management, contributing to the app’s responsiveness.
Why It Matters
This architecture demonstrates a shift towards local-first web applications, where responsiveness is prioritized by minimizing network dependency. For users, this means a more native-like, seamless experience, especially in collaborative or issue-tracking workflows where speed impacts productivity. For developers, it offers a blueprint for building highly responsive web apps by rethinking data storage and synchronization strategies.
IndexedDB browser storage device
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Background
Traditional web apps depend on server-round trip requests for data updates, often causing delays of hundreds of milliseconds. Linear’s approach, inspired by the principles of local-first design, inverts this model by maintaining a local database in the browser and batching updates. The technique aligns with trends in real-time collaboration tools, but Linear’s implementation is notably optimized for speed and simplicity.
Since its beta launch, Linear has emphasized performance and user experience, with its approach to sync engines and local data management setting it apart from competitors relying on more conventional server-centric models.
“Literally the first lines of code that I wrote was the sync engine, which is very uncommon to what you usually do when you’re a startup.”
— Tuomas, Linear co-founder
“The secret to building incredible web apps is by hiding all the network requests from the user.”
— Dennis Brotzky
As an affiliate, we earn on qualifying purchases.
What Remains Unclear
While the technical principles are clear, the exact implementation details of Linear’s sync engine and how it scales with larger datasets remain undisclosed. It is also uncertain how this approach performs under heavy concurrent usage or in different network conditions.
React TypeScript development tools
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
What’s Next
Further insights into Linear’s internal architecture may emerge through developer talks or technical disclosures. Monitoring how their approach evolves and whether similar strategies are adopted by other apps will be key to understanding the future of responsive web design.
As an affiliate, we earn on qualifying purchases.
Key Questions
How does Linear achieve such fast issue updates?
Linear uses a local-first database stored in IndexedDB, allowing immediate in-memory updates that update the UI instantly. Its custom sync engine batches changes and synchronizes asynchronously, eliminating network delays.
Can this approach be used in other web apps?
Yes, the principles of local-first architecture and optimistic UI updates can be adopted broadly, though implementing a custom sync engine like Linear’s requires significant development effort.
What are the potential drawbacks of Linear’s architecture?
Managing data consistency and conflict resolution can be complex in local-first systems. Scalability and handling offline scenarios also pose challenges that need careful engineering.
Does this architecture impact initial load time?
Despite using client-side rendering, Linear’s optimized stack and CDN delivery help keep initial load times minimal, with the main speed benefits coming from fast in-app updates.
Source: Hacker News
