Хоть и верстка мне не интересна от слова совсем, ко второму потоку я все же решил заредизайнить проект. Мой друг дизайнер сделал макеты в фигме, дизайн систему, темы, цвета, шрифты и прочее.
В видео вы можете увидеть, как проект выглядит сейчас (там будет ДО и ПОСЛЕ). Как я и сказал, верстка сама по себе мне не интересна, поэтому редизайн я решил сделать интересным с ТЕХНИЧЕСКОЙ точки зрения, в адаптив и пиксель перфект я не запаривался. Что интересно в этом редизайне?
1. Модульная Layout система с вложенными лаяутами. Все части интерфейса гибко подменяются\заменяются. Для каждой из страниц можно гибко строить каркас.
2. Одновременно в интерфейсе живут два дизайна. Старый и новый. Пользователь может их переключить галкой. Бизнес логика - одна. Интерфейса - два.
3. Дизайн система. Все кирпичики (компоненты, из которых строится интерфейс, соответствуют дизайн системе. Все отступы, цвета, размеры, шрифты, состояния компонентов совпадают с дизайн системой, которую продумал дизайнер. При продуктовой разработке с текущим UI китом CSS не пишется почти совсем. Интерфейс полностью строится из тех самых кирпичиков. CSS нужен только для редких, кастомных мест. Например, градиентная подсветка пункта меню в сайдбаре.
4. Самое интересное. В интерфейсе существует и старый и новый дизайн одновременно, но в какой то момент старый дизайн все же придется удалять. Зачем поддерживать два состояния? Удаление старого кода процесс муторный, он прорастает глубоко и удалять его руками - боль. Мы настроим всю автоматику и подготовим код так, что удаление старого кода будет происходить одной командой в коде npm run remove:old:design. Достаточно будет запустить скрипт, который мы сами напишем, и он распарсит всю кодовую базу и удалить весь deprecated код, относящийся к старому дизайну.
Достаточно много времени ушло на продумывание того, как сделать не только красиво, но и с технической точки зрения интересно, поэтому решил поделиться с вами) Как вам результат? Уверен, найдутся те кому и это не понравится, но уж явно лучше чем было 😂