تطوير المنظومة المتكاملة لإطار عمل الويب

يتعاون Chrome باستخدام أُطر عمل مفتوحة المصدر للعمل على تحسين شبكة الإنترنت.

Houssein Djirdeh

Chrome مساهم نشط في المنظومة المتكاملة لإطار عمل الويب ونتحدث في مؤتمر Chrome Dev Summit يتناول العام 2019 الأعمال التي عملنا عليها خلال العام الماضي.

تابع القراءة للحصول على ملخص موسع للحديث مع تفاصيل وموارد إضافية.

كيف يمكننا تحسين الويب؟

هدف كل فرد في فريق Chrome هو تحسين الويب. نعمل على تحسين واجهات برمجة التطبيقات للمتصفِّح وV8، وهو محرك JavaScript وWebAssembly الأساسي الذي يشغّل Chrome، بحيث يستطيع المطوّرون مزوّد بميزات تساعدهم في إنشاء صفحات ويب رائعة. نحاول أيضًا تحسين مواقع الويب التي لا تزال في مرحلة الإنتاج اليوم من خلال المساهمة في الأدوات مفتوحة المصدر بعدة طرق.

معظم الويب المطوّرون على الأدوات المفتوحة المصدر كلما أمكن ذلك ويفضّلون عدم إنشاء صفحات البنية الأساسية. تمثل أطر عمل JavaScript من جانب العميل ومكتبات واجهة المستخدم جزءًا متزايدًا من استخدام البرامج مفتوحة المصدر. بيانات عن الأطر والمكتبات الثلاثة الأكثر شيوعًا من جانب العميل، برامج React وAngular وVue الذي:

• 72% من المشاركين في أول مطوّر سنويًا للويب لدى MDN استطلاع خاص بالمصمّمين تستخدم واحدًا على الأقل من هذه الأطر والمكتبات.
• أكثر من 320,000 موقع إلكتروني في أن أهم 5 ملايين عنوان URL حللها أرشيف HTTP تستخدم واحدة على الأقل من أطر العمل والمكتبات هذه.
• عند تجميعها حسب الوقت المنقضي، يستخدم 30 من أهم 100 عنوان URL واحدًا على الأقل من هذه الأطر المكتبات. (تم إجراء بحث على بيانات داخلية).

ويعني هذا أنّ الأدوات مفتوحة المصدر الأفضل يمكن أن تؤدي بشكل مباشر إلى تحسين تجربة الويب، ولهذا السبب. بدأ مهندسو Chrome العمل مباشرةً مع مؤلفي المكتبات وإطار العمل الخارجي.

المساهمات في أُطر عمل الويب

وتندرج أطر العمل التي يشيع استخدامها لإنشاء صفحات الويب وبنيتها ضمن فئتين:

• أُطر عمل واجهة المستخدم (أو المكتبات)، مثل Preact أو React أو Vue التي توفر إمكانية التحكم. فوق طبقة عرض التطبيق (من خلال نموذج مكون على سبيل المثال).
• أُطر عمل الويب، مثل Next.js وNuxt.js وGatsby التي توفر نظامًا شاملًا. باستخدام ميزات تستند إلى رأي المستخدم، مثل العرض من جهة الخادم عادةً ما تستخدم هذه الأطر الاستفادة من إطار عمل أو مكتبة لواجهة المستخدم لطبقة العرض.

يمكن للمطورين اختيار عدم استخدام أطر العمل ولكن عن طريق تجميع مكتبة طبقة عرض وجهاز التوجيه أو نظام تصميم أو عارض خادم وما إلى ذلك، فغالبًا ما ينشئون نوعهم الخاص من إطار العمل. تراعي أُطر عمل الويب العديد من هذه المخاوف بشكل تلقائي، على الرغم من أنّها تستند إلى رأي واسع.

توضّح هذه المشاركة العديد من التحسينات التي تم إدراجها مؤخرًا في أُطر عمل مختلفة. والأدوات، بما في ذلك المساهمات من فريق Chrome

Angular

شحن فريق Angular عددًا من التحسينات إلى الإصدار 8 من إطار العمل:

• التحميل التفاضلي حسب الإعداد التلقائي لتقليل رموز polyfill غير اللازمة في المتصفحات الجديدة.

• إتاحة بنية الاستيراد الديناميكي العادية لمسارات التحميل الكسول
• دعم مشغِّلي الويب لتشغيل العمليات في سلسلة محادثات في الخلفية منفصلة عن سلسلة التعليمات الرئيسية
• Ivy، تطبيق Angular الجديد محرك عرض يوفر أداء أفضل لإعادة التجميع وخفض عدد الحزم الأحجام، متاحة في وضع المعاينة المشروعات الحالية.

يمكنك معرفة المزيد عن هذه التحسينات في "الإصدار 8 من Angular" ويتطلع فريق Chrome إلى العمل معهم عن كثب في العام المقبل لتوفير المزيد من الميزات الأرض

مقتطف Next.js

