Организованное программирование | Кирилл Мокевнин

В поисках идеального UI KIT

Решил на выходных провести время с пользой и перевести code-basics на inertiajs + react + ts + новый ui kit. И неожиданно для себя, уткнулся в проблему с последним. После нескольких дней плотного изучения и попыток внедрить какое-то количество решений, я уперся что для моих задач бутстрап по прежнему на коне.

Вообще я люблю бутстрап, он всегда был практически идеальным решением для моих задач. Есть готовый дизайн, который достаточно хорошо кастомизируется за счет переменных, без написания css. Отличная сетка с кучей утилит + удобным механизмом генерации своих. Приличный набор компонентов, и что важно, это не собранный как в tailwind блок из миллиона классов, а прямо классы для конкретного компонента, что делает html очень компактным.

Кто, то скажет, Кирилл погоди, но он же не может вот это, там нельзя вот так и вообще. И у меня есть что на это скзазать. Во-первых, многие до сих пор в голове представляют себе bootstrap 3, где кастомизация была слабая. Начиная с 4 версии и особенно в 5, он очень гибкий для готового набора компонентов. Мало кто например догадывается что на хекслете бутстрап, а в стандартных вещах (не лендах) там почти нет кастома (и это за 11 лет жизни проекта). Во-вторых, я на нем делаю свой проект, где нет абстрактного бизнеса, который может что-то захотеть, что бутстрап не может (картинка: я и есть бизнес). С самого начала была выбрана стратегия подстраиваться под него (кроме лендов), чтобы не тратить время и деньги на UI.

И, в общем, я бы и дальше продолжил им пользоваться без тени сомнения, если не вот эти. но:

- Так как проект переводится на inertia + react, то весь фронтенд уезжает в jsx, а там нужны не классы, а нормальные react компоненты с поддержкой ts и местами логикой (какие-нибудь модалки). У бутстрапа нет своей либы для этого. Есть react-bootstrap, но его делают энтузиасты в свободное от работы время. В общем ненадежно и с отставанием
- Все же сейчас в bootstrap компонентов меньше чем хотелось бы и они как-то не горят их добавлять. Всякие хитрые селекты, автокомплиты и более навороченные с точки зрения UI штуки. Не хочется ходить все это ставить со стороны и заниматься интеграциями (до сих пор мучаемся с select2 для автокомплита).
- Этот пункт меня не радует, но против массы не попрешь. Любая технология проходит путь с восходом и затмением, которое часто связано с приходом нового поколения, отрицающего все старое. Бутстрап, чтобы он не делал, уже отслужил свое в головах большинства. И чем дальше, тем меньше шансов найти кого-то кто от него в восторге. Пофиг даже если человек не работал с ним, это легко наверстать, но вот это ощущение, что это что-то старое, с чем не хочется возиться.

Вот с такими мыслями я засел вечером в пятницу за комп. Загуглил все что есть из популярного chakra, material, mantine, tailwind и все что на базе него daisyUI, nextUI, shadcn, ant.design, primereact, fluentui, blueprint, baseweb.design. Кроме этого видел еще десяток, но по коммитам, звездам и форкам они не вызывают доверия. Слишком высок риск что их забросят.

Изучил их доку, половину попробовал поставил и немного поверстал. В конце-концов выработал такой алгоритм поиска:

- Проверяю есть ли компонент navbar. Если его нет, то либа заставит меня делать то, от чего я хочу уйти
- Смотрю на верстку navbar, если это просто набор элементов из которых собирается navbar, то это не bootstrap-style конструктор. Это скорее конструктор компонентов типа tailwind. Navbar, который мне нужен, это прямо компонент в этом UI Kit с поддержкой схлопывания до бургера, дропдаунов и всего такого
- Смотрю наличие готовых блоков/сниппетов/примеров страниц. Я работаю без дизайнера и мне нужно видеть примеры компоновок компонентов и страниц.
- Ну и конечно же дока. Кто видел доку бутстрапа, понимает что такое хорошее описание.

Нашел ли я что-то идеальное? К сожалению нет. Пытаюсь завести mantine, так как он ближе всех отвечает моим запросам. Но в целом, мир UI хочет чтобы я был фанатом гибкости и кастомизации :)

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

Telegram

Организованное программирование | Кирилл Мокевнин

Как из джуниора дойти до мидла, а потом и до синьора
Ютуб https://youtube.com/@mokevnin
Связь для предложений: @kirillpublic

