אמ:לק
מה הן web components? ממה הן מורכבות, איך יוצרים אותן ומה היתרונות בשימוש בהן? (וגם הפנייה לפוסט אחד על חסרונות), וגם – מה הקשר בינהן ובין design-system?
ספר הילדים האהוב עלי עוד מימי ילדותי הוא הדלעת המופלאה של לנרט הלסינג. הספר מספר על זוג דובים שמגדלים דלעת לא סטנדרטית שהופכת את החיים ומשנה את מסלול חייהם. או אם לדייק את מוסר ההשכל, הדובים הם אלה שמשנים את אורח חייהם על ידי ההחלטות שלהם. אני שומעת את מבטי התהייה – מה לדלעת, לדובים ולפוסט שמתוייג תחת ״תכנות״?!
לפעמים אני חושבת על המסע שהתחלתי לפני כמה שנים וכמה הוא דומה למסע שהדובים עוברים. התחלתי את מסעי כמעצבת, ואז עברתי להיות מפתחת html ו-css. נדדתי מאורט אל investing.com ומשם אל Vonage. לכל מקום לקחתי איתי את כלי הזהב שלי (בספר יש לדוב ולדובון אוסף של כלים; לדוב בצבע זהב ולדובון בצבע כסף), שהם הידע שלי ב-html ו-css, ובכל מקום למדתי עוד והחכמתי.
וכמובן, כשאני לומדת, אני אוהבת לכתוב על זה 🙂
אם לפני יותר משנה כתבתי פוסט על style-guide ומאוחר יותר גם על design-system – איך עבדתי על יישום שלו, מה למדתי בדרך, ואפילו כתבתי על הרצאה שנתתי על design-system – אז הפעם אני רוצה לספר על design-system שאני שותפה בו ב-Vonage.
ל-design-system שלנו קוראים vivid, והייחוד שלו על פני ה-design-system שעבדתי עליו ב-investing הוא העובדה שהוא מבוסס web components. לאמיתו של דבר, Vivid לא לבד בתחום, ויש עוד design-system מבוססי web-components:
web components
ב 2014 הייתי בכנס של smashing magazine יחד עם לאה כהן. ביום הראשון הייתה הרצאה של אדי אוסמאני על web components (אפשר לקרוא על ההרצאה בסיכום של לאה). מה שהוא תיאר בהרצאה שלו היה נשמע כל כך שאפתני ודמיוני, אבל הנה אנחנו פה, 7 שנים אחרי, ו-web components חיות ובועטות ואפילו נתמכות בכל הדפדפנים (מה שמוביל אותי למסקנה המתבקשת never say never).
מי אתן web components?
Web Components הם חבילה של טכנולוגיות שונות המאפשרות ליצור אלמנטים מותאמים אישית (הניתנים לשימוש חוזר) כשהפונקציונליות והעיצוב שלהם סגורים ומנותקים (encapsulated) מהקוד של הפרויקט.
וכמו תמיד – באנגלית זה נשמע הרבה, הרבה יותר הגיוני:
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
מה יש בכן web components?
כל web component מורכבת משלושה מרכיבים:
- custom elements
- shadow dom
- templates & slots
shadow dom
אחד המרכיבים החשובים של web-components הוא ה-shadow-dom, ועל אף שלכאורה נשמע שזה לא כזה מורכב כי את ה-DOM אני כבר מכירה, עדיין לקח לי זמן להבין לגמרי איך ומה אני רואה.
העץ שמייצר ה-DOM מוכר לכל מי שמשתמש ב-develpoer tools ועשה inspect elelment. אבל ברירת המחדל של התצוגה שם היא להציג רק את ה-DOM המרכזי, ואנחנו יכולים להעביר את כל חיינו בלי לדעת שה-shadow-dom נמצא שם בעצם בהרבה אלמנטי HTML , כמו select
למשל.
לא יודעים איך לראות את ה-shadow-dom של אלמנטים? כנסו, תקראו ותעשירו את ה-dev-tools שלכם
Custom Element
ל-shadow-dom אין זכות קיום ללא ה-DOM, ותמיד הוא ״יתארח״ בתוך אלמנט שנמצא בתוך ה-DOM. לכן בייצור של הקומפוננטות, אנחנו מייצרים בעצם אלמנט HTML חדש שהוא ״מארח״ (host), ולתוכו אנחנו יוצקים תבנית חדשה של HTML שמייצר shadow-dom – עץ חדש של אלמנטים.
<my-custom-element>
#shadow-root (open)
<div>here goes my cpomponent. I'm hosted inside 'my-custom-element</div>
</my-custom-element>
ה-custom element בעצם משמש כ-service. אפשר להגדיר לו קונפיגורציה (מה אנחנו רוצים שיהיה בתוכו – כמו למשל – כותרת, כפתור, אייקונים וכדומה) ולקבל בדפדפן תוצר מוגמר. את התוכן אפשר לקבל מהמשתמש (מי שמשתמש בקומפוננטה, לא משתמש הקצה באתר/אפליקציה) ע״י שימוש ב properties.על ידי הזנה של כמה פרמטרים – מתקבל התוצר המוגמר (דוגמת קוד בקומפוננטה של הכפתור בהמשך).
אפשר לדמות את ה- custom element למכונה של גלידה אמריקאית – בוחרים את הטעם לוחצים על כפתור ומקבלים גלידה, בלי לדעת על כל התהליך שקורה מאחורי הקלעים.
templates & slots
קומפוננטה יכולה להכיל תוכן בשני אופנים:
- תבנית מוגדרת מראש שמכילה html והיוזר מכניס את התוכן דרך properties או attributes
slot
(עוד עלslot
בהמשך הפוסט) שבתוכו היוזר יכול הכניס מה שהוא רוצה.
באפשרות הראשונה, אנחנו (יצרני הקופוננטה) בעצם מחליטים מה יכול להיות בתוכה.
ניקח לדוגמה קומפוננטה של כפתור – המשתמש יכול להכניס מלל לכפתור, יכול לבחור אם יש בכפתור אייקון ואם כן האם הוא לפני הטקסט או אחריו. ניתן גם לבחור איך ייראה הכפתור – גוון, צבע מלא או רק קו מתאר, ועוד אפשרויות מבין מגוון אפשרויות מוכנות מראש. המשתמש לא יוכל להכניס לתוך הכפתור אלמנטים אחרים כמו למשל span עם טקסט נוסף, אייקון נוסף וכו׳.
בדוגמה הבאה תוכלו לראות את האופן שבו מוסיפים אלמנט מסוג כפתור המכיל טקסט – I'm a button, הניראות שלו מלאה, עם עיגוליות בצדדים, ובצבע של קריאה לפעולה.
<vwc-button label="I'm a button" appearance="filled" connotation="cta" shape="pill"></vwc-button>
ככה ייראה הכפתור באתר/האפליקציה שלנו:
וככה ייראה המבנה שלו ב HTML:
אם היינו רוצים לאפשר למשתמשים שלנו להכניס עוד אלמנט לכפתור (פחות שימושי, אבל לשם הדוגמה אני אשאר עם הכפתור), אזי בתבנית של הכפתור שלנו נוסיף אפשרות של slot
.
כפתור עם אפשרות של slot
בתוכו ייראה ככה כשהמשתמש יכניס אותו למערכת:
<vwc-button label="I'm a button" appearance="filled" connotation="cta" shape="pill">
<vwc-circular-progress slot="button-slot">I'm an animation component inside the button slot</vwc-circular-progress>
</vwc-button>
ככה הכפתור ייראה:
וככה נראה אותו בקוד שלנו:
slot
הוא בעצם מיכל שאפשר להכניס אליו כל דבר. אופציה כזאת מאפשרת לנו לייצר קומפוננטה סגורה, אבל עם אופציה לואריאציות ע״י שימוש ב״מיכל״, אשר אליו אפשר לכניס כל מה שרוצים.
בהקשר של design-system, ה-slot
לכאורה נשמע אחלה – ובהרבה מקרים באמת השימוש בו רצוי, אבל שימוש ב- slot
גם משאיר את הקומפוננטה שלנו קצת פרוצה. היות ואפשר להכניס לתוך slot
כל דבר – החל מאלמנט html
פשוט ועד לקומפוננטה נוספת. בשל כך slot
הוא קצת בעייתי וצריך להשתמש בו בתבונה. השימוש בו יכול לפגוע בשמירה על עקרונות העיצוב של ה design-system, לפגוע בסמנטיקה של ה html
וגם יכול לפגוע בנגישות של הקומפוננטה.
הטריק הוא לשמור על איזון בין חירות לבין סגר (ממש כמו שהולך לנו מעולה בקורונה 😉 )
מילות סיכום
מה עוד אפשר לעשות עם web-componets? המון!
על מה לא הרחבתי בכלל? על עיצוב, UI וכמובן CSS של הקומפוננטות. צריך משהו להשאיר לפוסטים נוספים 🙂
ואסיים עם פוסט של לאה ורו, (הגורו שלי במשך השנים הראשונות שגיליתי את עולם ה – css
) בו היא יוצאת נגד ההבטחה הלא ממומשת של web-components , ופוסט שעונה על הסוגיות שהיא העלתה. מעניין לקרוא.
עוד מקורות מידע מרחיבים, מפרטים, ומעשירים על web-components:
- Shadow DOM v1: Self-Contained Web Components
- MDN- Web Components
- Make Your StencilJS Web Components Faster by Using Shadow DOM
- The Motivation For Using Web Components, An Introduction (ארבעה פוסטים)
- Web Components: It’s about Time | Erin Zimmer – וידאו מעולה
- האם Web Components ישנו את פני עולם ה-Frontend? – לא ממש הסבר אבל פודקאסט מעניין מבית היוצר של עושים תוכנה
- HTML with Superpowers והמדריך המקיף שהם בנו (נוסף ב 01.2023)
- הסבר על Web-components בעברית (נוסף ב 04.2023)
- HTML Web Components Are Having a Moment (נוסף ב 12.2023)
הדלעת המופלאה הוא ספר מופלא
וגם מהאהובים עלי 🙂
אכן, אחד המופלאים 🙂