Polymer.js: مستقبل تطوير تطبيقات الويب؟

منذ حوالي عام في مايو 2013 ، أطلقت Google Polymer.js.

ها نحن هنا بعد عام. والسؤال هو: هل هي جاهزة لوقت الذروة؟ هل من الممكن حتى الآن إنشاء تطبيق جاهز للإنتاج باستخدام تقنيات تطوير الويب البوليمر؟

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

Polymer.js: المفهوم

قبل أن ندخل في البرنامج التعليمي للبوليمر الخاص بنا ، دعنا أولاً نحدد Polymer.js ، ليس لما يدعي أنه موجود ، ولكن لما هو عليه بالفعل.

عندما تبدأ في التحقق من Polymer ، لا يسعك إلا أن تنبهر على الفور بنظرتها الفريدة للعالم. تدعي البوليمر نفسها على أنها تتخذ نوعًا من نهج العودة إلى الطبيعة الذي "يعيد العناصر إلى مركز تطوير الويب". باستخدام Polymer.js ، يمكنك صياغة عناصر HTML الخاصة بك وإنشاءها في تطبيقات ويب كاملة ومعقدة قابلة للتطوير والصيانة. يتعلق الأمر كله بإنشاء عناصر جديدة (على سبيل المثال ، مخصصة) يمكن إعادة استخدامها بعد ذلك في صفحات HTML الخاصة بك بطريقة تعريفية ، دون الحاجة إلى معرفة أو فهم عناصرها الداخلية.

العناصر ، بعد كل شيء ، هي اللبنات الأساسية للويب. وفقًا لذلك ، فإن weltanschauung من Polymer هو أن تطوير الويب يجب أن يعتمد أساسًا على توسيع نموذج العنصر الحالي لبناء مكونات ويب أكثر قوة ، بدلاً من استبدال العلامات بـ "gobs of script" (لاستخدام كلماتهم). بطريقة أخرى ، يؤمن Polymer بضرورة الاستفادة من التقنيات "الأصلية" للمتصفح بدلاً من الاعتماد على متاهة متزايدة التعقيد من مكتبات JavaScript المخصصة (jQuery وآخرون). فكرة مثيرة للاهتمام في الواقع.

حسنًا ، هذه هي النظرية. الآن دعونا نلقي نظرة على الواقع.

تطوير الويب البوليمر: الواقع

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

يضع Polymer.js مجموعة كبيرة من المتطلبات على المتصفح ، بالاعتماد على عدد من التقنيات التي لا تزال في طور التوحيد القياسي (بواسطة W3C) والتي لم تكن موجودة بعد في متصفحات اليوم. تتضمن الأمثلة الظل دوم وعناصر القالب والعناصر المخصصة وواردات HTML ومراقبو الطفرات والعروض التي تعتمد على النموذج وأحداث المؤشر والرسوم المتحركة على الويب. هذه تقنيات رائعة ، ولكن على الأقل حتى الآن ، لم تظهر بعد في المتصفحات الحديثة.

تتمثل إستراتيجية Polymer في جعل مطوري الواجهة الأمامية يستفيدون من هذه التقنيات المتطورة التي لا تزال قائمة على المستعرض والتي لا تزال في طور التوحيد القياسي (بواسطة W3C) ، عند توفرها. في غضون ذلك ، من أجل سد الفجوة ، يقترح Polymer استخدام polyfill (رمز JavaScript قابل للتنزيل يوفر ميزات لم يتم تضمينها بعد في متصفحات اليوم). تم تصميم polyfill الموصى به بطريقة (على الأقل من الناحية النظرية) ستكون سلسة لاستبدالها بمجرد توفر إصدارات المستعرض الأصلية من هذه الإمكانات.

حسنا جيد. لكن اسمحوا لي أن أفهم هذا. على الأقل في الوقت الحالي ، سنستخدم مكتبات JavaScript (مثل polyfill) لتجنب استخدام مكتبات JavaScript؟ حسنًا ، هذا "رائع".

خلاصة القول ، إذن ، هي أننا في نوع من وضع عدم اليقين مع Polymer ، حيث إنه يعتمد في النهاية على (أو ربما بشكل أكثر دقة ، قريبًا) من تقنيات المتصفح التي لم تكن موجودة بعد. وفقًا لذلك ، يبدو Polymer.js اليوم أشبه بدراسة حول كيفية بناء التطبيقات التي تركز على العناصر في المستقبل (على سبيل المثال ، عندما يتم تنفيذ جميع الميزات الضرورية في المتصفحات الرئيسية ولم تعد هناك حاجة إلى polyfill). ولكن ، على الأقل في الوقت الحالي ، يبدو Polymer أشبه بمفهوم مثير للاهتمام أكثر من كونه خيارًا فعليًا لإنشاء تطبيقات قوية لتغيير طريقة عرضك للعالم هنا والآن ، مما يجعل كتابة (أو العثور) على برنامج تعليمي Polymer صعبًا في الخارج. من وثائق Google.