www.group-telegram.com/tr/orgprog.com/254

9.7K viewsКирилл Мокевнин (Бот), edited  Dec 30, 2024 at 13:55

В поисках идеального UI KIT

Решил на выходных провести время с пользой и перевести code-basics на inertiajs + react + ts + новый ui kit. И неожиданно для себя, уткнулся в проблему с последним. После нескольких дней плотного изучения и попыток внедрить какое-то количество решений, я уперся что для моих задач бутстрап по прежнему на коне.

Вообще я люблю бутстрап, он всегда был практически идеальным решением для моих задач. Есть готовый дизайн, который достаточно хорошо кастомизируется за счет переменных, без написания css. Отличная сетка с кучей утилит + удобным механизмом генерации своих. Приличный набор компонентов, и что важно, это не собранный как в tailwind блок из миллиона классов, а прямо классы для конкретного компонента, что делает html очень компактным.

Кто, то скажет, Кирилл погоди, но он же не может вот это, там нельзя вот так и вообще. И у меня есть что на это скзазать. Во-первых, многие до сих пор в голове представляют себе bootstrap 3, где кастомизация была слабая. Начиная с 4 версии и особенно в 5, он очень гибкий для готового набора компонентов. Мало кто например догадывается что на хекслете бутстрап, а в стандартных вещах (не лендах) там почти нет кастома (и это за 11 лет жизни проекта). Во-вторых, я на нем делаю свой проект, где нет абстрактного бизнеса, который может что-то захотеть, что бутстрап не может (картинка: я и есть бизнес). С самого начала была выбрана стратегия подстраиваться под него (кроме лендов), чтобы не тратить время и деньги на UI.

И, в общем, я бы и дальше продолжил им пользоваться без тени сомнения, если не вот эти. но:

- Так как проект переводится на inertia + react, то весь фронтенд уезжает в jsx, а там нужны не классы, а нормальные react компоненты с поддержкой ts и местами логикой (какие-нибудь модалки). У бутстрапа нет своей либы для этого. Есть react-bootstrap, но его делают энтузиасты в свободное от работы время. В общем ненадежно и с отставанием
- Все же сейчас в bootstrap компонентов меньше чем хотелось бы и они как-то не горят их добавлять. Всякие хитрые селекты, автокомплиты и более навороченные с точки зрения UI штуки. Не хочется ходить все это ставить со стороны и заниматься интеграциями (до сих пор мучаемся с select2 для автокомплита).
- Этот пункт меня не радует, но против массы не попрешь. Любая технология проходит путь с восходом и затмением, которое часто связано с приходом нового поколения, отрицающего все старое. Бутстрап, чтобы он не делал, уже отслужил свое в головах большинства. И чем дальше, тем меньше шансов найти кого-то кто от него в восторге. Пофиг даже если человек не работал с ним, это легко наверстать, но вот это ощущение, что это что-то старое, с чем не хочется возиться.

Вот с такими мыслями я засел вечером в пятницу за комп. Загуглил все что есть из популярного chakra, material, mantine, tailwind и все что на базе него daisyUI, nextUI, shadcn, ant.design, primereact, fluentui, blueprint, baseweb.design. Кроме этого видел еще десяток, но по коммитам, звездам и форкам они не вызывают доверия. Слишком высок риск что их забросят.

Изучил их доку, половину попробовал поставил и немного поверстал. В конце-концов выработал такой алгоритм поиска:

- Проверяю есть ли компонент navbar. Если его нет, то либа заставит меня делать то, от чего я хочу уйти
- Смотрю на верстку navbar, если это просто набор элементов из которых собирается navbar, то это не bootstrap-style конструктор. Это скорее конструктор компонентов типа tailwind. Navbar, который мне нужен, это прямо компонент в этом UI Kit с поддержкой схлопывания до бургера, дропдаунов и всего такого
- Смотрю наличие готовых блоков/сниппетов/примеров страниц. Я работаю без дизайнера и мне нужно видеть примеры компоновок компонентов и страниц.
- Ну и конечно же дока. Кто видел доку бутстрапа, понимает что такое хорошее описание.

Нашел ли я что-то идеальное? К сожалению нет. Пытаюсь завести mantine, так как он ближе всех отвечает моим запросам. Но в целом, мир UI хочет чтобы я был фанатом гибкости и кастомизации :)

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

BY Организованное программирование | Кирилл Мокевнин