web components למתחילים

משך זמן קריאה: 6 דקות

אמ:לק

מה הן 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 למשל.

צילום מתוך dev-tools
מראה של shadow dom של אלמנט 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 יש לנו את האלמנט שהכנסנו אליו, אבל הוא ״מואפר״ כי הוא בעצם נמצא מחוץ ל-shadow-dom, והוא נחשב light DOM.

slot הוא בעצם מיכל שאפשר להכניס אליו כל דבר. אופציה כזאת מאפשרת לנו לייצר קומפוננטה סגורה, אבל עם אופציה לואריאציות ע״י שימוש ב״מיכל״, אשר אליו אפשר לכניס כל מה שרוצים.
בהקשר של design-system, ה-slot לכאורה נשמע אחלה – ובהרבה מקרים באמת השימוש בו רצוי, אבל שימוש ב- slot גם משאיר את הקומפוננטה שלנו קצת פרוצה. היות ואפשר להכניס לתוך slot כל דבר – החל מאלמנט html פשוט ועד לקומפוננטה נוספת. בשל כך slot הוא קצת בעייתי וצריך להשתמש בו בתבונה. השימוש בו יכול לפגוע בשמירה על עקרונות העיצוב של ה design-system, לפגוע בסמנטיקה של ה html וגם יכול לפגוע בנגישות של הקומפוננטה.
הטריק הוא לשמור על איזון בין חירות לבין סגר (ממש כמו שהולך לנו מעולה בקורונה 😉 )

מילות סיכום

מה עוד אפשר לעשות עם web-componets? המון!
על מה לא הרחבתי בכלל? על עיצוב, UI וכמובן CSS של הקומפוננטות. צריך משהו להשאיר לפוסטים נוספים 🙂

ואסיים עם פוסט של לאה ורו, (הגורו שלי במשך השנים הראשונות שגיליתי את עולם ה – css) בו היא יוצאת נגד ההבטחה הלא ממומשת של web-components , ופוסט שעונה על הסוגיות שהיא העלתה. מעניין לקרוא.

עוד מקורות מידע מרחיבים, מפרטים, ומעשירים על web-components:

  2 תגובות ל “web components למתחילים”

כתיבת תגובה

האימייל לא יוצג באתר.