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

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

حسين جردية

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

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

كيف نجعل الويب أفضل؟

يتمثّل هدف كل فرد في فريق Chrome في تحسين أداء الويب. نحن نعمل على تحسين واجهات برمجة التطبيقات (API) الخاصة بالمتصفّحات والنموذج 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 غير الضرورية في المتصفحات الأحدث

تقليل حجم حزمة angular.io من خلال إصدارات تفاضلية (بدءًا من الإصدار 8 من Angular)

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

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

Next.js

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

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

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

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

Barnebys.com، وهو محرّك بحث كبير للتحف والمقتنيات، شهد انخفاضًا بنسبة% 23 في إجمالي محتوى JavaScript بعد تفعيل ميزة التقسيم الدقيق

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

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

مثال على خطأ إصدار المطابقة في Next.js (النموذج الأولي)

Nuxt.js

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

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

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

ملاحظة: يعمل الصندوق المالي على تسريع الجهود التي تبذلها مختلف الأطر والمكتبات بهدف تحسين أدائها. إذا كنت تعمل على أداة مفتوحة المصدر وتحتاج إلى دعم، يُرجى تقديم طلب.

Babel

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

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

ملاحظة: لمزيد من المعلومات حول كيفية الاستفادة من وحدات ES لتقليل رموز polyfill التي يتم شحنها إلى المتصفّحات التي لا تحتاج إليها، يمكنك الاطّلاع على عرض الرموز الحديثة في المتصفّحات الحديثة لتحميل الصفحات بشكلٍ أسرع.

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

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

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

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

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