Linearはなぜこんなに高速なのか—技術的な分析

Linearの高速な性能を実現する複数のアーキテクチャ手法が、Dennis Brotzkyによる技術分析で明かされた。IndexedDB上のローカルファースト設計、楽観的ミューテーション、積極的なコード分割などにより、従来のアプリケーションより数ミリ秒で応答する。

Linearは、ブラウザ内のIndexedDBにデータベースを配置し、UIが読み取るデータソースとすることで、アプリケーション性能を根本から再設計している。Dennis Brotzkyは「ネットワークはボトルネックであり、高速なロード時間のためには最小限のJavaScriptとCSSを配信することが重要である」と述べた。

ローカルファースト設計とミューテーション

Linearの中核となるのは、IndexedDBを用いたブラウザ内ローカルデータベース設計である。従来的なCRUDアプリケーションではイシュー更新に約300 msを要するのに対し、Linearではこれが数ミリ秒に短縮される。ユーザーが「issue.title = "Faster app launch"; issue.save();」と操作すると、変更はまずローカルで適用され、その後非同期でサーバーにWebSocket経由で送信される。サーバーがミューテーションを確認すると、変更は他のクライアントへデルタとして配信される。

Linearの共同創業者Tuomasは「シンコードの最初の行がシンクエンジンであり、スタートアップとしては非常に珍しい」と述べた。このシンクエンジンはIndexedDB内のトランザクションキューを使用してミューテーションを管理する。

コード分割と読み込み最適化

Linearはスタックに React、TypeScript、MobX、PostgreSQL、CDNを採用し、Rolldownをバンドラーとして使用している。同社は数百のルートレベルチャンクへの積極的なコード分割を実装し、modulepreloadによってチャンク取得を並列化してウォーターフォール読み込みを排除している。

ロード時間削減の成果は著しく、Linear自身のブログ投稿によると、コード分割により配信コードが50 %削減され、圧縮後のサイズは30 %縮小されたとされる。冷キャッシュ時のページロード改善は10 % ～ 30 %、Safariでのactive-issues viewのtime-to-first-paintは59 %短縮され、メモリ使用量も70 % ～ 80 %低下したとみられる。現在Linearが配信する縮小化されたJavaScriptは21 MBである。

インデックス、キャッシング、クライアント実装

Linearはサービスワーカーに約1,200個のハッシュ化アセット（ルートチャンク、アイコン、フォントを含む）のプリキャッシュマニフェストを実装している。index.htmlには重要なCSSがインライン化され、外部スタイルシート取得なしでロード状態のレンダリングが可能となる。可変フォントは単一のwoff2ファイルで提供され、font-display swapが用いられている。

バックエンドはNode.js（TypeScript）、PostgreSQL（Cloud SQL）、Memorystore Redis、turbopuffer（ベクトルデータベース）、GKE上のKubernetesで構成される。PostgreSQLではIssuesテーブルが300個のパーティションに分割されている。セッショントークンはクッキーに保存され、ブート時にlocalStorage.ApplicationStoreで認証がチェックされる。

リッチテキスト編集とライブコラボレーションにはProseMirror with y-prosemirrorが使用される。UIプリミティブはRadix UIに依存し、ポップオーバー、メニュー、フォーカストラップが実装されている。フロントエンドのエラー監視にはSentryが用いられ、デスクトップクライアントはElectronで、モバイルクライアント（iOS/Android）はそれぞれSwift/Kotlinで個別に再実装されている。

データ構造ではMobX observableが含まれ、フィールドレベルでの粒度の高い再レンダーが実現される。一つのデルタが一つのセルを再レンダーするこの設計により、複数の同時エディターがいるワークスペースでも滑らかな動作が保たれる。

筆者の見立て

• IndexedDB内ブラウザデータベースがLinearの性能の最も重要な要素であると解釈している
• ネットワークリクエストをユーザーから隠すことが優れたウェブアプリ構築の秘訣だと論じている
• Tanstack QueryやSWRなどのライブラリは楽観的更新により驚くほど近い結果が得られると予想している
• 適切なアーキテクチャを持つクライアントサイドレンダリングは、初期ロード遅延への批判にもかかわらず瞬時に感じられる可能性を示唆している
• シンプルさの美しさとクライアント専用アプリケーションの制約に価値を見出している
• パッケージごとのチャンク分割がベンダーキャッシングの観点から当然と解釈している
• バンドラー選択よりもレガシーブラウザ廃止とコード分割の重要性にこそ教訓があると論じている

この記事は元記事の事実のみに基づいて自動生成されました。

出典

performance.dev『How's Linear so fast? A technical breakdown』 https://performance.dev/how-is-linear-so-fast-a-technical-breakdown