תבניות ורכיבי אינטרנט במהירות הבזק – lit-html & LitElement

ג'סטין פגאני
Twitter GitHub דף הבית

היום אנחנו שמחים להודיע על הגרסאות היציבות הראשונות של שתי ספריות פיתוח האינטרנט מהדור הבא שלנו: lit-html ו-LitElement.

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

אם אתם עוקבים אחרי הפרויקטים, אתם בוודאי כבר מכירים את התחומים lit-html ו-LitElement (תוכלו לדלג לסוף אם תרצו). אם זו הפעם הראשונה שאתם משתמשים ב-Lit-html וב-LitElement, המשיכו לקרוא כדי לקבל סקירה כללית.

lit-html: ספרייה קטנה ומהירה ליצירת תבניות HTML

Lit-html הוא ספריית JavaScript קטנה (קצת יותר מ-3k בחבילה, מוקטנת ו-gzipped) ומהירה ליצירת תבניות 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 לא צריך לבצע הפרשות. במקום זאת, הוא זוכר איפה הכנסת ביטויים לתבנית, ומעדכנת רק את החלקים הדינמיים האלה.
  • Expressive. lit-html נותן לכם את מלוא העוצמה של JavaScript, ממשק משתמש הצהרתי ודפוסי תכנות פונקציונליים. הביטויים בתבנית lit-html הם רק JavaScript, כך שלא צריך ללמוד תחביר מותאם אישית, ולך יש את כל יכולת ההבעה של השפה. lit-html תומך בסוגים רבים של ערכים במקור: מחרוזות, צומתי DOM, מערכים ועוד. התבניות עצמן הן ערכים שאפשר לחשב, להעביר אל הפונקציות ואליהן ולקונן אותן.
  • ניתנת להרחבה: ניתן גם להתאים אישית את ה-Lit-html ולהרחיב אותו - ערכה משלכם לבניית תבניות. ההוראות עוזרות להתאים אישית את אופן הטיפול בערכים, וכך מאפשרות לכם לקבל ערכים אסינכרוניים, חזרות עם מפתחות יעילות, גבולות שגיאות ועוד. הקוד lit-html כולל כמה הוראות מוכנות לשימוש ומאפשר לכם להגדיר בקלות הוראות משלכם.

מספר ספריות ופרויקטים כבר כוללים lit-html. תוכל למצוא רשימה של חלק מהספריות האלה במאגר awesome-lit-html ב-GitHub.

אם אתם צריכים תבניות בלבד, תוכלו להתחיל כבר עכשיו עם lit-html docs. אם אתם רוצים ליצור רכיבים לשימוש באפליקציה או לשתף אותם עם הצוות, המשיכו לקרוא.

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>`;
  }
}

(יש לנו גם וניל JavaScript API מעולה.)

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

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

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

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

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

שנתחיל?

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

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

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