يسعدنا اليوم الإعلان عن أول إصدارات ثابتة لمكتبتنا من الجيل التالي لتطوير الويب، وهما lit-html وLitElement.
lit-html هي مكتبة صغيرة وسريعة ومعبِّرة لنماذج HTML. LitElement عبارة عن فئة أساسية بسيطة لإنشاء مكونات الويب باستخدام نماذج lit-html.
إذا كنت تتابع المشاريع، ربما تعرف ما تدور حوله lit-html وLitElement (ويمكنك الانتقال سريعًا إلى النهاية إذا أردت ذلك). إذا كنت مبتدئًا في استخدام lit-html وLitElement، تابع القراءة للحصول على نظرة عامة.
lit-html: مكتبة صغيرة وسريعة لنماذج HTML
lit-html عبارة عن مكتبة صغيرة جدًا (ما يزيد قليلاً عن 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 رائعة لـ vanilla.)
يؤدي هذا إلى إنشاء عنصر يمكنك استخدامه في أي مكان تستخدم فيه عنصر HTML عادي:
<name-tag name="Ida"></name-tag>
إذا كنت تستخدم مكونات الويب، يسعدنا معرفة أنّها متوفّرة الآن بشكل محلّي في Chrome وSafari وFirefox. ستتم إتاحة استخدام Edge قريبًا، ولن تكون هناك حاجة إلى استخدام رموز polyfill إلا لإصدارات المتصفّحات القديمة.
إذا كنت جديدًا في مكونات الويب، فيجب أن تجربها! تتيح لك مكونات الويب توسيع HTML بطريقة تتفاعل مع المكتبات والأدوات وأُطر العمل الأخرى. وهذا يجعلها مثالية لمشاركة عناصر واجهة المستخدم داخل مؤسسة كبيرة، أو نشر المكونات للاستخدام في أي مكان على الويب، أو إنشاء أنظمة تصميم واجهة المستخدم مثل Material Design.
يمكنك استخدام عناصر مخصّصة في أيّ مكان تستخدم فيه ترميز HTML: في مستندك الرئيسي أو في نظام إدارة المحتوى أو في Markdown أو في طرق العرض التي تم إنشاؤها باستخدام أُطر عمل مثل React وVue. يمكنك أيضًا مزج مكونات LitElement ومطابقتها مع مكونات الويب الأخرى، سواء تمت كتابتها باستخدام تقنيات الويب vanilla أو تم إنشاؤها بالاستعانة بأدوات مثل Salesforce Lightning Web Components أو Stencil من Ionic أو SkateJS أو مكتبة البوليمر.
البدء
هل تريد تجربة lit-html وLitElement؟ نقطة البداية الجيدة هي البرنامج التعليمي LitElement:
إذا كنت مهتمًا باستخدام lit-html وحده، أو دمج نموذج lit-html في مشروع آخر، فراجع مستندات lit-html:
وكالعادة، يُرجى إطلاعنا على رأيك. يمكنك التواصل معنا على Slack أو Twitter. مشروعاتنا مفتوحة المصدر (بالطبع!) ويمكنك الإبلاغ عن الأخطاء أو طلبات ميزات الملفات أو اقتراح تحسينات على GitHub: