نحن في فريق Chrome نهتم بتجربة المستخدم ومنظومة الويب المتكاملة المزدهرة. نريد أن يحصل المستخدمون على أفضل تجربة ممكنة على الويب، ليس فقط عند استخدام المستندات الثابتة، ولكن أيضًا عند استخدام التطبيقات الغنية بالتفاعل.
تلعب أدوات وإطارات العمل المفتوحة المصدر دورًا كبيرًا في تمكين المطوّرين من إنشاء تطبيقات حديثة للويب، مع توفير تجارب جيدة للمطوّرين أيضًا. وتوفّر هذه الأطر والأدوات إمكانات فعّالة للشركات بمختلف أحجامها، فضلاً عن الأفراد الذين يبنون تطبيقات للويب.
نعتقد أنّ الأطر يمكن أن تلعب أيضًا دورًا كبيرًا في مساعدة المطوّرين في الجوانب الرئيسية للجودة، مثل الأداء وإمكانية الاستخدام والأمان والاستعداد للأجهزة الجوالة. بدلاً من مطالبة كل مطوّر ومالك موقع إلكتروني بأن يصبح خبيرًا في هذه المجالات ومواكبة أفضل الممارسات المتغيّرة باستمرار، يمكن أن يقدّم الإطار المرجعي حلولاً مدمجة لدعم هذه المجالات. ويمنح ذلك المطوّرين مزيدًا من القوة ويمكّنهم من التركيز على إنشاء ميزات المنتجات.
باختصار، نسعى إلى أن تصبح جودة تجربة المستخدم العالية نتيجة عرضية لإنشاء تطبيقات للويب.
Aurora: تعاون بين Chrome وأُطر عمل وأدوات الويب المفتوحة المصدر
على مدار عامَين تقريبًا، عملنا على تحسين أداء الويب باستخدام بعض أطر العمل الأكثر رواجًا، مثل Next.js وNuxt وAngular. وقد ساهمنا أيضًا في تمويل أدوات ومَكتبات رائجة، مثل Vue وESLint وwebpack. اليوم، سنمنح هذا الجهد اسمًا: Aurora.
الشفق هو ظاهرة ضوئية طبيعية تشعّ في السماء. بما أنّنا نحاول مساعدة تجارب المستخدمين التي تم إنشاؤها باستخدام إطارات العمل على أن تبدو رائعة، اعتقدنا أنّه هذا الاسم مناسب.
سنشارك في الأشهر المقبلة المزيد من التفاصيل حول Aurora. هذا هو تعاون بين فريق صغير من مهندسي Chrome (المعروفين داخلياً باسم IDE) ومؤلفي إطار العمل. هدفنا هو تقديم أفضل تجربة ممكنة للمستخدمين في التطبيقات العلنية بغض النظر عن المتصفّح الذي تستخدمه لعرضها.
ما هي استراتيجيتنا؟
لقد تعلمنا في Google الكثير من خلال استخدام الأطر والأدوات لإنشاء تطبيقات الويب على نطاق واسع والحفاظ عليها، مثل "بحث Google" و"خرائط Google" و"بحث الصور" و"صور Google" وما إلى ذلك. لقد اكتشفنا كيف يمكن أن تؤدي الأطر إلى دور حاسم في ضمان جودة التطبيقات المتوقّعة من خلال توفير إعدادات تلقائية قوية وأدوات مصمّمة خصيصًا.
تتمتع أُطر العمل بوجهة نظر فريدة للتأثير في كلّ من تجربة المستخدم وتصميم تجربة المستخدم، لأنّها تغطّي النظام بأكمله: العميل والخادم وبيئتَي التطوير والنشر، كما أنّها تدمج أدوات مثل المُجمِّع وأدوات تجميع التطبيقات والمدقّق وغيرها.
عندما تكون الحلول مدمجة في إطار العمل، يمكن لفِرق المطوّرين استخدام هذه الحلول وتركيز وقتهم على أهم ما يتعلق بالمنتج، وهو طرح ميزات رائعة للمستخدمين.
بينما نعمل على تحسين الأدوات التي تتوفر في كل طبقة من الحزمة، تدير الإطارات المرجعية مثل Next.js وNuxt وAngular CLI كل خطوة من خطوات دورة حياة التطبيق. لهذا السبب، ولأنّ استخدام React هو الأكبر ضمن منظومة إطار عمل واجهة المستخدم الأساسية المتكاملة، بدأت معظم عمليات التحسين التي أجريناها بإثبات كفاءتها في Next.js قبل التوسّع إلى بقية المنظومة المتكاملة.
تساعد Aurora في تحقيق النجاح على نطاق واسع من خلال توفير حلول للطبقة المناسبة من حِزم التكنولوجيا الشائعة. من خلال سد الفجوة بين المتصفّحات والأُطر، تسمح هذه الميزة بالحصول على جودة عالية كنتيجة ثانوية لعملية التصميم على الويب، كما تعمل كحلقة ملاحظات لتحسين منصة الويب.
ما هي عملية عملنا؟
في ما يلي مبادئنا التي نتّبعها في كيفية ربط Aurora بين المتصفّحات ومنظومة المطوّرين المتكاملة: التواضع والفضول والاستفسار العلمي والواقعية. نحن نعمل مع مؤلفي الإطارات المرجعية على إجراء التحسينات، ونتعاون مع المنتدى وننفّذ إجراءات التدقيق اللازمة قبل طرح أي تغييرات.
في ما يلي ملخّص للخطوات التي نتّبعها عند تطوير أي ميزة جديدة:
- تحديد المشاكل في تجربة المستخدم في حِزمة تطبيقات رائجة باستخدام تطبيقات تمثيلية
- نماذج الحلول التي تعالج هذه المشكلة، مع التركيز على "الإعدادات التلقائية القوية"
- تأكَّد من الميزة باستخدام حِزمة إطار عمل أخرى لضمان إمكانية تكيُّفها.
- التحقّق من صحة الميزة من خلال إجراء تجارب في بعض التطبيقات العلنية، وعادةً ما يتم ذلك من خلال اختبارات تجريبية لقياس الأداء
- تحسين التصميم باستخدام عملية طلب الحصول على التعليقات، والردّ على ملاحظات المنتدى
- ضَع الميزة في حزمة تطبيقات رائجة، عادةً ما تكون خلف علامة.
- فعِّل الميزة في تطبيق تمثيلي في قناة الإصدار العلني لتقييم الجودة وتكامل سير عمل المطوّر.
- يمكنك قياس تحسين الأداء من خلال تتبُّع المقاييس في التطبيقات النموذجية التي تم طرحها والتي تم استخدام الميزة فيها أو ترقيتها.
- فعِّل الميزة كإعداد تلقائي في الحزمة، ليستفيد منها جميع المستخدمين الذين يُجريون الترقية.
- بعد إثبات ذلك، يمكنك العمل مع إطارات عمل إضافية لطرح الميزة.
- تحديد الفجوات في منصة الويب، من خلال حلقة ملاحظات
- انتقِل إلى المشاكل التالية.
تتم مشاركة الأدوات والمكوّنات الإضافية الأساسية (webpack وBabel وESLint وTypeScript وما إلى ذلك) في العديد من الإطارات الأساسية. يساعد ذلك في إنشاء تأثيرات متسلسلة، حتى عند المساهمة في حزمة إطار عمل واحدة.
بالإضافة إلى ذلك، يقدّم صندوق Chrome Framework funding لأدوات ومكتبات مفتوحة المصدر. نأمل أن يكون هناك تداخل كافٍ في المشاكل وطبقات الحلول لجهودنا أعلاه لتطبيقها على إطارات العمل والأدوات الأخرى، ولكننا ندرك أنّه يمكننا فعل المزيد. لتحقيق ذلك، نريد أن نؤدي دورنا في ضمان نجاح المكتبات والأُطر التي تساعد المطوّرين في تحقيق النجاح. لهذا السبب، سنواصل الاستثمار في صندوق Chrome Framework Fund. حتى الآن، ساعدت هذه الميزة في العمل على Webpack 5 وNuxt وتحسين الأداء وتحسينات على ESLint.
ما هي النتائج التي حقّقناها حتى الآن؟
لقد ركّزنا عملنا على التحسينات الأساسية للموارد، مثل الصور وJavaScript وCSS والخطوط. لقد طرحنا عددًا من التحسينات لتحسين الإعدادات التلقائية لإطارات عمل متعددة، بما في ذلك:
- عنصر صورة في Next.js يجمع أفضل الممارسات لتحميل الصور، يليه تعاون مع Nuxt في ما يتعلّق بذلك. أدى استخدام هذا المكوّن إلى تحسينات كبيرة في أوقات عرض المحتوى وتغيُّر التنسيق (على سبيل المثال، انخفاض بنسبة% 57 في سرعة عرض أكبر جزء من المحتوى على الصفحة وانخفاض بنسبة% 100 في متغيّرات التصميم التراكمية على nextjs.org/give).
- تضمين مبرمَج لملف CSS في تعريفات خطوط الويب في وقت التصميم تم طرح هذه الميزة في مكتبة برمجة التطبيقات Angular (Google Fonts) وNext.js (Google Fonts وAdobe Fonts)، ما أدّى إلى تحسينات ملحوظة في مقياسَي "سرعة عرض أكبر جزء من المحتوى على الصفحة" و"سرعة عرض أول جزء من المحتوى على الصفحة" (مثال).
- تضمين ملف CSS المهم باستخدام Critters في كلّ من Angular وNext.js لتقليل أوقات عرض الصفحة أدّى ذلك إلى تحسين نقاط الأداء في Lighthouse من 20 إلى 30 نقطة في تطبيق Angular نموذجي واسع النطاق عند دمج هذه الميزة مع ميزة تضمين CSS للخطوط.
- دعم ESLint جاهز للاستخدام في Next.js يتضمّن مكوّنًا إضافيًا مخصّصًا وإعدادات قابلة للمشاركة لتسهيل رصد المشاكل الشائعة المتعلّقة بالإطار في وقت التصميم، ما يؤدي بدوره إلى تحسين أداء التحميل بشكلٍ أكثر قابلية للتنبؤ.
- مقدمة عن أداة إعادة توجيه الأداء المضمّنة في Create React App وNext.js لتوفير إحصاءات أسهل حول أداء الصفحة من خلال مؤشرات أداء الويب وغيرها من المقاييس المخصّصة
- تقسيم دقيق مضمّن في Next.js وGatsby، مما يؤدي إلى تقليل أحجام الحِزم بنسبة تتراوح بين %30 و%70 مع تحسين أداء التخزين المؤقت وقد أصبح هذا هو الإعداد التلقائي في Webpack 5.
- مجموعة polyfill منفصلة للمتصفّحات القديمة، بالتعاون مع فريق Next.js، لتحسين حجم الحِزمة في المتصفّحات الحديثة
تمّت برمجة كلّ ميزة من هذه الميزات لتفعيلها تلقائيًا أو تحتاج فقط إلى موافقة بسيطة. وهذا أمر ضروري لضمان تمكّن المطوّرين من الاستفادة من مزاياها بسهولة بدون زيادة التعقيد في سير عملهم.
ما هي الخطط التي ننوي تنفيذها في عام 2021؟
خلال الفترة المتبقية من هذا العام، سنركّز على مساعدة مجموعات الإطارات في تحسين تجربة المستخدم ومستوى أدائها في مقاييس مثل "مؤشرات أداء الويب الأساسية". سيتضمّن هذا العمل ما يلي:
- الامتثال لفرض أفضل الممارسات يمكنك الاطّلاع على مشاركة المدونة لمزيد من المعلومات.
- تحسين أداء التحميل الأولي من خلال الاستفادة من تعاوناتنا لتحسين الصور، الخطوط وCSS الأساس
- تحميل النصوص البرمجية التابعة لجهات خارجية بأقل تأثير ممكن في الأداء من خلال الاستفادة من الأساس الذي نستند إليه في العمل على مكوّن النص البرمجي وإجراء مزيد من التحليل العميق للتعرّف على أفضل طريقة لترتيب الرموز البرمجية التابعة لجهات خارجية وتسلسلها
- أداء JavaScript على نطاق واسع (مثلاً، إتاحة مكونات React Server في Next.js)
سيسعى فريقنا إلى نشر معلومات أكثر بانتظام حول طلبات الحصول على ملاحظات ومراجعات المستخدِمين ومستندات التصميم المتعلّقة بهذه الأفكار حتى يتمكّن أي إطار عمل أو مطوّر يريد متابعة هذه الأفكار من فعل ذلك.
الخاتمة
يتطلع فريق Aurora (Shubhie، Houssein، Alex، Gerald، Ralph، Addy، Kara، Keen، Katie) إلى مواصلة العمل بجدية مع منتدى إطار العمل المفتوح المصدر لتحسين الإعدادات التلقائية لتجربة المستخدم في Next.js وNuxt وAngular. سنوسّع نطاق تفاعلنا ليشمل المزيد من الأطر والأدوات بمرور الوقت. يُرجى متابعتنا للحصول على المزيد من مشاركات المدونات، والمحادثات وطلبات الحصول على مراجعات من فريقنا خلال العام المقبل.