Mantine > Bootstrap. Фух, вот я и закончил двухнедельный марафон, переписав Code Basics с Bootstrap на Mantine. Теперь можно выдохнуть перед следующим рывком и провести ретроспективу.

Кто меня знает давно, знают что я за решения где желательно не надо ничего делать и бутстрап для нас был таким решением на протяжении 12 лет и остается по сей день на Хекслете. Буквально полгода назад я делал попытку куда-то свернуть, но но нашел полностью готовый UI Kit, который бы соответствовал всем моим ожиданиям. Но было несколько интересных, среди них Mantine.

Почему я вообще хочу куда-то уйти, если бутстрап такой распекрасный? В целом переход на inertiajs и уход от северной шаблонизации + четыре основных момента по фронтендовым UI Kit:

- Мир ушел сильно вперед по подходам. Современные системы например полностью типизированы (а не просто херачим классы), очень сильно оптимизированы (вырезают всякое) и скомпонованы так, что дают больше возможностей. Бутстрап туда планирует прийти, но его всегда будет тянуть легаси
- Бутстрап это в первую очередь css фреймворк, а сейчас нужен не css, а React/Vue/Svetle. У бутстрапа есть внешняя поделка, которой занимаются в полсилы чуваки после работы. Кстати, tailwind по этой причине тоже не подходит, он может быть только базой для чего-то
- Сейчас во фронтенде нужны не просто компоненты, а полноценные решения типа DataGrid, которые из коробки дают тебе фильтры, пагинацию, поиск, инлайн редактирование и кучу всего еще. В бутстрапе такого нет и приходится тащить, что-то типа primereact.
- Против толпы не попрешь. Мир уже слишком ушел вперед, поэтому если хочется нанимать кого-то и быть привлекательным, то тоже надо двигаться (насколько это разумно)

В общем Mantine с тех пор тоже на месте не стоял и реализовал то, чего мне не хватало. Плюс, как оказалось при более детальном погружении, он настолько грамотно решает большой спектр задач, что тоже самое в других местах вообще без рукопашки никак.

Например Mantine из коробки идет с десятками буков для решения типовых фронтендовых задач. Я с ходу выкинул кучку внешних зависимостей и буду выкидывать еще. Он для меня решил проблему с подсветкой кода, потому что для этого постоянно приходилось что-то тащить снаружи и упорно настраивать.

Помимо основных компонентов, Mantine дает набор экстеншенов, для всякого, например систему нотификаций. Минус еще одна внешняя зависимость со своей стилизацией. Там же всякие чарты, модалки и много чего еще.

Из необычного, в Mantine есть компонент, обернув в который любой текстовый блок пришедший снаружи, например статью из базы, мы получаем все примененные к нему стили, так как будто они были глобальные. Раньше для подобного приходилось создавать свой класс с определением всех базовых тегов в который оборачивались все подобные тексты. Я даже и не думал в такую сторону.

Ну и еще не менее важно, что сам подход Mantine подразумевает работу через пропсы, а не классы. Да это мешает быстро проверять в devtools, но мы получаем полную типобезопасность и автокомплит. Хотя до этого момента, я думал что как же мне не хватает lsp для bootstrap (для tailwind такой есть). А оказалось что он и не нужен.

При этом все можно достаточно неплохо переопределить. Причем не только внешний контейнер компонентов, но и внутренности, для этого у Mantine довольно удобный механизм внутри, который тоже весь вдоль и поперек типизирован. Правда все равно не обошлось без доп подключения утилит tailwind. Например в mantine нет мелких утилит типа добавить границу сверху. Это сделано бай дизайн, типа пишите стили сами, так как это все таки готовый Kit. Но у меня таких использований классов буквальна парочка. Больше классов в проекте нет.

С учетом популярности Mantine (и она растет), я думаю что нашел надежное решение на много лет вперед. Буквально скоро начну внедрение и на самом Хекслете.
https://code-basics.com/ru

Ссылки: Телеграм | Youtube | VK