Web Components with Stencil.js - هل هي أفضل طريقة لإنشاء عناصر واجهة مستخدم قابلة لإعادة الاستخدام في عام 2018؟

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

لكن مهلا ، ما هي مكونات الويب؟

Web Components عبارة عن مجموعة من التقنيات المختلفة التي تتيح لك إنشاء مكونات واجهة مستخدم مخصصة قابلة لإعادة الاستخدام - مع تغليف وظائفها بعيداً عن بقية الكود الخاص بك - واستخدامها في تطبيقات الويب الخاصة بك.
https://developer.mozilla.org/en-US/docs/Web/Web_Components

الملايين من الناس حول العالم يستخدمون بالفعل هذه التكنولوجيا كل يوم. موقع youtube.com ، ثاني أشهر موقع في العام الماضي ، يستند إلى Web Components. تتم كتابة علامة التبويب "السجل التاريخي" في Chrome باستخدام Polymer ، مكتبة مكونات الويب! حسب ويكيبيديا ، تم تقديم Web Components لأول مرة بواسطة Alex Russell في مؤتمر Fronteers 2011 لأول مرة.

بضع كلمات عن التقنيات المعنية

الظل DOM

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

يمكنك التأثير على العقد في ظل الظل بنفس الطريقة تمامًا مثل العقد غير الظل - على سبيل المثال إلحاق الأطفال أو تعيين السمات ، أو تصميم العقد الفردية باستخدام element.style.foo ، أو إضافة نمط إلى شجرة DOM الظل بأكملها داخل < أسلوب> العنصر. الفرق هو أن أيا من الشفرة داخل DOM الظل سوف تؤثر على أي شيء خارجها ، والسماح للتغليف مفيد.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

يحتوي الظل DOM على وضعين: فتح وإغلاق. يوفر الوضع المغلق لـ Shadow DOM لمؤلفي المكونات تحكمًا في كيفية كشف جذر الظل للمكون من خلال js. يمكنك قراءة المزيد عن الظل DOM هنا.

تصميم

يتم تحديد النطاقات في Shadow DOM ولا تتسرب. سيؤثر CSS العالمي على عناصر Shadow DOM تمامًا مثل أي عنصر html آخر - عن طريق وراثة الخصائص ، لذلك فإن إعداد مجموعة الخطوط على الجسم سوف يرثه المكون المخصص المخصص. سيؤثر تعيين الأنماط على * أيضًا على العنصر الجذر لـ Shadow DOM ، حيث يؤثر على جميع العناصر. إذا كنت تريد السماح لمستخدمي المكونات بنمط المكون ، فيجب عليك استخدام خصائص CSS المخصصة.

عناصر مخصصة

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

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

يمكن إنشاء مكونات الويب باستخدام vanilla js بالطبع (نحتاج أن نتذكر حول polyfilling للمتصفحات دون دعم للتكنولوجيات المطلوبة) ، ولكن يمكن أن تكون مكونات الكتابة مع js عادي صعبة وتتطلب الكثير من كود boilerplate. هذا هو المكان الذي تصبح فيه مكتبات مكونات الويب في متناول يدي. لا تحتاج إليها ، ولكن محاولة إنشاء Web Components جاهزة للإنتاج ستكون أقل إيلامًا باستخدام واحد منها.

البوليمر

هذه هي مكتبة Web Components الأكثر شعبية ، والتي أنشأتها Google وتستخدمها بكثرة. يوفر واجهة برمجة تطبيقات بسيطة لإنشاء المكونات. سيستخدم الإصدار 3.0 ، الذي سيتم شحنه هذا العام ، lit-html ، ويبدو أنه طريقة لطيفة لإنشاء html في js.

Skate.js

تدعي Skate.js أنها تجريد وظيفي على معايير Web Components. الجزء المثير للاهتمام هو أنه يتيح لك استخدام مكتبات عرض متعددة ، بما في ذلك لغة تأشير النص الفائق ، preact وحتى الرد.

Stencil.js

Stencil.js هو مترجم Web Components جديد نسبيا تم إنشاؤه بواسطة فريق Ionic. يتطلب الأمر مفاهيم تطوير الويب الحديثة الشائعة (مثل Virtual DOM ، والتزامن غير المتزامن ، وتدفق الأحداث التفاعلية و TSX) ويقوم بإنشاء كود مكون ويب نظيف ومستند إلى معيار.

إنشاء مكونات الويب باستخدام Stencil.js

أود أن أخبركم قليلاً عن إنشاء Web Components باستخدام Stencil.js. لماذا اخترت هذه المكتبة؟ ويرجع ذلك أساسًا إلى دعم Typescript المضمّن واستخدام الأنماط التفاعلية التي أتعرف عليها من خلال تجربتي Angular و React ، وبالطبع نهج الاستنسل ليس إطارًا. تدعي Stencil.js أنها مجرد مترجم Web Components ، والمكونات التي تم إنشاؤها هي janilla js - صغيرة وسريعة ، بالإضافة إلى أنه يمكن استيرادها باستخدام علامة