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

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

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

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

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

البنية

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

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

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

يُعدّ core-list من العناصر الأكثر ملاءمةً للتعامل مع الكثير من المحتوى.

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

الانتقالات

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

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

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

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

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

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

من ناحية أخرى، يمكن لجهاز التوجيه التعريفي (مثل جهاز توجيه التطبيقات) أن يجمع فعليًا بين التوجيه و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.

سيؤدي استخدام أداة "فلكن" إلى دمج عمليات الاستيراد في حزمة واحدة، ما يقلّل كثيرًا من عدد طلبات HTTP التي يرسلها تطبيقك.

بلا إنترنت

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

نشر جيك أرتشيبالد مؤخرًا كتاب طبخ مذهلاً لأنماط العاملين في الخدمات، ولكن سأقدم لك بداية سريعة لمساعدتك في ذلك:

يمكن إنهاء عملية تثبيت مشغّل الخدمات بسهولة. أنشئ ملف worker.js وسجِّله عند تشغيل التطبيق.

من المهم تحديد موقع worker.js في جذر تطبيقك، لأنّ ذلك يسمح باعتراض الطلبات من أي مسار في تطبيقك.

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

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

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

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