כמעט שנתיים עברו מאז שהעברתי את ההרצאונת שלי על Design-system במיטאפ של נטקראפט. מאז קרו המון דברים בעולם (מן הסתם) ובחיי הפרטיים. עברתי עבודה, הילדים שלי גדלו ואוטוטו אנחנו אומרים שלום לתמיד לבית הספר היסודי.
ב 19.04.2023 אירח Vonage, מקום העבודה שלי, את המיטאפ של קהילת pull-request, ואני זכיתי שאנשים טובים שעובדים איתי דחפו אותי להרצות על הנושא שאני שוחה בו כבר כמעט שלוש שנים.
כשישבתי להכין את המצגת, עברתי על ההרצאה הקודמת וקלטתי כמה התקדמתי מאז מצד אחד, ומצד שני, כמה כמעט כל ההרצאה עדיין רלוונטית. כמובן שההרצאה הראשונה שימשה כבסיס להרצאה הנוכחית, אבל בעוד שהראשונה הייתה בעיקר תיאורטית, בהרצאה הזאת הבאתי דוגמאות מ-Vivid, שהיא ה-design-system שלנו ב-Vonage, כי אין דרך טובה יותר להסביר ולהאיר מאשר מנסיון אישי ודוגמאות חיות.
לכל מי שלא נכח ורוצה לשמוע את ההרצאה (כולל הפאדיחות בדפדוף השקפים), מצרפת את צילום ההרצאה. לאמיצים מביניכם שמעדיפים לקרוא, מביאה אחרי הוידאו את עיקרי הדברים 🙂
ההרצאה שלי מחולקת לשני חלקים:
החלק הראשון כולל הסבר על מה זה design-system, ולמה צריך אותו בכלל. במקום להביא אותו פה וכך לשכפל סתם קוד (ולהכעיס את גוגל), אני מפנה אתכם.ן לפוסט הקודם שלי לחלקים הרלוונטים:
החלק השני מובא להלן.
סיפורה של Vivid
יש בשוק המון ספריות design-system. אפשר למצוא חלק לא מבוטל מהם בגלריה של design-system – חלקן יעודיות לספריות פיתוח ספציפיות כמו Vue.js או React וחלקן מותאמות לכל הפריימוורקים. חלקן קוד פתוח וחלקן לא.
אם מוצאים ספרייה עם רשיון מתאים, אפשר להשתמש בה להשתמש בה כמות שהיא, או לבצע עליה התאמות.
כדי לפתח design-system יש הרבה כלים, ושוב אפנה לשני המאגרים הנפלאים שמרכזים כלים:
הייתי יכולה להמשיך ולתאר כלים או ספריות אבל אין כמו סיפור שנלמד מעבודה.
צוות Vivid
Vivid היא גם ה-design-system של Vonage, וגם שם הצוות שאליו אני משתייכת.
מבחינתי הצוות שלי ייחודי משתי סיבות:
הראשונה – ההרכב של הצוות. הצוות שלנו מורכב בעיקר מאנשי פיתוח, אבל יש לנו גם צד עיצובי בצוות. אני רואה חשיבות רבה לעובדה הזאת. האחראית בצוות על הפן העיצובי היא החוליה המקשרת שלנו לאחד מקהלי היעד שלנו. נכון שאנחנו מפתחים API שמיועד למפתחים שישתמשו בה בקוד שלהם, אבל אנחנו גם – אם בעקיפין ואם במישרין – משרתים גם את צוות העיצוב.
במקביל ל-API שלנו, אנחנו מתחזקים ספריית קומפוננטות ב-Figma עבור המעצבים. כשהם עובדים על עיצוב של עמוד, אפליקציה או כל דבר, הם יכולים להוסיף לעיצוב שלהם קומפוננטות מתוך ספריית ה-assets של Vivid. ככה הם שומרים עם עיצוב אחיד, ובתוצר הסופי שלהם – קובץ ה-figma שעובר אל המפתחים – ניתן לדעת באיזה קומפוננטה להשתמש, ובאילו מאפיינים (גודל, צורה, פונט ועוד).
בנוסף, אנחנו מייצאים token-ים של צבעים, טיפוגרפיה וגדלים מתוך ה-figma לשימוש בספרייה. שינוי ב-figma של אחד ה- token-ים וייצוא שלו, ישנו באופן אוטומטי את הצבעים גם ב-Vivid.
אני אוהבת לראות את ה-design-system שלנו כמו גשר בין מחלקות: הקומפוננטות שלנו הן החתיכות הקטנות שהמעצבים לוקחים ומרכיבים מהם תוצר שלם, התוצר מגיע אל המפתחים, והם מפרקים אותו שוב לחתיכות לגו קטנות בעזרת שימוש ב-Vivid 🙂
הסיבה השניה לייחודיות של Vivid בעייני היא העובדה שהלקוחות שלנו הם in-house. נכון ש-Vonage היא חברה גלובלית גדולה מאוד, אבל יש לנו ערוצי תקשורת פתוחים עם המפתחים, שבהם מועלות בקשות, נפתחים באגים, ועוד.
במשרד פה בישראל יש הרבה צוותי פיתוח שמשתמשים ב-Vivid. אני אוהבת את העובדה שאני (והצוות שלי כמובן) בקשר קרוב עם המפתחים בכלל, אבל בעיקר פה בתל אביב. יש משהו מאוד מרים ו-engaging בכתיבת קוד, תיקון באג, או הוספת פיצ׳ר בשביל משהו שיושב לידך או קומה מעליך 🙂
Vivid – הספרייה
Vonage היא חברה גדולה מאוד ומכילה צוותי פיתוח רבים. ריבוי הצוותים – והעובדה שחלק מהצוותים הצטרפו בעקבות רכישות – הביא לכך שיש לנו בחברה ספריות פיתוח פרונט רבות: Vue.js ,React Angular, נייטיב ועוד. Vivid צריכה בעצם להתאים לכל סביבות הפיתוח כדי לשמור על ה-look and feel של Vonage. כדי להצליח בכך, Vivid מבוססת על web-components.
על קצה המזלג, web-component היא טכנולוגייה המאפשרת ליצור אלמנטים מותאמים אישית, כשהפונקציונליות והעיצוב שלהם סגורים ומנותקים מהקוד של הפרויקט.
בעצם, התוצר הסופי של web-component הוא js, css ו-html, מה שאומר שהוא יכול להתאים לכל סביבת פיתוח.
לקריאה מורחבת על web-components למתחילים, ובקצרה:
web-component מכילה 3 מרכיבים עיקריים:
- custom element – האלמנט המארח (host). אותו נראה ב DOM שלנו, ובדרך כלל יהיה לו שם ייחודי.
למשל בקומפוננטות של Vivid השם של ה-custom element תמיד מתחיל ב-vwc שאלו ראשי התיבות של vivid-web-components וממשיך בשם של הקומפוננטה, למשל: vwc-button, vwc-dialog וכו׳. - shadow-dom – מעין ״תת-dom״ נסתר מהעין. הוא נמצא תחת האלמנט המארח, הלוא הוא ה-custom element. אל ה-shadow-dom אין גישה מהקוד של הפרויקט, לא דרך js ולא דרך css.
- תבנית– בתוך ה-shadow-dom נוכל לראות את תבנית ה-html שמכילה את המרכיבים של הקומפוננטה.
היתרון של עבודה עם web-components גדול. מי שמשתמש בקומפוננטות של Vivid צריך להגדיר את הקומפוננטה לפי הצרכים שלו (טקסט, אייקון ועוד) ובפרויקט שלו הוא יקבל קופנונטה פונקציונלית ומעוצבת כמעט בלי לקנפג אותה, ובכלל בלי להתעסק עם המבנה ה-html-י של הקומפוננטה עצמה.
למשל, כדי להוסיף Modal לפרויקט כל מה שצריך הוא הקוד הזה:
<vwc-dialog icon-placement="side" icon="info" headline="Dialog Headline" subtitle="subtitle content"></vwc-dialog>מתחת לפני השטח, בתוך ה-shadow-dom, בעצם יתווסף לפרויקט כל הקוד הזה:
<vwc-elevation dp="12">
<dialog class="base icon-placement-side hide-body hide-footer" open="">
<slot name="main">
<div class="main-wrapper">
<div class="header border">
<slot name="graphic">
<vwc-icon class="icon" name="info"></vwc-icon>
</slot>
<div class="headline">Dialog Headline</div>
<div class="subtitle">subtitle content</div>
<vwc-button size="condensed" class="dismiss-button" icon="close-line">
</vwc-button>
</div>
</slot>
</dialog>
</vwc-elevation>וכדי לדאוג שה-Dialog ייפתח בתוך Modal, יש להפעיל את הפתיחה בעזרת פונקציה בשם showModal
<script>
function openDialog() {
dialog = document.querySelector('vwc-dialog');
dialog.showModal();
}
</script>וככה יראה התוצר הסופי בעמוד:
מאחורי הקלעים של Vivid
Fast Foundation
כמו כל מפתח שמחזיק מעצמו, גם אנחנו לא ממציאים את הכל מאפס. Vivid בנויה על בסיס הספרייה Fast Foundation של מייקרוסופט. ל-fast יש כמה יתרונות בולטים:
- ספריית קוד פתוח של web-components שמיועדת להיות בסיס ל-design system לארגונים ומערכות גדולות.
- ספרייה מאוד מתוחזקת ומתעדכנת.
- מיושרת ל-spec ולשמירה על סמנטיקה והתנהגות אלמנטים נכונה
- נגישה
Coverage
ל Vivid יש 100% כיסוי שמתבטא בשתי שכבות:
- unit tests
לא ארחיב על חשיבות הטסטים או איך נכון לעשות אותם, אבל אל דאגה, לא אשאיר אתכם.ן בידיים ריקות. תוכלו לקרוא עוד על טסטים בפוסטים של יונתן קרא. - ui-test
לכל קומפוננטה אנחנו מייצרים screen-shot של המצב הנוכחי שלה. לאחר כל שינוי שמתבצע באחת הקומפוננטות אנחנו מריצים בדיקה, ואם יש שוני אנחנו יכולים לראות אותו בצילום מסך ולבדוק אם השינוי רצוי או לא.
Documentation
יש הרבה כלים לעבודה עם פיתוח של design-system. אחת הפופולריות היא storybook, ובצדק – יש לה הרבה יתרונות והרבה פלאגינים שמתממשקים אליה. אבל לצערי storybook לא חברה של web-components ולא מציגה נכון את הקוד של הקומפוננטות, ולכן לא מאפשרת יצירה מוצלחת של code-snippets למפתחים.
מהסיבה הזאת, הדוקומנטציה של Vivid לא מבוססת storybook אלא בנויה על 11ty, וכל ה-ui של הדוקומנטציה בנוי מקומפוננטות של Vivid. שימוש בקומפוננטות בדוקומנטציה הביא אותנו לשפר חלק מהן, ולחדד את הדוקומנטציה של השימוש בהן. כי ברור הרי, שאם רוצים לדעת אם האוכל של הכלב שלנו טעים, כל מה שצריך זה…
סוף דבר
יש משהו מלמד ומחכים בהעברת הרצאה – לא רק לצד המאזין אלא דווקא למי שמכינ.ה אותה. זיקוק הדברים, הוצאת התוכן החשוב ביותר מתוך מעטפת של דברים פחות רלוונטיים – כל אלה מחדדים את ההבנה.
נהניתי להכין את ההרצאה, וגם להעביר אותה.
לא יוצאת לסיבוב הופעות, אל תחפשו אותי ב- design-system-tour 🙂