هندسة البوليمر

الآن ، في دليلنا. ينقسم Polymer.js معماريًا إلى أربع طبقات:

أصلي: الميزات المطلوبة متوفرة حاليًا في جميع المتصفحات الرئيسية. الأساس: Polyfills التي تنفذ ميزات المتصفح المطلوبة التي لم تتوفر أصلاً في المتصفحات نفسها. (القصد من ذلك هو اختفاء هذه الطبقة بمرور الوقت حيث تصبح الإمكانات التي توفرها متوفرة أصلاً في المتصفح.). الأساسية: البنية التحتية اللازمة لعناصر البوليمر لاستغلال القدرات التي توفرها الطبقات الأصلية وطبقة الأساس .. العناصر: مجموعة أساسية من العناصر ، تهدف إلى أن تكون بمثابة كتل بناء يمكن أن تساعدك في إنشاء تطبيقك. يتضمن العناصر التي توفر: الوظائف الأساسية مثل ajax والرسوم المتحركة والتخطيط المرن والإيماءات. تغليف لواجهات برمجة تطبيقات المتصفح المعقدة وتخطيطات CSS. عارضات مكونات واجهة المستخدم مثل الأكورديون والبطاقات والأشرطة الجانبية.

إنشاء تطبيق البوليمر

للبدء ، هناك بعض المقالات والكتابات التعليمية التي تساعد في تعريفك بـ Polymer ومفاهيمها وهيكلها. ولكن إذا كنت مثلي ، فعندما تمر بها وتكون جاهزًا لإنشاء تطبيقك فعليًا ، ستدرك بسرعة أنك لست متأكدًا تمامًا من أين تبدأ أو كيفية إنشائه. منذ أن خضعت الآن خلال العملية واكتشفتها ، إليك بعض المؤشرات ...

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

بالنسبة لمثال مشروع البوليمر الخاص بنا ، سأقوم بتسمية عنصر المستوى الأعلى للتطبيق ، نظرًا لأن أسماء العناصر المخصصة (بغض النظر عن إطار العمل الذي تستخدمه لإنشائها) يجب أن تتضمن واصلة (على سبيل المثال ، علامات x ، وعناصر بوليمر ، وما إلى ذلك).

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

على سبيل المثال ، تخيل أن لدينا تطبيقًا بالشاشات التالية:

يمكننا تحديد أن الشريط العلوي وقائمة الشريط الجانبي لن يتغير وأن "المحتوى" الفعلي للتطبيق يمكن أن يحمّل "عروض" مختلفة.

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

يمكننا بعد ذلك إنشاء طريقتي عرض رئيسيتين ، والتي سنطلق عليها ListView و SingleView ، ليتم تحميلها في منطقة "المحتوى". بالنسبة للعناصر الموجودة في ListView ، يمكننا إنشاء ItemView.

سيؤدي ذلك بعد ذلك إلى إنشاء بنية مثل هذا:

الاخبار الجيدة

الآن وبعد أن أصبح لدينا مثالنا لتطبيق Polymer ، يمكننا إدراجه في أي صفحة ويب فقط عن طريق استيراد "toptal-app.html" وإضافة العلامة لأنه ، بعد كل شيء ، تطبيقنا هو مجرد عنصر. هذا بارد.

في الواقع ، يكمن الكثير من قوة وجمال نموذج البوليمر. يتم التعامل مع العناصر المخصصة التي تقوم بإنشائها لتطبيقك (بما في ذلك المستوى الأعلى للتطبيق بأكمله) كأي عنصر آخر في صفحة الويب. لذلك يمكنك الوصول إلى خصائصها وطرقها من أي كود JavaScript أو مكتبة أخرى (على سبيل المثال ، Backbone.js ، Angular.js ، إلخ). يمكنك حتى استخدام هذه المكتبات لإنشاء العناصر الجديدة الخاصة بك.

علاوة على ذلك ، تتوافق المكونات المخصصة الخاصة بك مع مكتبات العناصر المخصصة الأخرى (مثل X-Tag من Mozilla). لذلك لا يهم ما تستخدمه لإنشاء العنصر المخصص الخاص بك ، فهو متوافق مع Polymer وأي تقنية متصفح أخرى.

