
لماذا يبدو Linear بهذه السرعة: تحليل تقني
يشرح تحليل تقني كيف يحافظ Linear على تحديثات الواجهة في نطاق أجزاء من الثانية: قاعدة البيانات تعيش داخل المتصفح، والتغييرات تُطبَّق محلياً، والكود يُقسَّم إلى مئات الأجزاء.
يستغرق تحديث مهمة في Linear بضعة أجزاء من الثانية، بينما يحتاج تطبيق CRUD تقليدي إلى نحو 300 ميلي ثانية للعملية نفسها. ويشرح تحليل تقني نُشر على performance.dev التقنيات التي تقف وراء هذا الإحساس، ويؤكد أنه لا توجد «رصاصة فضية» سرية. ويوضح الكاتب أنه لم يعمل يوماً في Linear ولم يرَ كودها.
قاعدة بيانات داخل المتصفح
تعمل معظم تطبيقات الويب بالحلقة ذاتها: ينقر المستخدم، فيرسل المتصفح طلب HTTP، ويستعلم الخادم من قاعدة البيانات، وتنتظر الواجهة مئات الميلي ثانية خلف مؤشر تحميل. يقلب Linear هذه المعادلة: قاعدة البيانات التي تقرأ منها الواجهة تعيش في المتصفح، في IndexedDB — تُطبَّق التغييرات محلياً أولاً، ثم تُرسل بشكل لامتزامن إلى الخادم، الذي يبثّ الفروقات إلى بقية العملاء عبر WebSocket.
عملياً، التغيير سطران: الأمر issue.title = "Faster app launch" يحدّث مخزناً في الذاكرة (كائنات MobX القابلة للمراقبة)، وissue.save() يضع في الطابور معاملة يجمعها محرك المزامنة ويرسلها. تُعاد الواجهة رسمها بشكل متزامن من الحالة المحلية، فلا شيء يستدعي الانتظار. وقال تووماس، أحد مؤسسي Linear، في مؤتمر عام 2024 إن «أول أسطر الكود» التي كتبها كانت محرك المزامنة نفسه. ومعظم الفرق لا تحتاج محركاً خاصاً: مكتبات مثل TanStack Query أو SWR مع التحديثات التفاؤلية تقترب كثيراً من النتيجة.
أول تحميل يبدو فورياً
تبدأ السرعة من مرحلة البناء نفسها. أعادت Linear كتابة خط البناء أربع مرات — Parcel ثم Rollup ثم Vite ثم Rolldown — بهدف تقليل حجم JavaScript وCSS في كل مرة. وتقول الشركة إن النتيجة: كود أقل بنسبة 50%، وحجم أصغر بنسبة 30% بعد الضغط، وتحميل أسرع للصفحات بذاكرة مؤقتة باردة بنسبة 10–30%، وانخفاض بنسبة 59% في زمن الرسم الأول لعرض المهام النشطة على Safari، وانخفاض استهلاك الذاكرة بنسبة 70–80%. جاء معظم ذلك من التخلي عن المتصفحات القديمة، وتحسين إزالة الكود الميت، وتقسيم الكود بشراسة.
ورغم ذلك ما زالت Linear ترسل نحو 21 ميغابايت من JavaScript المصغّر، مقسّمة إلى مئات الأجزاء على مستوى المسارات تُحمَّل عند الطلب. ولتفادي «شلال» الاستيرادات، يعلن ملف HTML الخاص بها تلميحات modulepreload، فيرسل المتصفح كل الطلبات بالتوازي قبل تنفيذ أي JavaScript.
الحركة والتفاصيل الأخيرة
الحركة هي الطبقة الأخيرة. تحافظ ورقة الأنماط في Linear على مدد قصيرة: 0.1 ثانية للانتقالات السريعة، و0.25 للعادية، و0.35 للبطيئة، مع تلاشي الإبراز في 0.15 ثانية — أقل بكثير من 200 ميلي ثانية في Material أو نحو 350 في زنبرك iOS. الدخول والخروج غير متماثلين: تظهر الإبرازات والنوافذ المنبثقة ولوحة الوكيل فوراً وتتلاشى خلال 150 ميلي ثانية. وتشير الحركة عادةً إلى نقطة الأصل — فنافذة الحالة تنبثق من شارة الحالة نفسها.
لا رصاصة فضية
خلاصة التحليل أن أي قرار منفرد لا يجعل التطبيق سريعاً. النموذج في Linear هو: الخادم هدف للمزامنة لا مصدر للحقيقة، وقاعدة البيانات تعيش في المتصفح، والتغييرات تُسوَّى في الخلفية، والتحميل الأول يرسل كوداً أقل في أجزاء أكثر. والصعب، كما يكتب الكاتب، ليس التنفيذ بل الإخلاص للحرفة على مدى سنوات، مع نمو قاعدة الكود واصطدامها بقواعد جديدة.
SiTech — تطوير ويب مدعوم بالذكاء الاصطناعي
نبني مواقع سريعة وعصرية وندمج الذكاء الاصطناعي في سير عمل الشركات. لديك مشروع أو سؤال؟ يسعدنا مساعدتك.