רכיבי אינטרנט: המרכיב הסודי שעוזר להעצים את האינטרנט

רכיבי אינטרנט ב-I/O 2019

פורסם: 18 ביוני 2019

ב-Google I/O בשנת 2019, קווין שף (Kevin Schaaf) מ-Polymer Project וקארידי פטיניו (Caridy Patiño) מ-Salesforce דיברו על המצב של רכיבי אינטרנט.

כמה פופולריים רכיבי אינטרנט?

אם השתמשתם באינטרנט היום, סביר להניח שהשתמשתם ברכיבי אינטרנט. לפי החישובים שלנו, בין 5% ל-8% מכל טעינות הדפים כיום משתמשים ברכיב אינטרנט אחד או יותר. העובדה הזו הופכת את רכיבי האינטרנט לאחת מהתכונות החדשות והמוצלחות ביותר בפלטפורמת האינטרנט שהושקו בחמש השנים האחרונות.

רכיבי אינטרנט נמצאים באתרים שאתם כנראה משתמשים בהם מדי יום, כמו YouTube ו-GitHub. הן משמשות גם באתרים רבים של חדשות ופרסומים שנבנו באמצעות AMP – רכיבי AMP הם גם רכיבי אינטרנט. וגם ארגונים רבים מאמצים רכיבי אינטרנט.

מהם רכיבי אינטרנט?

אז מהם רכיבי אינטרנט? מפרטי רכיבי האינטרנט מספקים קבוצה בסיסית של ממשקי API שמאפשרים להרחיב את קבוצת תגי ה-HTML המובנית של הדפדפן. רכיבי אינטרנט מספקים:

• שיטה נפוצה ליצירת רכיב (באמצעות ממשקי API רגילים של DOM).
• דרך נפוצה לקבל ולשלוח נתונים (באמצעות מאפיינים או אירועים).

מעבר לממשק הסטנדרטי הזה, התקנים לא אומרים דבר על האופן שבו רכיב מיושם בפועל:

• מנוע העיבוד שבו הוא משתמש כדי ליצור את ה-DOM.
• איך הוא מתעדכן על סמך שינויים במאפיינים שלו.

במילים אחרות, רכיבי האינטרנט אומרים לדפדפן מתי ואיפה ליצור רכיב, אבל לא איך ליצור אותו.

יוצרים יכולים לבחור דפוסי עיבוד פונקציונליים כמו ב-React כדי ליצור את רכיבי האינטרנט שלהם, או להשתמש בתבניות הצהרה כמו אלה שמוצאים ב-Angular או ב-Vue. ככותבים, יש לכם חופש מוחלט לבחור את הטכנולוגיה שבה אתם משתמשים בתוך הרכיב, ועדיין לשמור על יכולת פעולה הדדית.

למה כדאי להשתמש ברכיבי אינטרנט?

ההבדל העיקרי בין רכיבי אינטרנט לבין מערכות רכיבים קנייניות הוא יכולת פעולה הדדית. בגלל הממשק הסטנדרטי שלהם, אפשר להשתמש ברכיבי אינטרנט בכל מקום שבו משתמשים ברכיב מובנה כמו <input> או <video>.

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

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

מי משתמש ברכיבי אינטרנט?

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

אתרי תוכן

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

‫AMP היא דוגמה מצוינת שממחישה כמה מהר ובקלות רכיבי אינטרנט השתלבו בתשתית של תעשיית הפרסום לצורך הצגת תוכן.

מערכות עיצוב

יותר ויותר חברות מאחדות את האופן שבו הן מציגות את עצמן באמצעות מערכת עיצוב – קבוצה של רכיבים והנחיות שמגדירים את המראה והתחושה המשותפים של האתרים והאפליקציות של הארגון. גם רכיבי אינטרנט מתאימים מאוד כאן.

לעתים קרובות, מעצבים נאלצים להתמודד עם צוותים רבים שיוצרים גרסאות משלהם של רכיבי מערכת העיצוב על בסיס React,‏ Angular וכל המסגרות האחרות, במקום להשתמש בקבוצה יחידה של רכיבים קנוניים.

רכיבי אינטרנט הם הפתרון – מערכת רכיבים שניתן לכתוב פעם אחת ולהריץ בכל מקום, ועדיין מאפשרת לצוותי האפליקציות להשתמש במסגרת לבחירתם

חברות כמו ING,‏ EA ו-Google מטמיעות את שפת העיצוב של החברה שלהן ברכיבי אינטרנט.

‫Enterprise: רכיבי אינטרנט ב-Salesforce

