רכיבי אינטרנט ב-I/O 2019
תאריך פרסום: 18 ביוני 2019
בכנס Google I/O 2019, קווין שאף (Kevin Schaaf) מפרויקט Polymer וקארידי פאטיניו (Caridy Patiño) מ-Salesforce דיברו על המצב של רכיבי אינטרנט.
עד כמה רכיבי אינטרנט פופולריים?
אם השתמשתם באינטרנט היום, סביר להניח שהשתמשתם ברכיבי אינטרנט. לפי הספירה שלנו, בין 5% ל-8% מכל טעינות הדפים כיום משתמשות ברכיב אינטרנט אחד או יותר. לכן, רכיבי אינטרנט הם אחת מהתכונות החדשות והמוצלחות ביותר של פלטפורמת האינטרנט שהושקו בחמש השנים האחרונות.
אפשר למצוא רכיבי אינטרנט באתרים שאתם כנראה משתמשים בהם כל יום, כמו YouTube ו-GitHub. הם משמשים גם בהרבה אתרי חדשות ואתרי תוכן שנבנו באמצעות AMP – רכיבי AMP הם גם רכיבי אינטרנט. גם ארגונים רבים משתמשים ברכיבי אינטרנט.
מהם רכיבי אינטרנט?
אז מהם רכיבי אינטרנט? המפרטים של רכיבי האינטרנט מספקים קבוצה של ממשקי API ברמה נמוכה שמאפשרים להרחיב את קבוצת תגי ה-HTML המובנים של הדפדפן. רכיבי אינטרנט מספקים:
- שיטה נפוצה ליצירת רכיב (באמצעות ממשקי API רגילים של DOM).
- דרך נפוצה לקבל ולשלוח נתונים (באמצעות מאפיינים או אירועים).
מעבר לממשק הסטנדרטי הזה, התקנים לא אומרים שום דבר על האופן שבו רכיב מיושם בפועל:
- באיזה מנוע רינדור הוא משתמש כדי ליצור את ה-DOM שלו.
- איך הוא מתעדכן בעצמו על סמך שינויים במאפיינים או בתכונות שלו.
במילים אחרות, רכיבי אינטרנט אומרים לדפדפן מתי ואיפה ליצור רכיב, אבל לא איך ליצור אותו.
היוצרים יכולים לבחור דפוסי עיבוד פונקציונליים, בדיוק כמו React, כדי ליצור את רכיבי האינטרנט שלהם, או להשתמש בתבניות הצהרתיות כמו אלה שאפשר למצוא ב-Angular או ב-Vue. כיוצרים, יש לכם חופש מוחלט לבחור את הטכנולוגיה שבה אתם משתמשים ברכיב, ועדיין לשמור על יכולת פעולה הדדית.
מה היתרונות של רכיבי אינטרנט?
ההבדל העיקרי בין רכיבי אינטרנט לבין מערכות רכיבים קנייניות הוא יכולת הפעולה ההדדית. בגלל הממשק הסטנדרטי שלהם, אתם יכולים להשתמש ברכיבי אינטרנט בכל מקום שבו הייתם משתמשים ברכיב מובנה כמו <input> או <video>.
מכיוון שאפשר לבטא אותם כ-HTML אמיתי, כל סביבות העבודה הפופולריות יכולות לעבד אותם. כך אפשר להשתמש ברכיבים שלכם באופן נרחב יותר, במגוון רחב יותר של אפליקציות, בלי לנעול את המשתמשים במסגרת אחת.
מכיוון שהממשק של הרכיבים הוא סטנדרטי, אפשר לשלב באותו דף רכיבי אינטרנט שנוצרו באמצעות ספריות שונות. העובדה הזו עוזרת להכין את האפליקציות לעתיד כשמעדכנים את סטאק התוכנות. במקום לעשות שינוי ענק בבת אחת בין מסגרת אחת לאחרת, שבו מחליפים את כל הרכיבים, אפשר לעדכן את הרכיבים אחד אחרי השני.
מי משתמש ברכיבי אינטרנט?
מכל הסיבות האלה, רכיבי אינטרנט הם למעשה הצלחה עצומה במגוון תרחישי שימוש שונים. יש שלושה תרחישים לדוגמה פופולריים במיוחד: אתרי תוכן, מערכות עיצוב ואפליקציות ארגוניות.
אתרי תוכן
רכיבי אינטרנט הם הטכנולוגיה המושלמת לשיפור הדרגתי של תוכן, כי הם כבר יכולים להיות פלט כ-HTML רגיל על ידי מספר עצום של מערכות CMS.
AMP היא דוגמה מצוינת למהירות ולקלות שבהן רכיבי אינטרנט השתלבו בתשתית של תעשיית הפרסום להצגת תוכן.
מערכות עיצוב
יותר ויותר חברות מאחדות את האופן שבו הן מציגות את עצמן באמצעות מערכת עיצוב – קבוצה של רכיבים והנחיות שמגדירים את המראה והתחושה המשותפים לאתרים ולאפליקציות של הארגון. גם כאן, רכיבי אינטרנט הם פתרון מצוין.
לעתים קרובות, מעצבים צריכים להתמודד עם צוותים רבים שיוצרים גרסאות משלהם לרכיבים של מערכת העיצוב על גבי React, Angular וכל שאר המסגרות, במקום להשתמש בקבוצה אחת של רכיבים קנוניים.
רכיבי אינטרנט הם הפתרון – מערכת רכיבים שבאמת כותבים פעם אחת ומריצים בכל מקום, ועדיין מאפשרת לצוותי האפליקציות להשתמש במסגרת שהם בוחרים.
חברות כמו ING, EA ו-Google מטמיעות את שפת העיצוב של החברה ברכיבי אינטרנט.
ארגונים: רכיבי אינטרנט ב-Salesforce
רכיבי אינטרנט גם מתקדמים בקצב מרשים בתוך ארגונים כטכנולוגיה בטוחה ועמידה לעתיד, שניתן להשתמש בה כסטנדרט. קארידי פאטיניו, אדריכל פלטפורמת ממשק המשתמש של Salesforce, הסביר למה הם בנו את פלטפורמת ממשק המשתמש שלהם באמצעות רכיבי אינטרנט.
Salesforce הוא אוסף של אפליקציות, שרבות מהן הגיעו מרכישות. כל אחד מהם יכול לפעול על סטאק תוכנות משלו. מכיוון שהם בנויים על סטאקים שונים, קשה לתת לכולם את אותו מראה ותחושה. בנוסף, Salesforce מאפשרת ללקוחות ליצור אפליקציות בהתאמה אישית באמצעות הפלטפורמה של Salesforce. לכן, באופן אידיאלי, גם מפתחים חיצוניים צריכים להיות מסוגלים להשתמש ברכיבים.
ב-Salesforce זיהו קבוצה של צרכים של לקוחות הפלטפורמה:
- פתרונות סטנדרטיים, ולא פתרונות קנייניים – כך קל יותר למצוא מפתחים מנוסים, ומהר יותר להכשיר מפתחים חדשים.
- מודל רכיבים משותף – כך שההתאמה האישית של כל אפליקציית Salesforce פועלת באותו אופן.
הם גם זיהו כמה דברים שהלקוחות לא רצו:
- שינויים ברכיבים ובאפליקציות שלהם שעלולים לגרום לכשל. במילים אחרות, תאימות לדורות קודמים הייתה חובה.
- להיתקע עם טכנולוגיה ישנה בלי יכולת להתפתח.
- להיות תקועים בתוך גן מוקף חומה.
השימוש ברכיבי אינטרנט כבסיס לפלטפורמת ממשק המשתמש החדשה ענה על כל הצרכים האלה, והתוצאה היא Lightning Web Components החדש.
איך מתחילים להשתמש ברכיבי אינטרנט
יש הרבה דרכים מצוינות להתחיל לעבוד עם רכיבי אינטרנט.
אם אתם מפתחים אפליקציית אינטרנט, כדאי להשתמש בחלק מהרכיבים הרבים שזמינים לאינטרנט. הנה כמה דוגמאות:
- Google מספקת מערכת עיצוב Material Design משלה כרכיבי אינטרנט: רכיבי אינטרנט של Material.
- Wired Elements היא קבוצה מגניבה של רכיבי אינטרנט עם מראה של שרטוט ידני.
- יש רכיבי אינטרנט נהדרים למטרות מיוחדות כמו
<model-viewer>, שאפשר להוסיף לכל אפליקציה כדי להוסיף תוכן תלת-ממדי.
אם אתם מפתחים מערכת עיצוב לחברה שלכם, או אם אתם מוכרים רכיב או ספרייה שאתם רוצים שיהיו שמישים בכל סביבה, כדאי לכם ליצור את הרכיבים שלכם באמצעות רכיבי אינטרנט. אפשר להשתמש בממשקי ה-API המובנים של רכיבי האינטרנט, אבל הם ברמה די נמוכה, אז יש כמה ספריות זמינות שמקלות על התהליך.
כדי להתחיל ליצור רכיבים משלכם, אתם יכולים לעיין ב-LitElement, מחלקה בסיסית של רכיבי אינטרנט שפותחה על ידי Google, עם חוויית עיבוד פונקציונלית נהדרת שדומה ל-React.
כלים וספריות נוספים שכדאי לשקול:
- Stencil הוא framework שמתמקד ברכיבי אינטרנט. הוא כולל כמה תכונות פופולריות של מסגרות, כמו JSX ו-TypeScript
- Angular Elements מספק דרך לעטוף רכיבי Angular כרכיבי אינטרנט.
- מעטפת רכיבי האינטרנט של Vue.js מאפשרת לארוז רכיבי Vue כרכיבי אינטרנט.
משאבים נוספים:
- באתר open-wc.org יש מידע מצוין למתחילים, וגם טיפים והגדרות ברירת מחדל לכלי פיתוח ו-build.
- ב-Web Fundamentals יש מדריכים בסיסיים על ממשקי ה-API של רכיבי האינטרנט הבסיסיים, ושיטות מומלצות לעיצוב רכיבי אינטרנט.
- ב-MDN יש מסמכי עזר לממשקי ה-API של רכיבי האינטרנט, וגם כמה מדריכים.