Запис на архитектурно решение: 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 предоставя въртележка за изображения (image carousel), а 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.

Свързани принципи

Лесно обратимо.

Нужда от скорост.

Бележки

Всякакви бележки тук.