خلال العام السابق، قضى فريق البوليمر الكثير من الوقت في تعليم المطوّرين كيفية إنشاء العناصر الخاصة بهم. وقد أدّى ذلك إلى إنشاء منظومة متكاملة سريعة النمو، بدعم كبير من العناصر الأساسية والورقية في البوليمر، بالإضافة إلى العناصر الأساسية التي أنشأها الفريق في Mozilla.
عندما يصبح المطورون أكثر دراية بإنشاء العناصر الخاصة بهم ويبدأون في التفكير في إنشاء التطبيقات، يفتح ذلك عددًا من الأسئلة:
- كيف يجب تصميم واجهة المستخدم في تطبيقك؟
- كيف تنقل عبر الولايات المختلفة؟
- ما هي بعض الاستراتيجيات لتحسين الأداء؟
- وكيف يمكنك توفير تجربة بلا إنترنت؟
بالنسبة إلى مؤتمر Chrome Dev Summit، حاولت الإجابة عن هذه الأسئلة من خلال إنشاء تطبيق صغير لجهات الاتصال وتحليل العملية التي مررت بإنشائها. إليك ما خطر في ذهني:
البنية
يعد تقسيم تطبيق إلى أجزاء معيارية يمكن دمجها وإعادة استخدامها هو المستأجر الرئيسي لمكونات الويب. تسهّل العناصر الأساسية* والورقية* في البوليمر البدء بقِطع صغيرة، مثل شريط الأدوات الورقي Paper-bar وpaper-icon-button.
ومن خلال قوة التكوين، يمكنك دمجها مع أي عدد من العناصر لإنشاء طبقة استخدام.
بعد تنفيذ قاعدة عامة، يمكنك تطبيق أنماط CSS الخاصة بك لتحويلها إلى تجربة فريدة لعلامتك التجارية. يكمن جمال إجراء ذلك باستخدام المكونات في أنها تتيح لك إنشاء تجارب مختلفة جدًا مع الاستفادة في نفس الوقت الأساسيات لإنشاء التطبيق. مع وجود سقالة، يمكنك المضي قدمًا للتفكير في المحتوى.
core-list هو أحد العناصر المناسبة بشكل خاص للتعامل مع الكثير من المحتوى.
يمكن ربط core-list بمصدر بيانات (مصفوفة من العناصر في الأساس). وسيتم استبعاد مثيل نموذج لكل عنصر في المصفوفة. ضمن النموذج، يمكنك الاستفادة من فعالية نظام ربط البيانات في البوليمر لتوصيل المحتوى بسرعة.
الانتقالات
مع تصميم الأقسام المختلفة لتطبيقك وتنفيذها، تتمثل المهمة التالية في معرفة كيفية التنقل فعليًا بينها.
على الرغم من أنّ السمة core-animated-pages لا تزال عنصرًا تجريبيًا، فهي توفّر نظام صور متحرّكة يمكن توصيله ويمكن استخدامه للانتقال بين حالات مختلفة في تطبيقك.
لكن الرسوم المتحركة ليست سوى نصف اللغز، حيث يحتاج التطبيق إلى دمج هذه الرسوم المتحركة مع جهاز توجيه لإدارة عناوين URL الخاصة به بشكل صحيح.
في عالم مكوّنات الويب يأتي توجيه مكوّنات الويب في نكهتين: الحد الأقصى والتوضيحي. قد يكون الجمع بين السمة core-animated-pages وأيٍّ من النهجَين صالحًا وفقًا لاحتياجات مشروعك.
يمكن لجهاز التوجيه الأساسي (مثل Flatiron's Director) الاستماع إلى المسار المطابق، ثم توجيه core-animated-pages إلى تعديل العنصر الذي تم اختياره.
ويمكن أن يكون ذلك مفيدًا إذا كنت بحاجة إلى القيام ببعض الأعمال بعد مطابقة المسار وقبل نقل القسم التالي.
من ناحية أخرى، يمكن لجهاز التوجيه التعريفي (مثل app-router) دمج التوجيه وcore-animated-pages في عنصر واحد، وبذلك تصبح إدارة الجهازين أكثر سلاسة.
إذا كنت ترغب في التحكم بشكل أكثر دقة، يمكنك إلقاء نظرة على مكتبة مثل المزيد من التوجيه، والتي يمكن دمجها مع core-animated-pages باستخدام ربط البيانات وربما منحك أفضل ما في الميزتين.
عروض أداء
نظرًا لأن تطبيقك قيد التطوير، فيجب عليك مراقبة المؤثِّرات السلبية في الأداء، وخاصةً أي شيء مرتبط بالشبكة، لأنه غالبًا ما يكون هذا هو الجزء الأبطأ في تطبيقات الويب على الأجهزة الجوّالة.
تحقيق النجاح السهل في الأداء من خلال تحميل رموز polyfill لمكوّنات الويب بشكل مشروط.
وبالتالي، لا داعي لتحمّل كل هذه التكاليف إذا كانت المنصّة متاحةً لدعمها بشكل كامل. في كل إصدار من مستودع webcomponents.js الجديد، يتم أيضًا تقسيم رموز polyfill إلى ملفات مستقلة. يعد هذا مفيدًا إذا كنت تريد تحميل مجموعة فرعية من رموز polyfill بشكل مشروط.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
هناك أيضًا مكاسب كبيرة في الشبكة يمكن تحقيقها من تشغيل جميع عمليات استيراد HTML من خلال أداة مثل Sense.
ستعمل ميزة Sense على ربط عمليات الاستيراد في حزمة واحدة، بشكل كبير، ما يقلّل من عدد طلبات HTTP التي يُجريها تطبيقك.
بلا إنترنت
ولكن مجرد إنشاء تطبيق فعال لا يحل المعضلة التي تواجه المستخدم مع القليل من الاتصال أو عدم الاتصال به. بمعنى آخر، إذا لم يعمل تطبيقك بلا اتصال بالإنترنت، لن يكون تطبيقًا متوافقًا مع الأجهزة الجوّالة. والآن يمكنك استخدام ذاكرة التخزين المؤقت للتطبيقات غير المتوافقة إلى حد كبير من أجل استخدام مواردك في وضع عدم الاتصال بالإنترنت، ولكن في المستقبل، من المفترض أن يجعل عامل الخدمات تجربة التطوير بلا اتصال بالإنترنت أكثر سلاسة.
نشر جيك أرشيبالد مؤخرًا كتاب طبخ رائع عن أنماط عمال الخدمات، ولكن سأقدم لك البدء السريع:
يسهل تثبيت مشغّل الخدمات. أنشِئ ملف worker.js وسجِّله عند تشغيل التطبيق.
من المهم تحديد موقع worker.js في جذر التطبيق، لأنّ ذلك يسمح له باعتراض الطلبات من أي مسار في تطبيقك.
في معالج التثبيت لدى العامل، أخزّن مؤقتًا مجموعة من الموارد (بما في ذلك البيانات التي تشغّل التطبيق).
يتيح هذا الإجراء لتطبيقي توفير تجربة احتياطية على الأقل للمستخدم إذا كان يدخل إليه بلا اتصال بالإنترنت.
من الآن فصاعدًا!
تعد مكونات الويب إضافة كبيرة إلى النظام الأساسي للويب، ولا تزال في صغرها. فمع دخول هذه التطبيقات إلى المزيد من المتصفحات، فإن الأمر متروك لنا، نحن منتدى المطورين، لمعرفة أفضل الممارسات لتنظيم بنية التطبيقات. تمنحنا الحلول أعلاه نقطة بداية، ولكن لا يزال هناك الكثير لنتعلمه. ومواصلة إنشاء تطبيقات أفضل.