يعتقد مؤلف المادة ، التي ننشر ترجمتها اليوم ، أنه إذا كنت ستستخدم مكونات الويب عند تصميم واجهات تطبيقاتك وتبحث عن مكتبة مناسبة مستقلة عن أطر عمل واجهة المستخدم ، فيجب عليك إلقاء نظرة على المشاريع التي سيتم مناقشتها هنا.
معلومات أولية
عندما كنت أسمع باستمرار عن
Stencil و
Svelte و
Lit HTML ، تصورت هذه المادة وبدأت في البحث عن مكتبات مكونات الويب ، اعتقدت أنه سيكون من الصعب علي أن أجد شيئًا مثيرًا للاهتمام استنادًا إلى قدرات HTML. كان هذا لمجرد أنني لم أدرك بعد الإمكانيات الكاملة لمكونات الويب. كنت شخصًا يقتصر تفكيره على إطار المكتبات والأطر. ذكرتني رغبتي بشيء مثل "العثور على مكتبة HTML مثيرة للاهتمام." لكنني الآن أفهم أن العثور على مكتبة جيدة لمكونات الويب ليس بالأمر الصعب.
جميع مكونات الويب ، بفضل التقنيات الأساسية التي بنيت عليها ، تحظى بشعبية كبيرة ، فهي ، بحكم تعريفها ، يمكن أن تتفاعل مع بعضها البعض وتبين نفسها بشكل جيد عند استخدامها معًا في نفس المشروع. في الوقت نفسه ، فإن ما يتم إنشاؤه باستخدام معيار Web Components ، على سبيل المثال ، بعض المكونات أو عناصر واجهة المستخدم ، سيعمل أولاً في جميع المتصفحات الحديثة ، وثانياً ، سيكون متوافقًا مع أي مكتبة JavaScript أو أي إطار JavaScript ، التي تستخدم HTML.
1. مكتبة مكونات الويب المادية
عادةً ، إذا كان اسم مكتبة مكونات واجهة المستخدم يحتوي على كلمة "مادة" ، فإن هذا يقودها إلى رواد في التصنيف والتنزيلات. مكتبة
Material Web Components من Google هي إصدار ويب من مكتبة المواد. على الرغم من أن المكتبة المعنية لا تزال قيد التطوير ، إلا أنه يمكن بالفعل استخدام المكونات الموجودة في تكوينها في مجموعة كبيرة ومتنوعة من مشاريع الويب. سيكون تطوير هذه المكتبة بالتأكيد ممتعًا للغاية للمشاهدة.
2. PolymerElements مستودع مجموعة
تتيح لك مكتبة
Polymer من Google إنشاء مكونات ويب مستقلة وقابلة لإعادة الاستخدام تعمل على نفس مبدأ عناصر HTML القياسية. يعد استخدام مكونات الويب هذه سهلاً مثل استخدام عناصر HTML العادية. يحتوي مستودع
PolymerElements على أكثر من 100 من مكونات الويب التي أنشأتها Polymer باستخدام مستودعات منفصلة. فيما يلي مثال للعمل مع مكون ويب مماثل:
<!-- --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!-- HTML- --> <paper-checkbox>Web Components!</paper-checkbox>
3. مكتبة مكونات فادين
أعتقد أن
مكونات Vaadin هي مشروع واعد. تحتوي هذه المكتبة على حوالي 30 من مكونات الويب مفتوحة المصدر المصممة لتطوير واجهات المحمول وسطح المكتب المصممة للمتصفحات الحديثة. تسمح لنا حالة مستودع المكتبة بقول أن العمل النشط جار عليه.
4. مكتبة العناصر السلكية
سجلت مكتبة
Wired Elements ما يقرب من 7000 نجمة على GitHub. يسمح لك بإنشاء عناصر تبدو كما لو كانت مرسومة باليد. إنها تشبه المخططات ، وفي كل مرة يتم عرض الشاشة ، تتغير العناصر ، أي حتى نفس الصفحة التي يتم عرضها في أوقات مختلفة ستبدو مختلفة. لا أعرف ما إذا كانت هذه المكتبة مفيدة لأي شخص ، والشيء الوحيد الذي لا جدال فيه هو أن الصفحات المصممة باستخدامها تبدو مذهلة.
هنا يمكنك تجربة ذلك.
هنا مثال على استخدامه مع React.
وهنا - مع فيو.
5. مكتبة اليكس
Elix عبارة عن مجموعة من مكونات الويب التي تغطي احتياجات أنماط تصميم الواجهة القياسية. يتم تحقيق الجودة العالية لهذه المكونات من خلال ضمان امتثالها للتوصيات الواردة في
هذه الوثيقة. على سبيل المثال ، وفقًا لهذه التوصيات ، تعتبر عناصر HTML القياسية جودة. تجدر الإشارة إلى أن مشروع Elix يدعم مجموعة من الأشخاص المتشابهين في التفكير ، وهم يبحثون عن أولئك الذين يمكنهم الانضمام إليهم.
6. مكتبة العناصر الزمنية
كانت مكتبة
العناصر الزمنية موجودة منذ بعض الوقت ، وهي مشهورة إلى حد ما على جيثب. يعتمد على مكون يعمل على توسيع إمكانيات عنصر HTML
<time> القياسي. باستخدام هذه المكتبة ، يمكنك تقديم الطوابع الزمنية كسلسلة مترجمة ، أو كنص يتم تحديثه تلقائيًا في متصفح المستخدم. فيما يلي مثال على العمل مع هذه المكتبة:
<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time>
7. مكتبة مكونات الويب UI5
تم تطوير مكتبة
UI5 Web Components كجزء من مشروع
OpenUI5 بواسطة SAP. إنها عبارة عن مجموعة من عناصر واجهة المستخدم خفيفة الوزن ومستقلة ومناسبة لإعادة الاستخدام. تجدر الإشارة إلى أن هذه المكونات ليست إضافة على UI5. إنها عناصر مستقلة ، ويمكن استخدامها جنبًا إلى جنب مع بيئات مختلفة لتطوير واجهات الويب. يتوافق تصميم المكونات مع دليل SAP
هذا .
8. عناصر PatternFly المشروع
مشروع
PatternFly Elements عبارة عن مجموعة مكونة من حوالي 20 مكونًا مناسبًا على الويب ، بالإضافة إلى أدوات لتطويرها. تعد مكونات الويب هذه مناسبة للاستخدام في أي مجال من مجالات تطوير الويب ، كما أنها تتوافق مع المكتبات والأطر المختلفة. على سبيل المثال ، يمكنك استخدامها عند تطوير مشاريع الويب باستخدام React أو Vue أو Angular أو JavaScript العادية.
لتجربة عناصر PatternFly ، قم بتشغيل تسلسل الأوامر التالي:
git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install # - lerna bootstrap npm run storybook
9. مشروع webcomponents.org
مشروع
webcomponents.org عبارة عن بوابة عبارة عن كتالوج لمكونات الويب المصممة باستخدام البوليمرات والمشاريع الصديقة. إنه جيد لأنه بفضل مساعدته يمكنك مواكبة التطورات الجديدة لفريق Polymer. هنا يمكنك أيضًا العثور على مواد مثيرة للاهتمام حول مكونات الويب.
النتائج
في هذه المقالة ، بحثنا في 9 مشاريع متعلقة بمكونات الويب. نأمل أن تتمكن من الاطلاع على المستودعات والمواقع ذات الصلة للعثور على ما تبحث عنه. إذا كنت مهتمًا بموضوع مكونات الويب ،
هنا ،
وهنا ، يمكنك العثور على قوائم بمكونات الويب والمواد الإضافية للعمل معهم.
أعزائي القراء! ما مكتبات مكونات الويب التي تستخدمها؟