مكونات الويب Web Components
لا يخلو أي مشروع ويب حقيقي في أيامنا الحالية يعتمد لغة PHP من استخدام أحد أطر العمل PHP FrameWork، حيث يمكن لكل متابع أن يلمس التسارع في تطور هذه الأطر، وكما نعلم معظم هذه الأطر تهتم بطريقة البرمجة من جهة المخدم (Server Side)، ولكن ما الجديد في التقنيات الويب من جهة الزبون (Client Side)؟!
إن ظهور HTML5 و CSS3 وقبلها مكتبات Javascript (مثل jQuery، Zepto… إلخ ) وما يحدث لهذه المكتبات من تطوير سريع هو أهم ما حصل إلى الأن، ولكن هل هناك مفاهيم جديدة قد تغير كل ما سبق وتتجه بالويب الذي نعلمه اليوم كمبرمجين إلى مستوى جديد تماماً ، ويجعلنا نعود لنتعلم الأساسيات من جديد ؟!، بصراحة الجواب هو نعم 
قد يعتبر البعض انها نقمة على المبرمجين ، وقد يتحمس البعض لتعلم أشياء جديدة. بكل الأحوال أحد هذه المفاهيم الجديدة هي مكونات الويب أو Web Components.
ما هي مكونات الويب Web Components؟
تحتوي مكونات الويب Web Components العديد من المفاهيم الجزئية التي تجعل الويب من جهة المستخدم بيئة جديد تماماً، وهي :
القوالب Templates
حيث يمكن تعريف نصوص HTML Markup خامدة من قبل المبرمجين، أي لا يقوم المستعرض بمعالجتها (Parsing) أو عرضها (Rendering) أو تحميل الموارد الموجودة داخلها من صور وغيرها إلا عندما نطلب منه ذلك من خلال سكريبت مرتبط، ميزة ممتازة تجعل أداء صفحات الويب ينتقل إلى مستوى جديد، حتى في حالة وجود صفحات معقدة جداُ وتحوي آلاف من الأسطر.
العناصر المخصصة Custom Elements
حيث يمكن تعريف عنصر HTML جديد، وما يحويه من خصائص وطريقة إظهار الخاصة به والواجهات البرمجية (Interfaces) والأحداث (Events) الخاصة به.
مثال حي على ذلك عنصر <video> في HTML5 وهو عنصر أساسي ولكن، كيف يمكننا أن نجعل وسماً وحيداً يظهر ازرار تحكم متعددة، بشكل معين (Layout)، وتنفيذ العديد من المهام؟
هذا ما يمكن للعناصر المخصصة أن تؤمنه للمبرمجين بالتعاون مع كائنات الظل Shadow DOM، بالإضافة إلى إمكانية التوسع أو الوراثة من عناصر أساسية موجودة والتلاعب بخصائصها والإضافة عليها، شيء جميل جداً!
كائنات الظل Shadow DOM
حيث يمكن تعريف شجرة فرعية من الكائنات البرمجية المرتبطة وتغليفها (Encapsulation).
من أهم المشاكل في تقنيات البرمجة من جهة الزبون عدم وجود القدرة على التغليف (Encapsulation) بشكل كامل لعناصر المستند (DOM) وحمايتها من نصوص برمجية (Scripts) أخرى موجودة في نفس الصفحة، سابقاً كان يمكن تحقيق ذلك فقط من خلال استخدام Iframe و نعلم أن هذا غير مستحب إطلاقاً لأسباب عديدة لسنا بصدد ذكرها الآن.
أتى مفهوم كائنات الظل لتفادي هذه المشكلة، حيث يمكن تغليف العناصر وتنسيقاتها (Styles) وحمايتها.
الاستيراد Imports
وهي تعريف كيف يمكن للعناصر المخصصة Custom Elements والقوالب Templets التي ذكرت سابقاً أن تكون عبارة عن مورد Resource وتكون مرتبة في زرم Packages.
لا تقلق! ما زال هناك القليل من الوقت للكلام عن دعم كامل لهذه التقنيات على جميع مستعرضات الويب، ولكن انتبه إلى أن من يضغط بإتجاه دعم هذه المفاهيم هو شركة غوغل ، حيث يعتبر Chrome Canary أفضل داعم لها حالياً.
سنعتبر هذه المقالة بمثابة تسليط للضوء على مكونات الويب، وسندع الكلام في تفاصيل كل جزء منها لمرات قادمة.
ولكن للمتحمسين للقراءة أكتر يمكنهم قراءة هذا المستند من W3C (مسودة) Introduction to Web Components.
وللمتحمسين بتجربة هذا المفهوم يمكنهم الاطلاع على مشروع Polymer Project وهو مشروع قائم على مفهوم مكونات الويب ، ويوفر دعم معظم ميزاتها على المستعرضات الحالية.
إرسال تعليق