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