ما يمكنك وما لا يمكنك ضغطه من مكونات الويب

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

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

الأدوات

على الرغم من أنني أفسدت بالفعل هذا القسم بأكمله ، إلا أنه يجب قول شيء هنا. أولاً ، أصبحت مكونات الويب على الفور بلا جدال على الإطلاق: عندما تكون نتيجة الإبداع عبارة عن مكتبة للمكونات ، ولا يمكنك سحب وحش كبير على شكل Angular ، الأمر الذي سيؤدي إلى تعديل نفسه تمامًا تمامًا ، فما تبقى هو أنك لست بحاجة إلى سحب رمز المكتبة على الإطلاق ، ويعمل "تماما مثل ذلك" في المتصفحات الحديثة. لا تزال مكونات الويب نفسها هي نفس إطار عمل Vanilla JS المذهل ، مع وجود عدد قليل فقط من المشكلات المتعلقة بالوحدات النمطية التي تم حلها. لا يزال هناك الكثير مما يجب تركه بأيديك - فأنت بحاجة إلى غلاف مع توحيد قياسي ، ومن المستحسن أيضًا أن يكون هناك حد أدنى من الغليان لكل مكون.

لا يوجد الكثير من هذه الأغلفة ، وحتى تنضج بما يكفي لاستخدامها في منتج خطير: Hybrids ، LitElement ، Stencil. ويفعلون كل شيء عن الشيء نفسه بالطريقة نفسها ، والفرق هو في الأشياء الصغيرة. يحاول Hybrids أن يكون عصريًا ولا طبقيًا ، و Stencil عصري و شبيه بالرد ، LitElement لا يبدو أنه يحاول بجد. ووفقًا لنتائج الاختيار من تافهات غير ذات أهمية ، بقيت LitElement في الخرج - حولت OOPshniki أنفها من Hybrids ، وغير هواة رد الفعل - من Stencil ، حيث شعر JSX عمومًا بتكرار ليس أكثر الأفكار التي لا جدال فيها في رد الفعل.

إلى المعركة؟

ليس من المثير للاهتمام التحدث عن ما يمكنك ، كل ذلك في الوثائق ، لذلك سأواصل الحديث بشكل أساسي حول ما لا يمكنك فعله: عادةً ما لا يكتبون عن ذلك في الوثائق.

قوالب

من حيث templating ، يستخدم LitElement lit-html ، وهو أضيق الحدود:

const template = html` <div attr=${a} .property=${b} ?booleanAttr=${c} @click=${handleClick} ></div> `; 

هذا ليس هتمل ، ولكن عليك أن تتذكر بالضبط ثلاثة إنشاءات في رمز واحد هنا - "." ، "؟" ، و "@". كل شيء آخر هو أتش تي أم أل. فيما يتعلق بـ JSX ، مع className والباقي ، إنه أجمل قليلاً ومنفصل قانونيًا عن كود JS / TS. ولكن ، بالمناسبة ، يتبع "المستحيل" الأول من هنا - ربط أي شيء فظيع لا يعمل ، يمكنك الربط فقط في قيم السمات والخصائص ، وفي محتوى النص. بالطبع ، لا يوجد سحر في القوالب الحرفية الموسومة ، وبتكلفة مقدار معين من الانحرافات ، يمكنك تجميع سلسلة في وقت التشغيل وإرفاق مجلدات بتنسيق html ، ولكن هذا يحدث بالفعل في التقديم بيديك ، وبنفس النجاح يمكنك جمع الخطوط وإرسالها في innerHTML. بالطريقة العادية ، يتم كل ذلك من خلال تكوين القوالب وتقسيم المكونات المعقدة إلى مكونات أبسط. حجم الغلاية صغير جدًا - غلاف القالب غائبًا تقريبًا ، لأنه مجرد متغير ، ولإنشاء مكون ، تحتاج إلى خمسة خطوط "إضافية".

