Запис архітектурного рішення: 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-сторінці, але не досягли успіху в межах нашого обмеженого часу для побудови JavaScript SPA (насамперед через проблеми із завантаженням 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.

Пов’язані принципи

Легко скасовувати.

Потреба у швидкості.

Примітки

Будь-які примітки тут.