תבניות ורכיבי אינטרנט במהירות הבזק – 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, 000 שורות בגרסת ה-bundle, בגרסת המינימיזציה ובגרסת ה-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 אין צורך לבצע השוואה (diff) בין הגרסאות. במקום זאת, הוא זוכר איפה הוספת ביטויים בתבנית ומעדכן רק את החלקים הדינמיים האלה.
  • עוצמה. באמצעות 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 כדי להציג רכיבים, ומתווספים ממשקי API להצהרה על מאפיינים ומאפייני תגובה. הרכיבים מתעדכנים באופן אוטומטי כשהמאפיינים שלהם משתנים. הם מתעדכנים מהר, בלי השוואה בין גרסאות.

לפניכם רכיב LitElement פשוט ב-TypeScript:

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

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

(יש לנו גם ממשק API מצוין של JavaScript בסיסי).

כך נוצר אלמנט שאפשר להשתמש בו בכל מקום שבו משתמשים באלמנט HTML רגיל:

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

אם אתם כבר משתמשים ברכיבי אינטרנט, תשמחו לשמוע שהם נתמכים עכשיו באופן מקורי ב-Chrome, ב-Safari וב-Firefox. בקרוב תהיה תמיכה ב-Edge, ופוליפילים נדרשים רק לגרסאות דפדפן מדור קודם.

אם זו הפעם הראשונה שאתם משתמשים ברכיבי Web, כדאי לכם לנסות אותם. רכיבי אינטרנט מאפשרים להרחיב את HTML באופן שמאפשר פעולה הדדית עם ספריות, כלים ומסגרות אחרות. לכן, הן אידיאליות לשיתוף רכיבי ממשק משתמש בארגון גדול, לפרסום רכיבים לשימוש בכל מקום באינטרנט או ליצירת מערכות לעיצוב ממשק משתמש כמו Material Design.

אפשר להשתמש ברכיבים מותאמים אישית בכל מקום שבו משתמשים ב-HTML: במסמך הראשי, במערכת ניהול תוכן, ב-Markdown או בתצוגות שנבנו באמצעות מסגרות כמו React ו-Vue. אפשר גם לשלב בין רכיבי LitElement לבין רכיבי Web Components אחרים, בין שהם נכתבו באמצעות טכנולוגיות אינטרנט רגילות ובין שהם נוצרו בעזרת כלים כמו Salesforce Lightning Web Components,‏ Stencil של Ionic, ‏ SkateJS או ספריית Polymer.

שנתחיל?

רוצים לנסות את lit-html ו-LitElement? נקודת התחלה טובה היא המדריך ל-LitElement:

אם אתם רוצים להשתמש ב-lit-html בפני עצמו, או לשלב תבניות של lit-html בפרויקט אחר, תוכלו לעיין במסמכי lit-html:

כמו תמיד, דעתך חשובה לנו. אפשר לפנות אלינו ב-Slack או ב-Twitter. הפרויקטים שלנו הם בקוד פתוח (כמובן!) ואפשר לדווח על באגים, לשלוח בקשות להוספת תכונות או להציע שיפורים ב-GitHub: