רכיבי אינטרנט בכנס I/O 2019
ב-Google I/O 2019, קווין שחאף מפרויקט Polymer וקריידי פאטיניו מ-Salesforce דיברו על המצב של רכיבי אינטרנט.
עד כמה פופולריים רכיבי אינטרנט?
אם השתמשתם באינטרנט היום, סביר להניח שכבר השתמשתם ברכיבי אינטרנט. לפי הספירה שלנו, בין 5% ל-8% מכל טעינות הדפים כיום משתמשים ברכיב אינטרנט אחד או יותר. לכן, רכיבי אינטרנט הם אחת מהתכונות החדשות המוצלחות ביותר של פלטפורמות האינטרנט, שנשלחו בחמש השנים האחרונות.
תוכלו למצוא רכיבי אינטרנט באתרים שאתם כנראה משתמשים בהם מדי יום, כמו YouTube ו-GitHub. הם נמצאים גם בשימוש באתרי חדשות ופרסומים רבים שנוצרו באמצעות AMP. רכיבי AMP הם גם רכיבי אינטרנט. ארגונים רבים גם משתמשים ברכיבי אינטרנט.
מהם רכיבי אינטרנט?
אז מהם רכיבי אינטרנט? מפרטי רכיבי האינטרנט מספקים קבוצה של ממשקי API ברמה נמוכה שמאפשרים להרחיב את קבוצת תגי ה-HTML המובנית של הדפדפן. רכיבי האינטרנט מספקים:
- שיטה נפוצה ליצירת רכיב (באמצעות ממשקי API סטנדרטיים של DOM).
- דרך נפוצה לקבלה ולשליחה של נתונים (באמצעות נכסים/אירועים).
מחוץ לממשק הסטנדרטי, התקנים לא מציינים דבר לגבי אופן היישום בפועל של רכיב:
- באיזה מנוע רינדור המערכת משתמשת כדי ליצור את ה-DOM שלה.
- איך הוא מעדכן את עצמו על סמך שינויים במאפיינים או במאפיינים שלו.
במילים אחרות, רכיבי אינטרנט מורים לדפדפן מתי ואיפה ליצור רכיב, אבל לא איך.
מחברים יכולים לבחור דפוסי רינדור פונקציונליות כמו React כדי לבנות את רכיבי האינטרנט שלהם, או שהם יכולים להשתמש בתבניות מוצהרות כמו ב-Angular או ב-Vue. ככותבים, יש לכם חופש מוחלט לבחור בטכנולוגיה שבה תשתמשו בתוך הרכיב, תוך שמירה על יכולת פעולה הדדית.
למה כדאי להשתמש ברכיבי אינטרנט?
ההבדל העיקרי בין רכיבי אינטרנט לבין מערכות רכיבים קנייניות הוא יכולת פעולה הדדית. בגלל הממשק הסטנדרטי שלהם, ניתן להשתמש ברכיבי אינטרנט בכל מקום שבו נעשה שימוש ברכיב מובנה כמו <input> או <video>.
אפשר לבטא אותם כ-HTML אמיתי, ולכן אפשר לעבד אותם באמצעות כל ה-frameworks הפופולריות. כך אפשר יהיה להשתמש ברכיבים באופן נרחב יותר, במגוון רחב יותר של אפליקציות, בלי לנעול את המשתמשים באף מסגרת אחת.
מאחר שממשק הרכיבים הוא סטנדרטי, ניתן לשלב באותו דף רכיבי אינטרנט שהוטמעו באמצעות ספריות שונות. העובדה הזו עוזרת להכין את האפליקציות לעתיד כשאתם מעדכנים את סטאק התוכנות. במקום לבצע מעבר ענק בין מסגרת אחת לאחרת, שבו אתם מחליפים את כל הרכיבים, אתם יכולים לעדכן את הרכיבים אחד אחרי השני.
מי משתמש ברכיבי אינטרנט?
לכן, מכל הסיבות האלה, רכיבי האינטרנט משיגים הצלחה עצומה במגוון של תרחישים שונים לדוגמה. שלושה תרחישי שימוש נפוצים במיוחד: אתרי תוכן, מערכות עיצוב ואפליקציות לארגונים.
אתרים ברשת התוכן
רכיבי אינטרנט הם הטכנולוגיה המושלמת לשיפור הדרגתי של התוכן, מפני שניתן כבר להפיק אותם כ-HTML סטנדרטי באמצעות מספר רב של מערכות CMS.
AMP הוא דוגמה מצוינת לדרך שבה רכיבי אינטרנט משתלבים במהירות ובקלות בתשתית של תעשיית הפרסום לצורך הצגת תוכן.
מערכות עיצוב
יותר ויותר חברות מאחדות את האופן שבו הן מציגות את עצמן באמצעות מערכת עיצוב – קבוצה של רכיבים והנחיות שמגדירים את המראה והתחושה הנפוצים של האתרים והאפליקציות בארגון. גם רכיבי אינטרנט מתאימים כאן מאוד.
לעיתים קרובות המעצבים צריכים להתמודד עם צוותים רבים שבונים גרסאות משלהם של רכיבי מערכת העיצוב על גבי React, Angular וכל שאר ה-frameworks, במקום להשתמש בקבוצה אחת של רכיבים קנוניים.
רכיבי אינטרנט הם התשובה – מערכת רכיבים שניתנת לכתיבה פעם אחת, שפועלת בכל מקום, ועדיין נותנת לצוותי אפליקציות חופש להשתמש במסגרת שהם בוחרים
חברות כמו ING, EA ו-Google מטמיעים את שפת העיצוב של החברה ברכיבי אינטרנט.
Enterprise: רכיבי אינטרנט ב-Salesforce
בנוסף, רכיבי האינטרנט נמצאים במגמת עלייה בארגונים, כטכנולוגיה בטוחה ועמידה לעתיד היטב. קרידי פטיניו, אדריכל של פלטפורמת ממשק המשתמש של Salesforce, הסביר למה הם בנו את פלטפורמת ממשק המשתמש שלהם באמצעות רכיבי אינטרנט.
Salesforce הוא אוסף של אפליקציות, שרבות מהן הגיעו מרכישות. כל אחד מהם יכול לפעול בסטאק טכנולוגיות משלו. מכיוון שהן בנויות על מקבצים שונים, קשה לתת לכולן את אותו המראה והתחושה. בנוסף, Salesforce מאפשרת ללקוחות ליצור אפליקציות מותאמות אישית משלהם באמצעות פלטפורמת Salesforce. לכן, באופן אידיאלי, גם מפתחים חיצוניים צריכים להשתמש ברכיבים.
מערכת Salesforce זיהתה קבוצה של צרכים מלקוחות של הפלטפורמה שלה:
- פתרונות רגילים ולא פתרונות קנייניים – כך קל יותר למצוא מפתחים מנוסים ולגייס מפתחים חדשים מהר יותר.
- מודל רכיבים נפוץ – כך שהתאמה אישית של כל אפליקציה ב-Salesforce עובדת באותה דרך.
הם גם ציינו כמה דברים שהלקוחות לא רצו:
- שינויים שעלולים לגרום לכשלים ברכיבים ובאפליקציות שלהם. במילים אחרות, תאימות לאחור הייתה חובה.
- להיות תקועים עם טכנולוגיה ישנה ובלי להתפתח.
- להיות תקועים בגן מוקף חומה.
השימוש ברכיבי אינטרנט כבסיס לפלטפורמת ממשק המשתמש החדשה ענה על כל הצרכים האלה, והתוצאה היא רכיבי אינטרנט של Lightning החדשים.
תחילת העבודה עם רכיבי אינטרנט
יש הרבה דרכים נהדרות להתחיל לעבוד עם רכיבי אינטרנט.
אם אתם בונים אפליקציית אינטרנט, כדאי להשתמש בכמה מרכיבי האינטרנט הרבים שזמינים לכם. הנה כמה דוגמאות:
- Google מספקת מערכת Material Design משלה בתור רכיבי אינטרנט: Material Web Components (רכיבי אינטרנט).
- הרכיבים החיויים הם קבוצה מדליקה של רכיבי אינטרנט שכוללים מראה ציורי שנרשם ביד.
- יש רכיבי אינטרנט מצוינים לשימוש מיוחד, כמו
<model-viewer>, שאותם אפשר להכניס לכל אפליקציה כדי להוסיף תוכן בתלת-ממד.
אם אתם מפתחים מערכת עיצוב עבור החברה שלכם, או אם אתם מוכרים רכיב יחיד או ספרייה מסוימת שתרצו להשתמש בהם בכל סביבה, כדאי ליצור את הרכיבים באמצעות רכיבי אינטרנט. אתם יכולים להשתמש בממשקי ה-API המובנים של רכיבי האינטרנט, אבל הם ברמה נמוכה למדי, ולכן יש מספר ספריות הזמינות שיקלו על התהליך.
כדי להתחיל לבנות רכיבים משלכם, תוכלו לנסות את LitElement, מחלקת בסיס לרכיבי אינטרנט שפותחה על ידי Google, שיש לה חוויית רינדור פונקציונלית מעולה שדומה ל-React.
כלים וספריות אחרים שכדאי לשקול:
- Stencil היא מסגרת שמספקת עדיפות לרכיבי אינטרנט. הוא כולל כמה תכונות framework פופולריות, כמו JSX ו-TypeScript
- רכיבים אנגוליים מספקים דרך לארוז רכיבים של Angular כרכיבי אינטרנט.
- wrapper של רכיב אינטרנט של Vue.js מספק דרך לארוז רכיבי Vue כרכיבי אינטרנט.
משאבים נוספים
- open-wc.org כולל מידע מעולה לתחילת העבודה, וכן טיפים והגדרות ברירת מחדל עבור כלים לבניית ולפיתוח.
- ב-Web Fundamentals (היסודות של בניית אתרים) תוכלו למצוא הסברים על ממשקי ה-API הבסיסיים של רכיבי האינטרנט, וגם שיטות מומלצות לעיצוב רכיבי אינטרנט.
- MDN מספק מסמכי עזר לממשקי ה-API של רכיבי האינטרנט, וגם כמה מדריכים. \
תמונה ראשית (Hero) מאת Jason Tuinstra ב-UnFlood.
הערה חשובה: תרשים השימוש ברכיבים מותאמים אישית עודכן ועכשיו הוא מציג את נתוני השימוש החודשיים המלאים, כפי שדווח ב-chromestatus.com. גרסה קודמת של הפוסט הזה כללה תרשים ברמת פירוט של 6 חודשים, ללא החודשים האחרונים. הסדרות V0 ו-V1 בתרשים המקורי מוצגות בערימה. עכשיו הן מוצגות ללא מקבץ עם קו כולל כדי למנוע דו-משמעיות. הקפיצה הפתאומית בסוף 2017 נובעת משינוי במערכת איסוף הנתונים של chromestatus.com. השינוי השפיע על הנתונים הסטטיסטיים של כל התכונות של פלטפורמת האינטרנט, וכתוצאה מכך הניב מדידות מדויקות יותר.