نماذج ومكونات ويب بسرعة فائقة - lit-html & LitElement

يسرّنا اليوم الإعلان عن أول إصدارَين ثابتَين من مكتبتَي تطوير الويب من الجيل التالي: lit-html و LitElement.

‫lit-html هي مكتبة صغيرة وسريعة وتعبيرية لإنشاء نماذج HTML. LitElement هي فئة أساسية بسيطة لإنشاء مكونات الويب باستخدام نماذج lit-html.

إذا كنت تتابع المشاريع، من المرجّح أن تكون على دراية بتفاصيل مكتبتَي lit-html وLitElement (ويمكنك الانتقال إلى النهاية إذا أردت). إذا كنت حديث العهد باستخدام lit-html و LitElement، اطّلِع على ما يلي للحصول على نظرة عامة.

‫lit-html: مكتبة صغيرة وسريعة لإنشاء نماذج HTML

‫lit-html هي مكتبة JavaScript صغيرة (تزيد عن 3 آلاف ملف مجمّع ومصغر ومضغوط بتنسيق gzip) وسريعة لأجل إنشاء نماذج HTML. تعمل lit-html بشكل جيد مع أساليب البرمجة الوظيفية، ما يتيح لك التعبير عن واجهة مستخدم تطبيقك بشكل تعريفي، وذلك استنادًا إلى حالته.

const myTemplate = (name) => html`
    <div>
      Hi, my name is ${name}.
    </div>
`;

من السهل عرض نموذج lit-html:

render(myTemplate('Ada'), document.body);

لا يؤدي إعادة عرض نموذج إلى تعديل سوى البيانات التي تغيّرت:

render(myTemplate('Grace'), document.body);

لغة lit-html فعّالة ومعبّرة وقابلة للتوسّع:

  • فعّال: سرعة lit-html فائقة. عند تغيير البيانات، لا تحتاج lit-html إلى إجراء أي مقارنة، بل تتذكر مكان إدراج التعبيرات في النموذج وتعدّل هذه الأجزاء الديناميكية فقط.
  • التعبيرية: تمنحك lit-html القوة الكاملة لواجهة مستخدم JavaScript التعريفية وأنماط المعالجة الوظيفية. التعبيرات في نموذج lit-html هي مجرد JavaScript، لذلك لا تحتاج إلى تعلم بنية نحوية مخصّصة وستتوفّر لك كل إمكانات اللغة. تتيح lit-html العديد من أنواع القيم بشكلٍ تلقائي: السلاسل وعقد DOM والمصفوفات وغيرها. النماذج نفسها هي قيم يمكن احتسابها وتمريرها إلى الدوالّ والعكس، وتداخلها.
  • قابل للتوسيع: يمكن أيضًا تخصيص lit-html وتوسيع نطاقه، ما يجعله أداة ممتازة لإنشاء نماذج. تعمل التوجيهات على تخصيص كيفية التعامل مع القيم، ما يسمح بقيم غير متزامنة، وعمليات تكرار مفعّلة بالمفتاح، وحدود الأخطاء، وغير ذلك. تتضمّن lit-html عدة توجيهات جاهزة للاستخدام وتسهّل تحديد توجيهاتك الخاصة.

سبق أن تم دمج lit-html في عدد من المكتبات والمشاريع. يمكنك العثور على قائمة ببعض هذه المكتبات في مستودع awesome-lit-html على GitHub.

إذا كنت بحاجة إلى ميزة إنشاء النماذج فقط، يمكنك البدء الآن باستخدام مستندات lit-html. إذا أردت إنشاء مكوّنات لاستخدامها في تطبيقك أو لمشاركتها مع فريقك، اطّلِع على المزيد من المعلومات.

LitElement: فئة أساسية خفيفة الوزن لمكونات الويب

LitElement هي فئة أساسية خفيفة الوزن تسهّل إنشاء مكونات الويب ومشاركتها أكثر من أي وقت مضى.

يستخدم LitElement واجهة برمجة التطبيقات lit-html لعرض المكوّنات ويضيف واجهات برمجة تطبيقات لتعريف السمات والخصائص التفاعلية. يتم تعديل العناصر تلقائيًا عند تغيير خصائصها. ويتم تعديلها بشكل سريع، بدون استخدام ميزة "مقارنة الاختلافات".

في ما يلي مكوّن LitElement بسيط في TypeScript:

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

(لدينا أيضًا واجهة برمجة تطبيقات JavaScript رائعة).

يؤدي ذلك إلى إنشاء عنصر يمكنك استخدامه في أي مكان تستخدم فيه عنصر HTML عاديًا:

<name-tag name="Ida"></name-tag>

إذا كنت تستخدم Web Components، ستسرّك معرفة أنّه يمكن استخدامها الآن بشكل مضمّن في Chrome وSafari وFirefox. ستتوفّر الميزة قريبًا في متصفح Edge، ولا تكون مجموعات polyfills مطلوبة إلا لإصدارات المتصفّح القديمة.

إذا كنت حديث العهد باستخدام Web Components، ننصحك بتجربتها. تتيح لك Web Components توسيع نطاق HTML في طريقة تتفاعل مع المكتبات والأدوات وأُطر العمل الأخرى. ما يجعلها مثالية لمشاركة عناصر واجهة المستخدم داخل مؤسسة كبيرة أو نشر المكوّنات لاستخدامها في أي مكان على الويب أو إنشاء أنظمة تصميم لواجهة المستخدم مثل Material Design.

يمكنك استخدام العناصر المخصّصة في أيّ مكان تستخدم فيه HTML: في المستند الرئيسي أو في نظام إدارة المحتوى أو في Markdown أو في طرق العرض المُنشأة باستخدام إطارات عمل مثل React وVue. يمكنك أيضًا مزج مكوّنات LitElement مع مكوّنات ويب أخرى، سواء تم كتابة تلك المكوّنات باستخدام تكنولوجيات الويب الأساسية أو تم إنشاؤها باستخدام أدوات مثل Salesforce Lightning Web Components أو Stencil من Ionic أو SkateJS أو مكتبة Polymer.

البدء

هل تريد تجربة lit-html وLitElement؟ يمكنك البدء بالدليل التعليمي LitElement:

إذا كنت مهتمًا باستخدام lit-html بمفرده أو دمج ميزة إنشاء النماذج في lit-html في مشروع آخر، يمكنك الاطّلاع على مستندات lit-html:

وكما هو الحال دائمًا، يهمّنا معرفة رأيك. يمكنك التواصل معنا على Slack أو Twitter. مشروعاتنا مفتوحة المصدر (بالطبع)، ويمكنك الإبلاغ عن الأخطاء أو تقديم طلبات ميزات أو اقتراح تحسينات على GitHub: