הישן האמין: חומר-UI
עד כה, אפליקציית האינטרנט המתקדמת הזו השתמשה ב-Material-UI, ספריית ממשק משתמש בוגרת ופופולרית מאוד וגם ספריית UX. ממשק המשתמש של החומר הוא אחד מערכי הכלים הנפוצים ביותר של React-UI, אם לא מספר אחד, ומספק אוסף מצוין של מכולות, כרטיסים, סרגלי ניווט ועוד כל מיני רכיבים אחרים העומדים בהנחיות החומר שהוגדרו על ידי Google Design.
מכיוון שלא שיניתי את פריסת הליבה והעיצוב החזותי של אפליקציית האינטרנט שלי, אתה עשוי לתהות מדוע בחרתי ב-Material-UI מלכתחילה, מכיוון שהאתר הזה לא ממש נראה כמו אתר חומרי טיפוסי במבט ראשון. הסיבה היא שספריית ה-"Material-UI" מציעה גם שכבת רכיבי ליבה לצריכה, המציעה את כל היתרונות של הספרייה כמו עיצוב נושאים, ללא סגנון חומר דעתני.
אבל כשהתחלתי להשתמש לאחרונה ב-Tailwind, "מסגרת CSS-תכלית ראשונה", בפרויקטים אחרים, מהר מאוד התברר לי שהיתרונות של Tailwind הופכים אותה למועמדת מעולה לאפליקציית האינטרנט האישית שלי.
המגניב החדש: Tailwind.css
ל-Tailwind יש חווית מפתח נעימה להפליא. אבל לא רק זה, זה גם מבטיח שבניית הייצור משתמשת רק באותן מחלקות CSS שנצרכות באמת. הודות למהדר Just-in-Time שמגיע כעת עם Tailwind.css, השימוש בכלי גמיש מתמיד.
ספריות אלטרנטיביות
לפני שאכנס לפרטי ההגירה שלי מ-Material-UI ל-Tailwind.css, אכתוב רשימה של מערכות עיצוב רלוונטיות עבור Tailwind.css הכוללות MUI.
- material-tailwind, אשר מתרגם את מפרטי עיצוב ה-MUI למערכת עיצוב ב-Tailwind.css
- daisy-ui, שהוא כמובן לא ממשק משתמש חומרי אבל עדיין מספק סט גדול מאוד של רכיבים שקרובים מבחינה ויזואלית לתקן MUI גרסה 5
אתה בעצם צריך להוסיף את כל סגנונות ה-CSS עבור Material-Tailwind כיבוא, יחד עם קישורים לסמלים וגם את הגופן. עבור Daisy-UI, כל מה שאתה צריך לעשות הוא להוסיף אותו כפלאגין לקובץ ה-confg שלך.
שתי הספריות יצטמצמו לסגנונות שבהם אתה משתמש בפועל, ולכן הן לא מוסיפות תקורה כלשהי.
הבדלים בין Material-UI לבין Tailwind.css
הבדל ברור אחד עיקרי בין שתי הספריות הוא ש-Material-UI מספק סגנון דעתני בעוד Tailwind.css מציע לך קבוצה של מחלקות עזר ליצירת CSS, אך ללא סגנון ספציפי כשלעצמו. זה אומר שאם אתה מסתמך מאוד על הנחיות החומר, תצטרך לבנות מחדש כמה רכיבי ליבה, למשל כפתורים ושדות טקסט, עם Tailwind.css תחילה.
מכיוון ששתי הספריות משתמשות ביחידות שונות עבור פונקציות קנה מידה וריווח, האיטרציה הראשונה של ההגירה שלא שברה את תהליך הבנייה נראתה לא במקום.
בסך הכל, לקח לי בערך 6 שעות לילה כדי לעבור ל-Tailwind.css עבור מהדורה יציבה ראשונה לפרסום. ההחלפה של ה-API של Material-UI נעשתה מהר מהצפוי, ואפליקציית האינטרנט המתקדמת מסתמכת כעת רק על Tailwind עבור כל הסגנונות.
הופעה כמעט מושלמת של Lighthouse
מכיוון ש-Material-UI מטבע הדברים גדול יותר מ-Tailwind.css בגלל היעדר הקטנת CSS וכן הפחתה ל-CSS בשימוש בפועל בלבד, גם כיוונתי לציון טוב יותר בעת השוואת אפליקציית האינטרנט עם Lighthouse. אני משתמש רק ב-web.dev/measure למשימה זו, מכיוון שזהו הכלי המחמיר ביותר לגבי ביצועים נתפסים בעולם האמיתי על ידי משתמשים.
לפני ההגירה, כל האתרים קיבלו 100 נקודות למעט ביצועים, שם הגעתי לסביבות 75 עד 80 נקודות לכל מדידה. לאחר ההגירה, אני יכול כעת לדווח על ביצועים בין 90 ל-95 נקודות, בהתאם לביצועי רשת הקצה של Vercel, היכן שה-PWA מתארח. הודות ל-Tailwind.css, אני עכשיו כמעט מגיע לציון מושלם, וזה די מרשים בהתחשב שהאתר משתמש בדי הרבה סטיילינג (למרות שזה נראה מאוד מינימלי) כמו גם במדיה כמו סרטונים ותמונות.
מסקנה: האם זה היה שווה את זה?
כן בהחלט! המעבר הכולל נמשך רק כמה שעות והביא לעלייה בביצועים בעולם האמיתי ולציון בנצ'מרק טוב יותר. אני אכוון כמה היבטים ויזואליים בשבועות הבאים כדי לבטל חוסר עקביות פוטנציאלי לאחר ההגירה, אבל בסך הכל אני מרגיש בטוח עם הגרסה הנוכחית כבניית הייצור.
Tailwind.css היא כנראה ספריית ה-CSS הארגונומית ביותר שקיימת כיום, מה שהופך את הקידוד לחוויה ממש נחמדה. אם לא, נסה עכשיו ותראה בעצמך אם אתה אוהב את זה כמוני.
