כמפתחי פרונט, סביר להניח שאתם מנהלים שיחות רבות על ספריות ממשק משתמש שכדאי לעבוד איתן בפרויקט הבא או כאלו שנמאס לכם לעבוד איתן.
במאמר הבא, אפרט מה זה בעצם ספריות UI? מה ההבדלים? למה כדאי לעבוד איתן? ומה החסרונות?
בנוסף, אסביר על Headless Components, מושג שעדיין לא מוכר בקרב כלל מפתחי הפרונט.
לסיום, אסקור את חמשת הספריות המובילות על פי הפופולריות שלהן בקרב אנשי הפרונט.
אז בואו נתחיל!
רגע, מה זה ספריות UI?
למעשה, ספריית UI כוללת בתוכה מספר CSS Stylesheets מוכנות לשימוש עבור מפתחים ומעצבים.
ה- Stylesheets, גליונות הסגנון, מכילות בתוכן פונקציות סטנדרטיות של עיצוב אתרים; הגדרת צבעים, פריסה, גופנים, סרגלי ניווט וכו'.
בדרך כלל, גיליונות הסגנון, נתמכות ומורחבות על ידי Preprocessors כמו SASS, PostCSS ואף JavaScript.
עם ספריות UI, למפתחים יש קבצי סטייל מלאים, כל שנדרש הוא לקודד אלמנטי HTML עם קלאסים, מבנה ומזהים מדויקים העונים על דרישות הספריה בכדי לבנות את העמוד.
בדרך כלל בספריות הללו ישנן מחלקות ורכיבים מובנים עבור אלמנטים נפוצים כמו – הדר, פוטר, סליידר, סרגל ניווט, פריסות מבוססות עמודות, פריסות מבוססות טורים flex and grid based וכו'.
המטרה העיקרית בפיתוח עם ספריות UI היא יצירת עימודים – layouts על ידי שימוש בקווים מנחים ועיצוב רספונסיבי למנעד המכשירים הרחב שיש כיום. דרך שמספקת ייעול בתהליך וצמצום שעות הפיתוח באופן משמעותי.
אז למה כדאי לעבוד עם ספריות UI?
- בדרך כלל, כוללות דוקומנטציה מפורטת שמספקת לנו מידע נרחב, הסבר על כל אלמנט, ווידג'ט וקמופוננטה. סוגי התקנה בפרויקט שלנו, best practices ותמיכה.
- לא צריך לכתוב את כל הcss לפרויקט מאפס, מה שמספק עבורנו, המפתחים, כלי שעוזר בצמצום זמני פיתוח.
- פיתוח עם כלים אלו בפרויקט, עוזר ללמוד וליישם css בצורה יותר נכונה ויעילה.
- מתאים את ה CSS לדפדפנים הנפוצים ביותר, cross-browser, מה שמצמצם זמני פיתוח נוספים.
- מספק לנו עיצוב רספונסיבי לרוב גדלי המכשירים, בעידן של היום יש הרבה שינויים בשימוש בגדלי המסכים.
- ספריות UI מספקות לנו קמפוננטות מוכנות לשימוש Out of the box, שלרוב מתוחזקות ע״י הקהילה בקוד פתוח מה שעוזר בפתרון באגים.
מכאן נובע ששימוש בכלים אלו יכול לייעל את תהליך הפיתוח, שזאת למעשה הסיבה העיקרית לשימושם, אך ישנם גם חסרונות;
- כאשר נרצה לבנות פרויקט בעיצוב מותאם אישית, נצטרך לפעמים ״לדרוס״ חוקי CSS שהספריה מחילה, דבר שמגדיל את כמות שורות הקוד ומוסיף סיבוכיות לתחזוקת הסטייל של האתר.
- מגביל יצירתיות כאשר שמות הקלאסים, IDs, תבניות עיצוב וקומפוננטות נקבעו מראש.
- אחרי שימוש ארוך טווח בספריות UI יכולות כתיבת ה- CSS נשחקות משום שאנחנו לרוב לא כותבים את הסטייל בעצמנו.
מה זה Headless Components?
למעשה אלו קומפוננטות ללא UI, אלא הן בעלות פונקציונליות בלבד.
התנהגות הקומפוננטות והלוגיקה מופרדות מהויזואליות שלהן וכמפתח אתה אחראי לממש זאת עליהן ולעצב אותן.
שימוש בספריות של Headless Components מעניק יתרון כאשר אנחנו יודעים שנצטרך עיצוב מותאם אישית למוצרים בחברה, כך נוכל להשתמש בקומפוננטות של ספריות אלו ולעצב אותן ללא מגבלות.
מה שספריות UI לא מספקות ומגבילות אותנו כמפתחים, בעקבות העיצוב המובנה שלהן לקומפוננטות.
ספריות Headless טובות הן כאלו המספקות את הקומפוננטות נגישות לחלוטין, נבחנות היטב על ידי צוותי הפיתוח שלהן ובעלות תמיכה נרחבת.
פיתוח עם קומפוננטות Headless מספק יתרון נוסף, גודל הקובץ המוגמר יהיה נמוך קטן יחסית.
אנחנו מייבאים רק את הקומפוננטות הספציפיות שאנחנו צריכים ללא צורך בהכנסת כל הספריה בפרויקט בשונה מספריות UI.
אחת מספריות ה Headless Components הפופולריות כיום היא Headless UI; למרות שהיא כרגע מכילה כמות קטנה של קומפננטות, הן נגישות ונבחנות היטב.
עפ״י ההסברים באתר נראה שהספריה עובדת באופן האופטימלי עם TailwindCSS, כלומר, ייבוא קומפוננטות של בעיצובם בעזרת קלאסים של TailwindCSS.
ישנו חסרון שכדאי לשקול לפני שמחליטים לעבוד עם Headless Components.
הקהילות של ספריות Headless Components עדיין לא מפותחות וגדולות כמו של ספריות UI פופולריות, מה שמקשה על מפתחים כאשר יש אתגרים וישנו צורך להתייעץ או לפתור בעיות.
אז ככל הנראה, יש שחקן חדש במגרש ופיתוח על ידי Headless Components נעשה נפוץ יותר ויותר בתעשייה, לכן, זה משהו שכדאי לשקול בעבודה על הפרויקט הנוכחי או הבא שלכם.
חמשת ספריות ה UI המומלצות והנפוצות כיום
Angular Material
זוהי ספריית קומפוננטות עבור מפתחי Angular מבוססת Material UI' אסביר גם עליה בהמשך.
קומפוננטות Angular material, עוזרות לבנות דפי אינטרנט ויישומים פונקציונליים, אטרקטיביים ועיקביים תוך הקפדה על עקרונות עיצוב מודרניים חדשים.
בנוסף, שימוש בספריה עוזר ליצור אתר גמיש ומהיר יותר על ידי הצעת תכונות נוספות של אלמנטי לחצן, תמיכה בחוקי ARIA וערכות נושא.
לפי NPM כמות ההתקנות השבועיות מגיעה ל- 1M.
כוכבים בגיטהאב: 22.5K.
למה לבחור בפיתוח עם Angular Material?
- בחירה מצוינת כאשר נרצה לעצב אפליקציה / אתר שפותח ב- Angular.
- יש סט שלם של אפשרויות להתאמה של פריסה רספונסיבית.
- דוקומנטציה איכותית ונרחבת. כוללת דוגמאות קוד ומאפייני API עבור כל קומפוננטה.
- במונחים של השפעה חברתית, אחד המאפיינים החשובים ביותר של Angular material הוא שהנגישות נבנית ישירות לתוך הפרויקט.
ניתן לראות את האופן שבו הנגישות נמצאת בחזית ובמרכז הספריה בבולטות שתכונות ARIA נמצאות בקרב מערך הקומפוננטות.
לדוגמא, אם טקסט ברירת המחדל לא נמצא על כפתור ו-aria-label אינו מוגדר, Angular Material ישאיר שגיאה בקונסול.
TailwindCSS
ב Tailwind טוענים שהספריה שלהם קלת משקל ומציעה חופש ביצוע למפתחים שעובדים איתה.
שוחחרה לראשונה בשנת 2019. כיום, יותר מ- 260,000 מפתחים עובדים איתה.
לפי אתר NPM כמות ההתקנות השבועיות מגיעה ל- 2.5M.
היא לא מספקת עיצוב ספציפי, אלא מאפשרת לך ליישם את הסגנון הייחודי שלך מהר יותר.
הם מציעים קלאסים מובנים, Atomic CSS, שעל ידי שימוש בהם, כמעט ואין צורך וכתיבת קוד css נוסף.
מפתחי פרונטאנד רבים ממליצים לעבוד איתה בעקבות הפיצ'רים המעולים שהיא מציעה.
כוכבים בגיטהאב: 54K.
למה לבחור בפיתוח עם TailwindCSS?
Tailwind עובדת במתודולוגיה שנקראת Atomic CSS כך שהקלאס של אלמנט HTML מתאר בבירור איך הוא אמור להיראות, מה שמייעל את תהליך הסטיילינג בפיתוח.
לדוגמא:
<div class="m-1 text-center bg-blue">content</div>
יציג אלמנט דיב עם margin בגודל 1 (במקרה הזה, שוליים קטנים), טקסט ממורכז ורקע כחול.
- הספרייה נתמכת ברוב הדפדפנים המודרניים.
- פתרון מצוין למפתחים שמכירים ומפתחים עם CSS, אשר מטרתם לייעל את תהליך העיצוב בפרויקט בטווח הרחוק.
- למרות ש-Tailwind אינו כולל קומפוננטות שתוכננו מראש, הוא מאפשר ליצור קומפוננטות מותאמות אישית שניתן לעשות בהם שימוש חוזר לאורך הפרויקט.
<!-- Before -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
Save changes
</button>
<!-- After -->
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
</style>
<button class="btn-primary">
Save changes
</button>
MaterialUI
ספריית קומפוננטות open-source המאפשרת לנו לייבא קומפוננטות שונות כדי לבנות ממשק משתמש באפליקציות React. פותחה על ידי גוגל ובדרך כלל נזהה את הספרייה בשם MUI.
מייעל את תהליך פיתוח פרונט אנד ומצמצם כמות משמעותית של שעות הפיתוח מכיוון שהמפתחים לא צריכים לכתוב את הקומפוננטות מאפס.
מעבר לכך, ניתן לבנות עם הספרייה את פריסת הדף, מערכת גריד עם 12 עמודות, המספקת עיצוב רספונסיבי לחלוטין.
הספרייה שפותחה על ידי גוגל, שוחררה לראשונה לשימוש בשנת 2018.
זו אחת מספריות קומפוננטות ממשק המשתמש הפופולריות ביותר, כאשר מפתחים ב- React.
לפי NPM כמות ההתקנות השבועיות מגיעה ל- 1M.
כוכבים בגיטהאב: 75K.
MaterialUI מורכבת מ- 63.9% JavaScript ו-36.1% TypeScript.
למה לבחור בפיתוח עם MaterialUI?
- הדוקומנטציה מסודרת באופן מאורגן למדי וניתנת לניווט בקלות יחסית.
- אחד היתרונות של הספרייה הוא הפופולרית שלה. ניתן למצוא מאות דוגמאות קוד ברשת, ללמוד מהן ולפתח ביותר יעילות.
- מציעה מגוון רחב של קומפוננטות, ווידג'טים ופיצ'רים מוכנים בעיצוב מודרני לשימוש.
- עדכוני גרסה ותכנים בתדירות גבוהה, נתון שחשוב לשקול כאשר מפתחים גם למובייל, תחום אשר משתנה הרבה בעידן הנוכחי.
- הספרייה מציעה שימוש באנימציות למגוון הווידג'טים, על ידי כך מפתחת גישה חדשה בנושא לאיך אלמנטים צריכים להתנהג עם אנימציות בתוך אפליקציה, מה שמייעל וחוסך בזמני פיתוח.
- קהילה גדולה של מפתחים המספקים תמיכה ודוגמאות קוד.
- גישה להתאמה אישית לשינוי העיצוב, מבחינת הקומפוננטות וגם ערכות נושא באפליקציה, מספק יתרון שמייעל את תהליך פיתוח העיצוב באפליקציה.
Ant Design
ספריית UI הכוללת מגוון קומפוננטות נוחות לשימוש המועילות לבניית ממשקי משתמש מודרניים באפליקציות React.
פותחה על ידי ענקית הטכנולוגיה Alibaba ושוחררה לשימוש בשנת 2016.
הספרייה מורכבת מ-100% TypeScript.
Ant Design מבדילה את עצמה מספריות קומפוננטות אחרות, כמערכת עיצוב למוצרים ברמת הארגון. פיתחה פילוסופיית עיצוב המבוססת על ארבעה ערכים עיקריים: טבעי, וודאי, משמעותי, גדל.
לפי אתר NPM כמות ההתקנות השבועיות מגיעה ל- 850K.
כוכבים בגיטהאב: 78K.
למה לבחור בפיתוח עם Ant Design?
- דוקומנטציה איכותית, נרחבת וידידותית למתחילים. כוללת דוגמאות ומאפייני API עבור כל קומפוננטה.
- עדכוני גרסה ותכנים בתדירות גבוהה, נתון שחשוב לשקול, תחום אשר משתנה הרבה בעידן הנוכחי.
- תמיכה נרחבת בעשרות שפות (אינטרנציונליזציה).
- קהילה גדולה של מפתחים המספקים תמיכה ודוגמאות קוד.
- תמיכה ואפשרות פיתוח בסביבות: דפדפן, SSR ו- Electron.
- מראה ועיצוב מלוטש, ארגוני ומודרני.
Bootstrap
אחת מספריות ה UI הוותיקות בתחום (אם לא הוותיקה שביניהן). יש שאומרים שהיא כבר פחות נפוצה לשימוש, אך על פי הנתונים נראה שלא כך הדבר.
לפי אתר NPM כמות ההתקנות השבועיות מגיעה ל- 4M, מספר גבוה המשקף תמונת מצב שמוכיחה שהיא עדיין פופולריות מאוד!
פותחה על ידי Twitter ושוחררה ב2011 לראשונה לשימוש. נתמכת על ידי קהילה חזקה שמונה מאות מפתחים מה שמבטיח תמיכה נרחבת.
מטרתה לפי Twitter, לספק למפתחי פרונט פתרון לבניית אפליקציות Web בעיצוב רספונסיבי מלא.
כוכבים בגיטהאב: 156K.
למה לבחור בפיתוח עם Bootstrap?
- דוקומנטציה מפורטת וידידותית.
- עימודים אנכיים ואופקיים רספונסיביים.
- גלובליזציה והתאמת הדף בהתאם לשפה שנבחרת.
- תמיכה בערכות נושא יום ולילה.
- ניתן להתאמה אישית ושינויים.
- תמיכה נרחבת, כאמור, של קהילה שמונה מאות מפתחים.
לסיכום
ספריות אלו, הן המומלצות והנפוצות ביותר לפיתוח כיום.
הן מספקות תמיכה נרחבת למפתחים שעובדים איתן, מה שנותן יתרון משמעותי בפיתוח.
שימוש בספריות UI, מצמצם כמות משמעותית של שעות פיתוח ומייעל את תהליך פיתוח הפרונט והעיצוב.
ניר ארגיל,
מפתח פרונט.