Запись архитектурного решения: 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.

Связанные принципы

Легко обратимо.

Необходимость скорости.

Примечания

Любые примечания здесь.