רכיבי אינטרנט גם צוברים פופולריות בקרב חברות כטכנולוגיה בטוחה ועמידה לעתיד, שמאפשרת ליצור סטנדרטיזציה. קרידי פטיניו (Caridy Patiño), ארכיטקט בפלטפורמת ממשק המשתמש של Salesforce, הסביר למה הם בנו את פלטפורמת ממשק המשתמש שלהם באמצעות רכיבי אינטרנט.

‫Salesforce היא אוסף של אפליקציות – רבות מהן הן תוצאה של רכישות. כל אחת מהן יכולה לפעול על בסיס מחסנית טכנולוגיות משלה. מכיוון שהם מבוססים על סביבות שונות, קשה להעניק להם את אותו מראה ותחושה. בנוסף, Salesforce מאפשרת ללקוחות לבנות אפליקציות מותאמות אישית משלהם באמצעות פלטפורמת Salesforce. לכן, באופן אידיאלי, גם מפתחים חיצוניים יוכלו להשתמש ברכיבים.

חברת Salesforce זיהתה קבוצה של צרכים של לקוחות הפלטפורמה שלה:

• פתרונות סטנדרטיים ולא קנייניים – כך קל יותר למצוא מפתחים מנוסים, וההכשרה של מפתחים חדשים מהירה יותר.
• מודל רכיבים משותף – כך שההתאמה האישית של כל אפליקציית Salesforce מתבצעת באותו אופן.

הם גם זיהו כמה דברים שלקוחות לא רצו:

• שינויים שגורמים לבעיות ברכיבים ובאפליקציות שלהם. במילים אחרות, תאימות לאחור הייתה חובה.
• להיתקע עם טכנולוגיה ישנה ולא להיות מסוגלים להתפתח.
• להיות תקועים בתוך סביבה סגורה.

שימוש ברכיבי אינטרנט כבסיס לפלטפורמת ממשק המשתמש החדשה ענה על כל הצרכים האלה, והתוצאה היא רכיבי האינטרנט החדשים של Lightning.

איך מתחילים לעבוד עם רכיבי אינטרנט

יש הרבה דרכים מצוינות להתחיל להשתמש ברכיבי אינטרנט.

אם אתם בונים אפליקציית אינטרנט, כדאי להשתמש בחלק מרכיבי האינטרנט הרגילים הרבים שזמינים. הנה כמה דוגמאות:

• ‫Google מוכרת את מערכת Material Design שלה כרכיבי אינטרנט: Material Web Components.
• Wired Elements הוא אוסף מגניב של רכיבי אינטרנט עם מראה סקיצ'י, כאילו צוירו ביד.
• יש רכיבי אינטרנט מיוחדים כמו <model-viewer>, שאפשר להוסיף לכל אפליקציה כדי להציג תוכן תלת-ממדי.

אם אתם מפתחים מערכת עיצוב לחברה שלכם, או אם אתם מוכרים רכיב או ספרייה שאתם רוצים שיהיו שמישים בכל סביבה, כדאי לכתוב את הרכיבים באמצעות רכיבי אינטרנט. אפשר להשתמש בממשקי ה-API המובנים של רכיבי האינטרנט, אבל הם ברמה נמוכה למדי, ולכן יש מספר ספריות זמינות כדי להקל על התהליך.

כדי להתחיל ליצור רכיבים משלכם, אתם יכולים לעיין ב-LitElement, מחלקת בסיס של רכיבי אינטרנט שפותחה על ידי Google, שמספקת חוויית עיבוד פונקציונלית מצוינת שדומה ל-React.

כלים וספריות נוספים שכדאי לבדוק:

• ‫Stencil היא מסגרת שמתמקדת ברכיבי אינטרנט. הוא כולל כמה תכונות פופולריות של מסגרת, כמו JSX ו-TypeScript
• ‫Angular Elements מאפשרת לעטוף רכיבי Angular כרכיבי אינטרנט.
• העטיפה של רכיב האינטרנט Vue.js מאפשרת לארוז רכיבי Vue כרכיבי אינטרנט.

משאבים נוספים:

• באתר open-wc.org יש מידע מצוין לתחילת העבודה, וגם טיפים והגדרות ברירת מחדל לכלים של build ופיתוח.
• בקטע Web Fundamentals (היסודות של בניית אתרים) מוסבר על ממשקי API בסיסיים של רכיבי אינטרנט, ומוצגות שיטות מומלצות לעיצוב רכיבי אינטרנט.
• ב-MDN יש מאמרי עזרה בנושא ממשקי API של רכיבי אינטרנט, וגם כמה מדריכים.