في كل مرة ، عندما يتم ذكر مجموعة من معايير Web Components في أي مقال أو تعليق ، يحدث نفس الشيء تقريبًا: يبدأ الأشخاص ، الذين غالبًا ما يكون لديهم فكرة قليلة جدًا عما هو على المحك ، في مشاركة آراء "الخبراء". في كل مرة ، تنزلق المناقشات إلى سيناريو واحد ونفسه ، يندرج اسمه مع كلمة "الرخ". وأود بشدة أن تكون إيجابية وبناءة والانتقال إلى أسئلة التطبيق العملي. في هذه المقالة ، سأحاول الإجابة فورًا على الغالبية العظمى من الأسئلة النموذجية ودحض الحد الأقصى من المفاهيم الخاطئة الشائعة. في وقت لاحق ، في وضع صعب ، سيكون من الممكن التغلب على رابط واحد. لذا دعنا نذهب.
الأساسيات
مكونات الويب هي مجموعة من المواصفات الحديثة تتكون من العناصر الأساسية التالية:
عناصر مخصصة - قدرة أصلية على إنشاء علامات HTML الخاصة بك ، مع السلوك والمظهر المحدد والترميز الداخلي الخاص بك.
Shadow DOM - فصل البنية الداخلية للمكون مع تغليف الأنماط الداخلية وبقية نص الوثيقة.
قالب - علامة خاصة تسمح لك بتخزين أجزاء من الترميز ، وتطبيقها وإعادة استخدامها إذا لزم الأمر.
استيراد HTML - القدرة على استيراد كتل HTML المخزنة في ملفات HTML الأخرى
يمكن تحضير طبق كل ما سبق مع متغيرات CSS الأصلية ووحدات ES الأصلية ودفع خادم HTTP / 2. هناك أيضًا فتحات وسمات مخصصة وأحداث مخصصة وتفاصيل أخرى. عنهم بعد ذلك بقليل ، عندما ننتقل إلى الممارسة.
نعم ، لا يتم دعم مكونات الويب هذه في أي مكان تقريبًا.
الأرقام الجافة هي أفضل أصدقاء المهندس. دعونا نلقي نظرة على "لا مكان تقريبًا" من هذه الزاوية:
العناصر المخصصة - 78.71٪
شادو دوم - 79.12٪
قالب - 89.61٪
واردات HTML - 69.16٪
كما نرى ، تعمل التقنيات المذكورة أعلاه في المتصفحات للغالبية العظمى من المستخدمين. تفسد استيراد HTML الصورة قليلاً ، لكننا لسنا ملزمين باستخدام المجموعة الكاملة (أفضل وحدات ES الأصلية لتقسيم كل شيء إلى كتل مناسبة) ، حتى بشكل فردي ، يمكنك العثور على الكثير من الأشياء "اللذيذة" في هذه القائمة.
أوصي بشدة بعدم الوثوق بي عمياء ، ولكن لمتابعة الروابط المقدمة. هناك ، على سبيل المثال ، يمكنك رؤية الحالة الحالية لهذه المواصفات وحقيقة أن Custom Elements و Shadow DOM
قد تلقوا الدعم الكامل في Firefox ، بدءًا من الإصدار 63 . عندما يقوم معظم مستخدمي الثعلب بالترقية إلى هذا الإصدار ، وهذه اللحظة تقترب ، ستصبح الأرقام الإجمالية أكثر جاذبية. ربما لاحظت أيضًا "الدعم غير الكامل" للعناصر المخصصة و Shadow DOM في Safari. لن يسمح لك متصفح Apple بتوارث المكون الخاص بك من عنصر متصفح أصلي مدمج ، مثل زر وتحديد وما شابه. لدى Safari أيضًا بعض الفروق الدقيقة في محددات CSS عند استخدام Shadow DOM. من الناحية العملية ، من الممكن العيش معه وعدم الحزن. على ما يبدو ، من خلال التقاليد ، تعد Microsoft Edge دخيلًا بين المتصفحات الحديثة. يدعي المطورون أنه يتم تنفيذ الدعم. نحن ننتظر.
حسنًا ، ماذا تفعل مع الباقي ~ 20٪ من المستخدمين؟
يمكن استخدام
Polyfiles لدعم هؤلاء الرجال. نعم ، ستعمل بشكل أبطأ قليلاً مع polyphiles ، ولكن هذا لا يمكن ملاحظته بالعين المجردة. ولكن بالنسبة للجميع - سيكون أسرع.
لقد حاولنا قبل خمس سنوات القيام بمشروع حول البوليمر. كان كل شيء بطيئًا للغاية.
في تلك الأوقات "البعيدة" ، كانت مسودة المعيار (v0) مستعرة ، والتي تم تنفيذ دعمها فقط في Chrome. منذ ذلك الحين ، تغير الكثير: تم اعتماد إصدار جديد من المعيار ، v1 ، وتم تنفيذ الدعم الأصلي في متصفحات مختلفة ، وتمت إعادة كتابة polyphiles ، وذهب الممارسات الجيدة إلى الاستقرار. لقد تطور البوليمر نفسه من معاينة تكنولوجية إلى حل يعمل بشكل كامل ، وهو أمر لطيف للتعامل معه.
بعض البوليمرات ... ما هو كل هذا؟
Polymer هي مكتبة لإنشاء مكونات الويب. يطبق دعمًا لكل "السكر" الذي اعتدنا عليه عند العمل مع أطر الواجهة الأمامية الشائعة: روابط البيانات الديناميكية ، والمكررين للعمل مع المصفوفات ، وما إلى ذلك. في الوقت الحالي ، تم إصدار الإصدار الثالث المستقر بالفعل هذه المكتبة. يتم التطوير بمشاركة نشطة من مطوري Chrome. يتم الحفاظ على النظام البيئي من قبل جوجل.
الطول الكلي لحى المطورين هو ...متى تستخدم مكونات الويب؟
إذا كنت بحاجة إلى مكتبة عالمية مشتركة لمكونات واجهة المستخدم. حالة في الحياة: مشروع يكتب فيه التطبيق الرئيسي في React والمكتب الخلفي في Angular. وأريد التشابه وجميع أنواع إعادة استخدام قاعدة التعليمات البرمجية. ومكونات الويب تبدو رائعة
في النظم البيئية المختلفة .
إذا كنت قريبًا من التصميم في نهج المتصفح . يمكنك إنشاء بدون إعادة إنشاء التطبيق باستمرار وبدون تبعيات غير ضرورية. هذا يجعل النماذج الأولية تجربة ممتعة للغاية ويسمح لتطبيقك بالتطور بسلاسة من حالة النموذج الأولي إلى حالة إصدار الإنتاج. احب ذلك.
إذا كنت تحب OOP القديم الجيد : قم بإنشاء فئة من خلال الوراثة من عنصر HTML ، وقم بتنفيذ الميزات والكعكات المطلوبة فيها ، ثم ترث الفئات للمكونات المتخصصة منه. والآن لديك إطار العمل المصغر الخاص بك. جمال!
إذا كنت تكره BEM : يعزل Shadow DOM أنماط المكونات. لا حاجة لتسمية وحشية متعددة الطوابق ، ولا لتوفير التنقل إلى الإعلانات في كومة CSS مشتركة. يتم تعبئة كل شيء بشكل مضغوط في مكون: الأنماط والتخطيط والمنطق.
إذا كنت تقوم بتطوير التطبيقات بناءً على Electron. الإصدار الحالي من Chromium في Electron يدعم بالفعل كل ما تحتاجه. على الرغم من التأخير العام في الإصدارات.
إذا كنت ترغب في كتابة إطار العمل / المكتبة الخاصة بك. مكونات الويب هي أساس تركيب ممتاز لمثل هذه التجارب.
إذا كنت بحاجة إلى نهج مختلط: تقوم بتطبيق صفحات الويب الكلاسيكية مع عناصر SPA : يمكن استخدام العلامات المخصصة مع أي محرك لقالب الخادم ، يمكن أن تكون مجرد جزء من الترميز العام وتحقق هدفك في الوقت المناسب. يمكنك الحفاظ على توازن دقيق لما يتم تقديمه على الخادم وما يعمل على العميل.
إذا كان المستخدمون يستخدمون المتصفحات الحديثة. من تلقاء نفسه.
إذا كنت تقوم بتطوير PWA : تدعم المنصات المحمولة الرئيسية كل شيء خارج الصندوق. لبداية سريعة ، هناك عدة
بوا-بادئ .
إذا كنت مهتمًا بزيادة أمان التطبيق ومراجعة التبعية التفصيلية ، فهذا أمر محظور بالنسبة لك. كل شيء بسيط هنا: عدد أقل من التبعيات - عدد أقل من الثقوب غير المنضبط.
إذا كنت الهوسي محسن وأستمتع بالعمل مع API DOM: مكونات ويب - هو جزء من DOM API، مع كافة الميزات القياسية من DOM-عناصر مشتركة.
إذا اشتعلت من كسر التوافق العكسي لإصدارات المكتبة : عندما يكون كل شيء مبنيًا على المعيار المتميز ، فإنه أكثر موثوقية إلى حد ما.
متى يجب ألا تستخدم مكونات الويب
عندما تكون متطلبات مشروعك هناك حاجة لدعم المتصفحات القديمة والغريبة. في هذه الحالة ، لن يحسدك بشكل عام. تعازي.
عندما تقوم بتطوير منتجات بسيطة ذات دورة حياة قصيرة ولا تحتاج إلى تطوير قاعدة رمز واحدة.عندما تتعامل بشكل أساسي مع رمز قديم.عندما تستخدم أنت وزملاؤك شيئًا عصريًا فقط ولا تريد معرفة أي شيء آخر.لماذا أحتاج كل هذا؟ لدي رد فعل / Vue / الزاوي / الخ ، يكفي بالنسبة لي ...
بعد ذلك ، يمكن تحويل جزء كبير مما تفعله JavaScript في المكتبات والأطر الشائعة إلى تطبيق مستعرض منخفض المستوى. من أجل السرعة ، تقليل كمية التبعيات الباهظة ، تقليل الاعتماد على التبعيات. من أجل الخير.