خلال العام الماضي، قضى فريق Polymer الكثير من الوقت في تعليم المطوّرين كيفية إنشاء عناصرهم الخاصة. وقد أدّى ذلك إلى إنشاء منظومة متكاملة تنمو بسرعة، ويعود الفضل في ذلك إلى حد كبير إلى عناصر Core وPaper في Polymer وعناصر Brick التي أنشأها فريق Mozilla.
عندما يصبح المطوّرون أكثر دراية بإنشاء عناصرهم الخاصة ويبدأون التفكير في إنشاء تطبيقات، يطرح ذلك عددًا من الأسئلة:
- كيف يجب تنظيم واجهة مستخدم تطبيقك؟
- كيف يتم الانتقال بين الحالات المختلفة؟
- ما هي بعض الاستراتيجيات لتحسين الأداء؟
- كيف يجب تقديم تجربة بلا إنترنت؟
في مؤتمر Chrome Dev Summit، حاولت الإجابة عن هذه الأسئلة من خلال إنشاء تطبيق صغير لجهات الاتصال وتحليل العملية التي خضعت لها لإنشائه. إليك ما توصّلنا إليه:
البنية
إنّ تقسيم التطبيق إلى أجزاء وحدات يمكن دمجها وإعادة استخدامها هو مبدأ أساسي في Web Components. تسهِّل عناصر core-* وpaper-* في Polymer البدء بقطع صغيرة، مثل paper-toolbar وpaper-icon-button.
ومن خلال ميزة التركيب، يمكنك دمجها مع أي عدد من العناصر لإنشاء إطار عمل للتطبيق.
بعد إنشاء إطار عمل عام، يمكنك تطبيق أنماط CSS الخاصة بك لتحويله إلى تجربة فريدة لعلامتك التجارية. إنّ استخدام المكوّنات لتنفيذ ذلك يُتيح لك إنشاء تجارب مختلفة جدًا مع الاستفادة من العناصر الأساسية نفسها لبناء التطبيقات. بعد وضع إطار عمل، يمكنك الانتقال إلى التفكير في المحتوى.
إنّ core-list هو أحد العناصر المناسبة بشكل خاص للتعامل مع الكثير من المحتوى.
يمكن ربط core-list بمصدر بيانات (وهو مصفوفة من العناصر بشكل أساسي)، وسيتم وضع ختم على مثيل نموذج لكل عنصر في المصفوفة. ضمن النموذج، يمكنك الاستفادة من إمكانات نظام ربط البيانات في Polymer لربط المحتوى بسرعة.
الانتقالات
بعد تصميم أقسام تطبيقك المختلفة وتنفيذها، تكون المهمة التالية هي معرفة كيفية التنقّل بينها.
على الرغم من أنّ core-animated-pages لا يزال عنصرًا تجريبيًا، إلا أنّه يقدّم نظامًا للرسوم المتحرّكة يمكن توصيله ويمكن استخدامه للانتقال بين الحالات المختلفة في تطبيقك.
ولكنّ الصور المتحركة ليست سوى نصف اللغز، إذ يحتاج التطبيق إلى دمج هذه الصور المتحركة مع جهاز توجيه لإدارة عناوين URL الخاصة به بشكل صحيح.
في عالم Web Components، يتوفّر توجيه بأسلوبَين: توجيه إلزامي وتوجيه تعريفي. يمكن أن يكون الجمع بين core-animated-pages مع أي من الطريقتَين صالحًا استنادًا إلى احتياجات مشروعك.
يمكن لجهاز توجيه آمر (مثل Director في Flatiron) الاستماع إلى مسار مطابق، ثم توجيه core-animated-pages لتعديل العنصر المحدّد.
يمكن أن يكون ذلك مفيدًا إذا كنت بحاجة إلى تنفيذ بعض الإجراءات بعد مطابقة مسار معيّن وقبل الانتقال إلى القسم التالي.
من ناحية أخرى، يمكن لجهاز التوجيه التعريفي (مثل app-router) دمج التوجيه وcore-animated-pages في عنصر واحد، ما يجعل إدارة كليهما أكثر سلاسة.
إذا كنت تريد التحكّم بشكل أدق، يمكنك الاطّلاع على مكتبة مثل more-routing، والتي يمكن دمجها مع core-animated-pages باستخدام ربط البيانات، وقد تمنحك أفضل ما في العالمَين.
الأداء
أثناء تطوير تطبيقك، عليك الانتباه إلى نقاط الاختناق في الأداء، خاصةً أيّ شيء مرتبط بالشبكة، لأنّ هذا الجزء غالبًا ما يكون أبطأ جزء في تطبيق الويب المتوافق مع الأجهزة الجوّالة.
يمكنك تحسين الأداء بسهولة من خلال تحميل مكونات Web Components القابلة للاستبدال بشكل مشروط.
ما مِن سبب لتحمّل كل هذه التكلفة إذا كانت المنصة تتوفّر فيها ميزة الدعم الكامل. في كل إصدار من مستودع webcomponents.js الجديد، تم أيضًا تقسيم مجموعات polyfills إلى ملفات مستقلة. يكون ذلك مفيدًا إذا كنت تريد تحميل مجموعة فرعية من مكونات 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 من خلال أداة مثل Vulcanize.
سيؤدي استخدام أداة Vulcanize إلى تجميع عمليات الاستيراد في حِزمة واحدة، ما يؤدي إلى خفض عدد طلبات HTTP التي يرسلها تطبيقك بشكلٍ كبير.
بلا إنترنت
ولكن لا يحلّ إنشاء تطبيق عالي الأداء مشكلة المستخدم الذي لا يملك اتصالاً بالإنترنت أو يملك اتصالاً ضعيفًا. بعبارة أخرى، إذا كان تطبيقك لا يعمل بلا اتصال بالإنترنت، هذا يعني أنّه ليس تطبيقًا متوافقًا مع الأجهزة الجوّالة. يمكنك اليوم استخدام ذاكرة التخزين المؤقت للتطبيق التي يُساء فهمها كثيرًا لتنزيل الموارد بلا اتصال بالإنترنت، ولكن في المستقبل، من المفترض أن تُحسِّن مشغّلات الخدمات تجربة التطوير بلا اتصال بالإنترنت.
نشر "جاك أرشيبالد" مؤخرًا كتاب طبخ رائعًا لنماذج مهام الخدمة، ولكن سأقدّم لك الخطوات السريعة للبدء:
إنّ تثبيت عامل الخدمة سهل جدًا. أنشئ ملف worker.js وسجِّله عند تشغيل تطبيقك.
من المهم تحديد موقع worker.js في جذر تطبيقك، ما يتيح له اعتراض الطلبات الواردة من أي مسار في تطبيقك.
في معالِج التثبيت الخاص بالعامل، أُخزِّن عددًا كبيرًا من الموارد (بما في ذلك البيانات التي تشغّل التطبيق).
يتيح ذلك لتطبيقي تقديم تجربة احتياطية على الأقل للمستخدم إذا كان يستخدمه بلا إنترنت.
إلى الأمام.
تمثل Web Components إضافة كبيرة إلى منصة الويب، وهي لا تزال في مراحلها الأولى. ومع توفّر هذه الميزة في المزيد من المتصفّحات، سيكون علينا نحن، منتدى المطوّرين، تحديد أفضل الممارسات لتنظيم تطبيقاتنا. تقدّم لنا الحلول أعلاه نقطة بداية، ولكن لا يزال هناك الكثير من المعلومات التي يجب معرفتها. ونتمنى لك التوفيق في إنشاء تطبيقات أفضل.