لذلك ليس من المستغرب أننا بدأنا بالفعل في رؤية ظهور مجتمع Element Creators الذي يعرض العناصر التي تم إنشاؤها حديثًا ويشاركها في المنتديات مثل موقع Custom Elements. يمكنك الذهاب إلى هناك والاستيلاء على أي مكون تريده واستخدامه فقط في التطبيق الخاص بك.

من ناحية أخرى…

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

هنا عينة:

• نقص التوثيق والتوجيه.
  • لم يتم توثيق كافة عناصر Polymer.js UI والعناصر غير التابعة لواجهة المستخدم. في بعض الأحيان يكون "التوجيه" الوحيد حول كيفية استخدامها هو الكود التجريبي. في بعض الحالات ، من الضروري الرجوع إلى الكود المصدري لعنصر البوليمر لفهم كيفية عمله بشكل أفضل ويمكن / ينبغي استخدامه.
  • ليس من الواضح تمامًا كيفية تنظيم التطبيقات الأكبر حجمًا. على وجه الخصوص ، كيف من المفترض أن تمرر الأشياء المفردة بين العناصر؟ ما هي الإستراتيجية التي يجب أن تستخدمها لاختبار العناصر المخصصة الخاصة بك؟ التوجيه بشأن هذه الأنواع من القضايا في هذه المرحلة ضئيل في أحسن الأحوال.

• أخطاء التبعية والإصدار. حتى عند تنزيل عناصر Polymer.js كما هو موصى به ، فقد تجد نفسك مع وجود خطأ تبعية ، يشير إلى تبعيات إصدار مختلفة في نفس العنصر. في حين أنه من المفهوم أن Polymer Elements قيد التطوير حاليًا ، إلا أن هذا النوع من المشكلات يمكن أن يجعل التطوير صعبًا للغاية ، مما يؤدي إلى تآكل ثقة المطور واهتمامه.

• مشاكل على منصات المحمول. غالبًا ما يكون أداء Polymer.js على الأنظمة الأساسية للجوّال في مكان ما بين الإحباط والإشكالية.
  • يتم تنزيل المكتبة بالكامل و polyfills (بدون gzip'ing) ببطء ، وتحتاج إلى تنزيل كل عنصر بوليمر تنوي استخدامه.
  • يبدو أن معالجة polyfill والمكتبات والعناصر المخصصة مهمة باهظة الثمن على الأنظمة الأساسية للجوّال. حتى عند اكتمال التنزيل ، لا يزال لديك غالبًا شاشة فارغة لبضع ثوان.
  • خاصة بالنسبة للوظائف الأكثر تعقيدًا (مثل السحب والإفلات أو العرض في لوحة قماشية) ، قد تجد أن الوظيفة التي تعمل بشكل جيد على سطح المكتب ببساطة لا تعمل بشكل صحيح ، أو لم يتم دعمها بعد ، على النظام الأساسي للجوّال. في حالتي الخاصة ، كان أحد هذه الإحباطات التي واجهتها هو التجسيد في لوحة الرسم على نظام iOS.
• الإبلاغ عن الخطأ غير الكافي أو المربك. في بعض الأحيان ، عندما تخطئ في كتابة اسم سمة ، أو تكسر شيئًا ما متعلقًا بالطبقة الأساسية نفسها ، تتلقى رسالة خطأ غريبة على وحدة التحكم الخاصة بك مع مكدسات مكالمات تحتاج إلى التحقق منها لمحاولة تحديد مكان المشكلة. في بعض الأحيان يكون من السهل حل هذه المشكلة ، ولكن في بعض الأحيان ينتهي بك الأمر إلى تجربة استراتيجية مختلفة تمامًا لمجرد تجنب الخطأ نظرًا لأنه لا يمكنك تعقب مصدره.

خاتمة

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

وبقدر ما إذا كان النهج المتمحور حول JavaScript أو النهج المتمحور حول DOM أفضل حقًا ، فإن هيئة المحلفين لا تزال خارج الخدمة. يقدم البوليمر بعض الحجج المقنعة ، لكن الحجج المضادة موجودة.

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

ولكن بعد قولي هذا ، يبدو من المحتمل أن العناصر المخصصة ستكون جزءًا مهمًا من تطوير الويب في المستقبل ، لذا من المحتمل أن يكون الغوص عاجلاً وليس آجلاً أمرًا حكيمًا لمطور الويب اليوم. وإذا لم تحاول أبدًا إنشاء العناصر المخصصة الخاصة بك من قبل ، فمن المحتمل أن يكون Polymer (وهذا البرنامج التعليمي) مكانًا معقولًا للبدء.