Next.js هو إطار عمل على الويب يستخدم React كطبقة عرض. بالإضافة إلى هو نموذج مكونات واجهة المستخدم الذي يتوقعه العديد من المطورين من إطار عمل من جهة العميل، فإن Next.js يوفر عدد الميزات الافتراضية المضمنة:

• التوجيه باستخدام تقسيم الرموز التلقائي
• التجميع والتجميع (باستخدام Babel webpack)
• العرض من جهة الخادم
• آليات استرجاع البيانات على مستوى كل صفحة
• النمط المغلف (باستخدام styled-jsx)

تعمل Next.js على تحسين أحجام الحزم المصغرة، وساعد فريق Chrome في تحديد المجالات التي يمكننا للمساعدة في تحسين الأداء بشكل أكبر. يمكنك معرفة المزيد من المعلومات عن كل واحد منهم من خلال الاطّلاع على طلباته. للتعليقات (RFC) وطلبات السحب (PRs):

1. يشير ذلك المصطلح إلى استراتيجية محسَّنة لتقسيم حزمة الويب تنبعث من حِزم أكثر دقة، ما يقلّل من مقدار الرمز المكرّر الذي تم استرجاعه من خلال مسارات متعددة (RFC، العلاقات العامة).
2. التحميل التفاضلي مع نمط الوحدة النمطية أو عدم الوحدة ما يمكن أن يقلّل من إجمالي حجم JavaScript في تطبيقات Next.js بدون أي رمز بنسبة تصل إلى% 20. التغييرات (RFC، العلاقات العامة).
3. تتبُّع مقاييس الأداء المحسَّنة باستخدام User Timing API (PR).

ونعمل أيضًا على استكشاف ميزات أخرى لتحسين تجربة كل من المستخدم والمطوّر في استخدام Next.js، مثل:

• تفعيل الوضع المتزامن لإتاحة شرب تدريجي أو جزئي للمكوّنات.
• يشير هذا المصطلح إلى نظام مطابقة يستند إلى حزمة الويب ويحلّل جميع ملفات المصدر ومواد العرض التي تم إنشاؤها من أجل عرض أخطاء وتحذيرات أفضل (RFC).

Nuxt.js

Nuxt.js هو إطار عمل ويب يجمع بين Vue.js مع مكتبات مختلفة ويقدمون رأيهم. وعلى غرار Next.js، فإنها تتضمن العديد من الميزات الجاهزة:

• التوجيه باستخدام تقسيم الرموز التلقائي
• التجميع والتجميع (باستخدام Babel webpack)
• العرض من جهة الخادم
• الجلب غير المتزامن للبيانات لكل صفحة
• مخزن البيانات التلقائي (Vuex)

وجنبًا إلى جنب مع العمل مباشرةً على تحسين أداء الأدوات المختلفة، عملنا على توسيع نطاق لإطار العمل بهدف تقديم دعم مالي للمؤسسات المفتوحة المصدر وأطر العمل والمكتبات. مع أحدث الدعم لـ Nuxt.js، وعدد قليل من المقرر أن يتم إطلاق هذه الميزات في المستقبل القريب بما في ذلك العرض الذكي للخادم والصور التحسينات.

Babel

لقد أحرزنا تقدمًا في تحسين أداء أداة أساسية مهمة في جميع أُطر العمل المذكورة أعلاه، وهي Babel.

تقوم Babel بتجميع التعليمات البرمجية التي تحتوي على بناء جملة أحدث في تعليمات برمجية يمكن للمتصفحات المختلفة فهمها. أصبح من الشائع استخدام @babel/preset-env لاستهداف المتصفحات الحديثة التي يمكن فيها تحديد استهدافات مختلفة للمتصفّح لتوفير رمز polyfill مختلف المطلوبة لجميع البيئات المختارة. إحدى طرق تحديد الأهداف هي استخدام <script type="module"> لاستهداف جميع المتصفّحات المتوافقة مع ES الوحدات.

ولتحسين هذه الحالة، أطلقنا إعدادًا مسبقًا جديدًا، وهو @babel/preset-modules وبدلاً من تحويل الصيغة الحديثة إلى البنية القديمة لتجنّب أخطاء المتصفّح، يعمل preset-modules على إصلاح كل خطأ محدّد عن طريق الانتقال إلى أقرب بناء جملة حديث ممكن غير معطّل. ينتج عن ذلك رمز حديث يمكن إرساله تقريبًا غير معدّل في معظم المتصفحات.

سيستفيد أيضًا المطوّرون الذين يستخدمون preset-env من هذه التحسينات بدون الحاجة إلى اتّخاذ أي إجراء، إذ سيتم دمجها قريبًا في "preset-env" أيضًا

ما هي الخطوات التالية؟

إن العمل عن كثب مع أطر ومكتبات مفتوحة المصدر لتوفير تجارب أفضل يساعد يدرك فريق Chrome مدى أهميته للمستخدمين والمطوّرين على حد سواء.

إذا كنت تعمل على إطار عمل على الويب أو مكتبة واجهة مستخدم أو أي شكل من أشكال أدوات الويب (أداة التجميع أو التجميع أو linter)، تقديم طلب للاستفادة من تمويل إطار العمل