لنبدأ في إنشاء بعض التطبيقات باستخدام البوليمر.

على مدار العام السابق، أمضى فريق البوليمر الكثير من الوقت في تعليم المطوّرين كيفية إنشاء العناصر الخاصة بهم. وقد أدّى هذا إلى إنشاء نظام بيئي سريع النمو يعتمد بشكل كبير على العناصر الأساسية والورقية في شركة Polymer، وعناصر الفريق التي أنشأها الفريق في Mozilla.

عندما يصبح المطورون أكثر دراية بإنشاء العناصر الخاصة بهم ويبدأون في التفكير في إنشاء التطبيقات، يفتح ذلك عددًا من الأسئلة:

• كيف يجب هيكلة واجهة المستخدم في تطبيقك؟
• كيف تنتقل إلى ولايات مختلفة؟
• اذكر بعض الاستراتيجيات لتحسين الأداء؟
• وكيف يمكنك توفير تجربة بلا إنترنت؟

بالنسبة إلى مؤتمر Chrome Dev Summit، فقد حاولت الإجابة عن هذه الأسئلة من خلال إنشاء تطبيق جهات اتصال صغير وتحليل العملية التي مررت لإنشائها. هذا ما توصلتُ إليه:

البنية

يعد تقسيم تطبيق إلى قطع معيارية يمكن دمجها وإعادة استخدامها هو المستأجر الرئيسي لمكونات الويب. وتسهّل العناصر الأساسية* والورقية* في البوليمر بدء استخدام القطع الصغيرة، مثل core-toolbar وpaper-icon-button...

...ومن خلال قوة التكوين، يمكنك دمجها مع أي عدد من العناصر لإنشاء طبقة ثابتة للتطبيق.

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

تُعدّ core-list أحد العناصر المناسبة بشكل خاص للتعامل مع الكثير من المحتوى.

يمكن ربط core-list بمصدر بيانات (في الأساس مصفوفة من العناصر)، ولكل عنصر في المصفوفة، يتم استبعاد مثيل النموذج لكل عنصر في المصفوفة. ضمن النموذج، يمكنك الاستفادة من قوة نظام ربط البيانات في البوليمر لتوصيل المحتوى سريعًا.

الانتقالات

مع تصميم وتنفيذ الأقسام المختلفة لتطبيقك، فإن المهمة التالية هي معرفة كيفية التنقل بينها فعليًا.

على الرغم من أنّ core-animated-pages لا يزال عنصرًا تجريبيًا، فهو يوفّر نظام صور متحركة قابل للتوصيل يمكن استخدامه للانتقال بين الحالات المختلفة في تطبيقك.

ولكن الرسوم المتحركة ليست سوى نصف اللغز، حيث يحتاج التطبيق إلى دمج هذه الرسوم المتحركة مع جهاز التوجيه لإدارة عناوين URL الخاصة به بشكل صحيح.

في عالم مكونات الويب، يأتي توجيه مكونات الويب بنكهتين: الأمر الضروري والتوضيحي. قد يكون الجمع بين core-animated-pages وأيٍّ من الأسلوبين صالحًا بناءً على احتياجات مشروعك.

بإمكان جهاز التوجيه الأساسي (مثل Flatiron's Director) الاستماع إلى مسار مطابق، ثم توجيه core-animated-pages لتحديث العنصر الذي تم اختياره.

وقد يكون ذلك مفيدًا إذا كنت بحاجة إلى القيام ببعض الأعمال بعد تطابق المسار وقبل انتقال القسم التالي من خلاله.

من ناحية أخرى، يمكن لجهاز التوجيه الإعلامي (مثل جهاز توجيه التطبيقات) دمج التوجيه وcore-animated-pages في عنصر واحد، بحيث تصبح إدارة الاثنين أكثر سلاسة.

إذا كنت ترغب في التحكم بشكل أكثر دقة، يمكنك البحث في مكتبة مثل more-routing، حيث يمكن دمجها مع core-animated-pages باستخدام ربط البيانات، وربما تمنحك هذه المكتبة أفضل ما في الميزتين.

عروض أداء

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

يأتي مكاسب الأداء السهل من خلال التحميل المشروط لعناصر متعددة لمكونات الويب.

وما مِن سبب لتحمّل كل هذه التكاليف إذا كانت المنصّة توفّر الدعم الكامل لها. في كل إصدار من مستودع 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 في جذر تطبيقك، لأنّ ذلك يسمح باعتراض الطلبات من أي مسار في تطبيقك.

في معالج التثبيت للعامل، أخزّن عبءًا من الموارد في ذاكرة التخزين المؤقت (بما في ذلك البيانات التي تشغّل التطبيق).

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

من الآن فصاعدًا!

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