רכיבי Web ב-I/O 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 רגיל.
AMP הוא דוגמה מצוינת לאופן שבו רכיבי אינטרנט משתלבים במהירות ובקלות בתשתית של תעשיית ההוצאה לאור להצגת תוכן.
מערכות עיצוב
יותר ויותר חברות מאוחדות את האופן שבו הן מציגות את עצמן באמצעות מערכת עיצוב – קבוצה של רכיבים והנחיות שמגדירים את המראה והתחושה המשותפים לאתרים ולאפליקציות של הארגון. גם רכיבי אינטרנט מתאימים כאן.
לעיתים קרובות, מעצבים צריכים להתמודד עם צוותים רבים שמפתחים גרסאות משלהם של רכיבי מערכת העיצוב מעל React, Angular וכל המסגרות האחרות, במקום להשתמש בקבוצה אחת של רכיבים קנוניקליים.
רכיבי ה-Web הם התשובה – מערכת רכיבים שבאמת כותבים פעם אחת ומריצים בכל מקום, ועדיין נותנת לצוותים של האפליקציות את החופש להשתמש במסגרת שבה הם רוצים.
חברות כמו ING, EA ו-Google מטמיעות את שפת העיצוב של החברה שלהן ברכיבי אינטרנט.
Enterprise: רכיבי אינטרנט ב-Salesforce
רכיבי האינטרנט גם צוברים תאוצה בארגונים כטכנולוגיה בטוחה ועכשווית שאפשר להשתמש בה כסטנדרט. Caridy Patiño, ארכיטקטית בפלטפורמת ממשק המשתמש של Salesforce, הסבירה למה הם יצרו את פלטפורמת ממשק המשתמש שלהם באמצעות רכיבי אינטרנט.
Salesforce היא אוסף של אפליקציות, שרבות מהן נרכשו. כל אחד מהם יכול לפעול בסטאק טכנולוגי משלו. מכיוון שהן מבוססות על סטאקים שונים, קשה לתת לכל אחת מהן את אותו מראה ותחושה. בנוסף, Salesforce מאפשרת ללקוחות ליצור אפליקציות מותאמות אישית משלהם באמצעות פלטפורמת Salesforce. לכן, באופן אידיאלי, גם מפתחים חיצוניים צריכים להיות מסוגלים להשתמש ברכיבים.
ב-Salesforce זיהו קבוצה של צרכים של לקוחות הפלטפורמה שלהם:
- פתרונות סטנדרטיים ולא קנייניים – כך קל יותר למצוא מפתחים מנוסים, ומהר יותר להכשיר מפתחים חדשים.
- מודל רכיבים משותף – כך שאפשר להתאים אישית כל אפליקציה של Salesforce באותו אופן.
הם זיהו גם כמה דברים שהלקוחות לא רצו:
- שינויים משמעותיים ברכיבים ובאפליקציות שלהם. במילים אחרות, תאימות לאחור הייתה חובה.
- להיתקע בטכנולוגיה ישנה ולא להיות מסוגלים להתפתח.
- להיות תקועים בגן מוקף חומה.
השימוש ברכיבי אינטרנט כבסיס לפלטפורמת הממשק החדשה ענה על כל הצרכים האלה, והתוצאה היא רכיבי האינטרנט המהירים החדשים.
תחילת העבודה עם רכיבי אינטרנט
יש הרבה דרכים מצוינות להתחיל להשתמש ברכיבי אינטרנט.
אם אתם מפתחים אפליקציית אינטרנט, כדאי לשקול להשתמש בחלק מרכיבי האינטרנט הרבים שזמינים. הנה כמה דוגמאות:
- Google מוכרת את מערכת העיצוב שלה בסגנון Material כרכיבי אינטרנט: Material Web Components.
- Wired Elements הם קבוצה מגניבת של רכיבי אינטרנט עם מראה שרוטט ביד.
- יש רכיבי Web נהדרים למטרות מיוחדות, כמו
<model-viewer>, שאפשר להוסיף לכל אפליקציה כדי להוסיף תוכן תלת-ממדי.
אם אתם מפתחים מערכת עיצוב לחברה שלכם, או אם אתם מוכרים רכיב או ספרייה יחידים שאתם רוצים שיהיו ניתנים לשימוש בכל סביבה, כדאי לכם לכתוב את הרכיבים שלכם באמצעות רכיבי אינטרנט. אפשר להשתמש בממשקי ה-API המובנים של רכיבי האינטרנט, אבל הם ברמה נמוכה למדי, ולכן יש כמה ספריות שזמינות כדי להקל על התהליך.
כדי להתחיל ליצור רכיבים משלכם, כדאי לבדוק את LitElement, – רכיב אב של רכיבי אינטרנט שפותח על ידי Google, עם חוויית עיבוד פונקציונלי נהדרת שדומה ל-React.
כלים וספריות נוספים שאפשר להשתמש בהם:
- Stencil היא מסגרת שמתמקדת ברכיבי אינטרנט. הוא כולל כמה תכונות פופולריות של מסגרת, כמו JSX ו-TypeScript
- Angular Elements מספקת דרך לעטוף רכיבי Angular כרכיבי אינטרנט.
- עטיפה של רכיבי אינטרנט ב-Vue.js מספקת דרך לארוז רכיבי Vue כרכיבי אינטרנט.
משאבים נוספים:
- באתר open-wc.org יש מידע מצוין לתחילת העבודה, וגם טיפים והגדרות ברירת מחדל לכלים לפיתוח ול-build.
- Web Fundamentals (היסודות של בניית אתרים) מספק מבוא לממשקי ה-API הבסיסיים של רכיבי ה-Web, ושיטות מומלצות לעיצוב רכיבי Web.
- ב-MDN יש מסמכי עזרה לממשקי ה-API של רכיבי האינטרנט, וגם מדריכים מסוימים. \
תמונה ראשית (Hero) של Jason Tuinstra ב-Unsplash.
הערה של העורך: התרשים של השימוש ברכיבים מותאמים אישית עודכן כך שיציג את נתוני השימוש החודשיים המלאים, כפי שמדווחים ב-chromestatus.com. גרסה קודמת של הפוסט הזה כללה תרשים ברמת פירוט של 6 חודשים, ללא החודשים האחרונים. הסדרות V0 ו-V1 בתרשים המקורי היו מוערמות. עכשיו הן מוצגות ללא ערימת נתונים עם קו של סכום כולל כדי להסיר את אי-הבהירות. העלייה החדה בסוף שנת 2017 נובעת משינוי במערכת איסוף הנתונים של chromestatus.com. השינוי הזה השפיע על הנתונים הסטטיסטיים של כל התכונות בפלטפורמת האינטרנט, והוביל למדידות מדויקות יותר מעכשיו והלאה.