רשומת החלטה ארכיטקטונית: מסגרת CSS

תוכן העניינים:

• סיכום
  • בעיה
  • החלטה
  • מצב
• פרטים
  • הנחות
  • אילוצים
  • עמדות
  • טיעון
  • השלכות
• נושאים קשורים
  • החלטות קשורות
  • דרישות קשורות
  • תוצרים קשורים
  • עקרונות קשורים
• הערות

סיכום

בעיה

אנו רוצים להשתמש במסגרת CSS ליצירת יישומי הווב שלנו:

• אנו רוצים שחוויית המשתמש תהיה מהירה ואמינה, בכל הדפדפנים הפופולריים ובכל גדלי המסך.

• אנו רוצים איטרציה מהירה על עיצוב, פריסה, UI/UX וכדומה.

• אנו רוצים יישומים רספונסיביים, במיוחד למסכים קטנים יותר כמו במכשירים ניידים, למסכים גדולים יותר כמו מסכי רוחב 4K, ולמסכים דינמיים כמו תצוגות שניתן לסובב.

החלטה

הוחלט על Bulma.

מצב

הוחלט על Bulma. פתוחים לבחירות חדשות של מסגרות CSS כשיופיעו.

פרטים

הנחות

אנו רוצים ליצור יישומי ווב מודרניים, מהירים, אמינים, רספונסיביים וכדומה.

יישומי ווב מודרניים טיפוסיים מצמצמים/מבטלים את השימוש ב-jQuery מכמה סיבות:

• JavaScript מודרני משלב בהדרגה יכולות רבות ש-jQuery סיפקה, ולכן יש פחות צורך ב-jQuery, ויש מודולים טובים/מהירים/קטנים יותר שמספקים מימושים ספציפיים

• הגישה הרחבה של jQuery היא מניפולציה ישירה של ה-DOM, שהיא אנטי-תבנית במסגרות JavaScript מודרניות (למשל React, Vue, Svelte)

• jQuery מפריעה לעצמה אם היא נטענת פעמיים וכדומה.

אילוצים

אם נבחר במסגרת CSS שמשתמשת ב-jQuery, נהיה תקועים עם ייבוא jQuery. לדוגמה, Semantic UI משתמשת ב-jQuery, ו-Tachyons לא.

אם נבחר במסגרת CSS מינימלית, נוותר על רכיבי מסגרת שאולי נרצה עכשיו או בקרוב. לדוגמה, Semantic UI מספקת קרוסלת תמונות, ו-Tachyons לא.

עמדות

שקלנו לא להשתמש במסגרת בכלל. זה עדיין נראה ברת קיימא, במיוחד כי CSS grid מספק חלק גדול ממה שאנו צריכים לפרויקט שלנו..

שקלנו מסגרות CSS רבות באמצעות מיון מהיר של רשימה קצרה: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons וכדומה. שתי הבחירות שלנו לבדיקה מעמיקה יותר הן Semantic UI (כי יש לה את הגישה הסמנטית ביותר) ו-Bulma (כי יש לה את הגישה הקלה ביותר שמספקת את הרכיבים שאנו רוצים עכשיו).

שקלנו את Semantic UI. היא מספקת רכיבים רבים, כולל כאלה שאנו רוצים לפרויקט שלנו: לשוניות, רשתות, כפתורים וכדומה. ערכנו פיילוט עם Semantic UI בשתי דרכים: באמצעות קובצי CDN טיפוסיים, ובאמצעות מאגרי NPM. הצלחנו עם Semantic UI בדף HTML סטטי, אבל לא הצלחנו במסגרת הזמן שהקצינו לבניית SPA ב-JavaScript (בעיקר בגלל בעיות טעינה של jQuery). גילינו שמתכנתים אחרים מבקשים ממפתחי Semantic UI ליצור גרסה נטולת jQuery, מאותן סיבות כמונו. מתכנתים אחרים מבקשים גרסה נטולת jQuery כבר שנים רבות, ובכל זאת המפתחים אמרו לא, וציינו שכל גרסה נטולת jQuery תהיה קשה מדי לכתיבה, למשל ~"בפרויקט Semantic UI יש יותר מ-22,000 נקודות מגע שמשתמשות ב-jQuery".

דוגמה עם Semantic:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

שקלנו את Bulma. ל-Bulma יש יכולות דומות רבות ל-Semantic UI, אף שלא רכיבים מתוחכמים רבים כל כך. Bulma נבנתה בטכניקות מודרניות, כמו היעדר jQuery. ל-Bulma יש כמה רכיבי צד שלישי, שחלקם אולי נרצה להשתמש בהם.

דוגמה עם Bulma:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

טיעון

כאמור לעיל.

באופן ספציפי, נראה ש-Semantic UI מלווה בדגל אזהרה גם מבחינה טכנולוגית (כלומר כל כך הרבה נקודות מגע של jQuery) וגם מבחינת ההנהגה (כלומר היעדר jQuery נענה בסירוב חד, ולא בניסיון למפת דרכים, או לשיפור מתמיד, או לגיוס תרומות וכדומה).

השלכות

אם נמצא מסגרת CSS טובה נטולת jQuery, זה בדרך כלל מועיל וטוב בסך הכול.

נושאים קשורים

החלטות קשורות

מסגרת ה-CSS שנבחר עשויה להשפיע על יכולת הבדיקה.

דרישות קשורות

אנו רוצים לשלוח במהירות יישום מודרני לחלוטין.

איננו רוצים לבזבז זמן בעבודה על מסגרות ישנות יותר (במיוחד Semantic UI) שמשתמשות בתלויות ישנות יותר (במיוחד jQuery).

תוצרים קשורים

משפיעה על כל ה-HTML הטיפוסי שישתמש ב-CSS.

עקרונות קשורים

הפיך בקלות.

צורך במהירות.

הערות

כאן אפשר להוסיף הערות.