Google Polymer - كيف ستغير طريقة تصميم تطبيقات الويب

إلى جانب صور Google ، أعادت Google أيضًا إنشاء Polymer من البداية ، مما عالج تحسين الأداء وكفاءته. فكر في Polymer باعتباره SDK (مجموعة تطوير البرامج) للويب ، مما يجعلها واحدة تطوير تطبيق الويب أسرع بكثير باستخدام معيار جديد يسمى Web Components.

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

حول مكونات الويب

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

يتم إخفاء مشغل التحكم في واجهة المستخدم أسفل جذور الظل ، والمعروف أيضًا باسم الظل DOM. لعرض Shadow DOM ، قم بتشغيل كروم DevTools > اضغط على تحكم في أيقونة> حدد إظهار وكيل المستخدم الظل DOM اختيار.

في لقطة الشاشة التالية ، يمكنك العثور على كومة من

و العناصر التي تبني ضوابط مشغل UI في السر.

اليوم ، مع Web Components ، يمكننا تسمية عناصرنا الخاصة أيضًا. يمكننا بناء عنصر مثل, لتضمين موجز Twitter أو (ربما) لتضمين مخطط.

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

عناصر مخصصة في البوليمر

يأتي Polymer مع مجموعة من العناصر التي تمثل (تقريبًا) كل حاجة إلى تطبيق ويب. تقسم Google هذه العناصر إلى مجموعات: عناصر الحديد وعناصر الورق ومكونات الويب من Google وعناصر الذهب وعناصر النيون والعناصر البلاتينية والجزيئات.

1. عناصر الحديد

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

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

يعرض المثال أعلاه أولاً العنصر النائب للصورة ثم يتلاشى في الصورة الفعلية في SRC كما يتم تحميلها بالكامل, أداء سلس صورة تحميل تأثير.

2. عناصر الورق

ال عناصر الورق هي مجموعة من عناصر تصميم المواد. Material Design هي لغة تصميم Google لجعل واجهة المستخدم والتجربة عبر منصات Google تطبيقات الويب و Android أكثر اتساقًا بصريًا. بعض العناصر الفريدة في تصميم المواد هي زر العمل الورقي والعائم (FAB).

ورقة

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

ارتفاع لرفع الورق ، وبالتالي إضافة الظل لتعزيز الارتفاع
مفعم بالحيوية سيتم تطبيق الرسوم المتحركة عند تغيير ارتفاع الورق.

زر الحركة العائمة (FAB)

زر الحركة العائمة (FAB) هو زر دائري مع أيقونة ، تطفو على الشاشة ، وعادة ما يكون لونه ثابتًا. تشير Google إلى أن هذا الزر يحمل وظيفة يتم الوصول إليها بشكل متكرر. إليك مثال:

يضيف مقتطف الكود التالي مادة ورقية بها صورة و FAB.

سيكون لدينا النتيجة التالية:

لدينا صورة مع “قلب” زر تطفو فوقه. انقر فوقه لإعجاب الصورة ، adn الزر يعطي تأثير تموج لإقرار النقرة.

عرض ورقة تجريبي

3. جوجل مكونات الويب

Google Web Components هي عناصر خاصة تتوافق مع واجهات برمجة تطبيقات Google والخدمات مثل خرائط Google و Youtube وكذلك Google Feed ، على سبيل المثال لا الحصر. العناصر في هذه المجموعة اجعل التفاعل مع خدمات Google مجرد خطوط قليلة.

فيما يلي مثال لإظهار خريطة جوجل باستخدام جزء.

  هذا هو Googleplex

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

عرض خريطة التجريبي

هل تريد عرض فيديو على Youtube؟ يمكنك استعمال ال جزء.

وبالمثل ، نقوم بتخصيص الإخراج من خلال السمات.

عرض يوتيوب التجريبي

4. عناصر الذهب

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

5. عناصر أخرى

تشمل العناصر المتبقية عناصر Neon للرسوم المتحركة والمؤثرات الخاصة ، وعناصر Platinum للإشعارات دون الاتصال بالإنترنت ، وأخيراً الجزيئات ، والمغلفات الخاصة بمكتبات الجهات الخارجية.

ملحوظة المحرر: في وقت كتابة هذا التقرير ، كانت عناصر النيون والعناصر البلاتينية والجزيئات لا تزال غير متوفرة.

دمج البوليمر

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

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

لدمج Polymer ، قم بتشغيل Terminal ثم انتقل إلى دليل المشروع الخاص بك ، على افتراض أنك قمت بإنشاء واحد. ثم اركض الأسطوانة أمر لبدء ملف bower.json في المشروع الخاص بك والذي سيتم استخدامه لتسجيل تبعيات المشروع. افتح bower.json وأضف الأسطر التالية.

 "تبعيات": "polymer": "Polymer / polymer # ^ 1.0.0"، "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0"، "iron-elements": " PolymerElements / عناصر الحديد # ^ 1.0.0 "،" عناصر الورق ":" عناصر PolymerElements / العناصر الورقية # ^ 1.0.0 "،" العناصر الذهبية ":" عناصر PolymerElements / العناصر الذهبية # ^ 1.0.0 "

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

قد تستغرق هذه العملية بعض الوقت لأنها تتضمن الاستيلاء على كمية هائلة من الملفات من المستودعات. بمجرد الانتهاء من ذلك ، يجب أن تجدها محفوظة في bower_components مجلد.

افتح ملف HTML الذي تريد استخدام مكونات البوليمر فيه. داخل رأس المستند, ربط WebComponents.js وهو polyfill للمتصفحات التي لا تدعم WebComponents حتى الآن ، و استيراد ملفات المكونات باستخدام استيراد HTML.

هنا مثال:

هذا الإعداد ستمكننا من استخدام , , عناصر.

المعارض

فيما يلي بعض تطبيقات الويب التي تستخدم بالفعل Google Polymer.

جوجل

استخدمت Google Google Polymer في صفحة الويب الخاصة بـ Google IO 2015 ؛ Google Fi ، خدمة Google اللاسلكية لشركات النقل والبائعين المشاركين ؛ و Google Music.

عناصر مخصصة

يعد CustomElements محورًا يمكنك من خلاله العثور على عناصر مخصصة تم إنشاؤها باستخدام Web Components. فإنه يستخدم عنصر الورق لاحتواء وإنشاء القائمة. كما يوفر طريقًا مناسبًا لتثبيت هذه العناصر من خلال Bower و NPM.

محرر كروم ديف

تطبيق Chrome لتحرير الشفرة يعمل بشكل جيد بشكل مدهش. يستخدم هذا التطبيق الزر FAB وقائمة الورق وعناصر الحوار Paper في واجهة المستخدم.

مصمم البوليمر

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

توقعات الأسهم اليومية

تقرير البورصة وتوقعات بنيت تماما مع عناصر البوليمر.

بوليمر بريد

تطبيق عميل البريد الإلكتروني لـ Gmail. تبدو لطيفة وسائلة ، رغم أنها للأسف ، لا تعمل بشكل كامل.

افكار اخيرة

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

عرض تجريبي
تحميل المصدر

مراجع مفيدة

حالة مكونات الويب
مقدمة مفصلة لعناصر مخصصة
المدونة الرسمية لجوجل بوليمر