المكونات

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

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

لحسن الحظ ، يمكن ببساطة تعطيل DOM الظل في LitElement في المكون. لسوء الحظ ، سيؤدي ذلك أيضًا إلى تعطيل القدرة على استهداف عناصر العنصر في الأماكن الصحيحة من القالب عبر <slot>. لحسن الحظ ، بعد أن انحرفت قليلاً ، يمكنك الحصول على الأول والثاني على حد سواء: لهذا ، تحتاج فقط إلى وضع جذر الظل على كل فتحة ضرورية ، وليس لديك أي شيء ما عدا ، في الواقع ، <slot>. وبالتالي ، سيتم فتح الأسلوب المكون ، وستكون الفتحات موجودة. أردت أن أقدم مثالًا موجزًا ​​، لكن لسوء الحظ ، لا تعمل التعليمات البرمجية لمعالجة الفتحات لفترة وجيزة على أي حال - يمكن للأشخاص المهتمين جدًا قراءة هذه المشكلة هنا. كنت مستوحاة من الأفكار من هناك.

حسنًا ، تجدر الإشارة أيضًا إلى أنه في المستقبل المنظور ، من المحتمل أن يتراجع دعم و polyfills :: part و :: theme ، ومعهم سيصبح DOM الظل أخيرًا الحل الذي ينتظره الجميع لسنوات عديدة - بحيث يكون معزولًا و الموسعة / قابلة للتغيير. ولكن حتى الآن هذا لا يزال غير موجود.

نشر

في هذه المرحلة ، لم تعد الكتابة عن "ما هو مستحيل" ، لأن كل شيء يمكن أن يكون أكثر - المكتبات المضاءة موجودة في شكل وحدات ES ، وبالتالي دون أي مشاكل يتم التقاطها بواسطة أي شيء وأي طريقة (حتى مع وجود متصفح عارية يمكنه التعامل مع الوحدات النمطية ). بالنسبة إلى IE والحافة الحالية ، تحتاج إلى توصيل مجموعة متعددة من مكونات الويب ، للوحدات النمطية ، إذا كنت تريد رفعها مباشرةً من المستعرض ، فأنت بحاجة إلى شيء يخفف من آلام استيراد المستعرض ، على سبيل المثال es-module-shims. حسنا ، أو المجمع.

مكونات الويب المرتبطة بالتطبيق بسيطة وسهلة الاستخدام ، ويمكنك البدء في استخدامها في html وسحب طرقها وخصائصها في الكود. يمكنك أن ترى كيف يمكن ربط كل هذا بمكتبة أو إطار عمل آخر هنا (لقد تميز رد الفعل ، ولكن في المتوسط ​​كل شيء جيد جدًا). تمسكنا بـ AngularJS ، وكان كل شيء مبتذلاً: ng-prop يسمح لك بنقل شيء ما إلى المكون ، و ng-on يتيح لك الاستماع إلى الأحداث.

يؤدي

إذا كنت بحاجة إلى إنشاء واجهة مستخدم مكونة وربطها بشيء لا ترغب مطلقًا في الدخول إليه (رمز قديم وإطار عمل مخيف غير عصري ، وأماكن سيئة أخرى) - تساعد مكونات الويب جيدًا. تعد المكتبات "الناضجة" الرئيسية التي تدار معها صغيرة الحجم ، ولا توجد مشكلات تقنية خطيرة تتعلق بالوحدات النمطية والتخطيط ، ويمكنك فقط القيام بها وتنفيذها. ما نوع المكتبة التي تأخذها - حتى وإن كانت غير مهمة ، فهناك عدد قليل جدًا من الاختلافات بينها في الوقت الحالي ؛ على وجه التحديد ، لم يخلق LitElement الذي اتخذناه مشكلة إضافية واحدة بالنسبة لنا ، وعمل بالطريقة المتوقعة في جميع الحالات.