Какой воркфлоу для фронтэнд разработчика/верстальщика сейчас?
Подскажите актуальный сетап библиотек, инструментов для начинающего фронтэнд-разработчика. Желательно с возможной альтернативой для презентационного проекта, и на проекте со сложной логикой и поддержкой(магазины, агрегаторы и т.д)
Раньше использовал Gulp для тасков минификации, конкатенации, деплоя и т.д + Webpack для js. Верстал пару рабочих проектов(визитки презентационные) без фронтэнд библиотек Vue, React и параллельно изучал бэкенд/фронтэнд на Laravel и Vue на сборке, которая в самом фреймворке написана.
Когда верстал, то делал это с нуля без фреймворков:
1. Осмотрел макет
2. Выделил глобальные переменные
3. Экспортировал ассеты: картинки, svg, шрифты.
При необходимости оптимизировать, урезать.
4. Сухая разметка по бэму с вставленным текстом с макета
5. Сама верстка:
- На своей сетке написанной проепроцессором
- Часть Svg инлайн, остальная через спрайт и миксины вставлял. Иконочные шрифты не использовал, типа FontAwesome.
6. Анимация с помощью Animate.css
7. Проверяю в браузерах разных, исправляю и выгружаю на сервер
Подскажите насчет не особо важных нюансов по которым возникают вопросы, так как на разных учебных курсах используют где то с нуля сетку через препроцессор , где то библиотеку используют tailwind с компонентами, и разметкой сразу в html. Все учебные видео чуть упрощают или добавляют новомодную библиотеку для кликбейта.
В офисе не работал, поэтому там какие-то практики не перенимал, да и в принципе не сложилось это всё в единное видение.
Пункты алгоритма неизменные:
1. Осмотрел макет
2. Выделил глобальные переменные
3. Экспортировал ассеты: картинки, SVG, шрифты.
При необходимости оптимизировать, урезать.
7. Проверяю в браузерах разных, исправляю и выгружаю на сервер
Пункты, которые каждый разработчик может по-разному делать в зависимости от проекта, предпочтений:
4. По бэму верстать или использовать styled-components?
5. Верстка
5.1 SVG иконки я через галп превращал в спрайт и потом препроцессором их вставлял через миксины. Меньше запросов на сервер, всё одним файлом. Основные иконки можно вставить инлайново, чтобы пользователь их сразу видел.
А между чем вы выбираете? Какие то пакеты используете типа react-icon. Я так понимаю, что если ты сам дизайнишь легче взять библиотеку иконок готовую или дизайнер специально её использует, чтобы легче верстальщику было.
А если в ручную кастомные иконки экспортировать, то как сейчас предпочитаете в спрайты или инлайново, или какой инструмент используете?
5.2 Сетку свою используете через стили, чтобы разметку чистой оставить или готовые классы в html размертку?
5.3 Компоненты различные в виде табов, модалок и прочего, вы свои пишите и используете из проекта в проект, или берете из готовых библиотек? Я когда верстал, то брал под галереи готовые js библиотеки разве что. Хотя проблем особых написать свою нету. Но так всегда, когда подготовка опережиает практику.
6. Что сейчас для анимации используется framer-motion, animate.css .. Я имею в виду обычную анимацию интерфейса, а не паралакс сложный, игры и т.д
7. Для кроссбраузерности какой инструмент используте? Я когда хотел какой то купить, то помню, что он дороговат был, это было больше для офиса, или человека на потоке. И потом повылезали проблемы на айфонах, когда использовал вышедшие флексы.
И основной сетап галпа, вебпака сейчас самому надо написать или уже из коробки при установке стартер пака хватает? Вопрос в целом общий, при ларавеле, реакте, когда при установке уже бандл собирается, то вы используете его и смотрите как он сконфигурирован или под своб сборку вставляете фреймворк, библиотеку.
P.S Вопросы не супер большой важности, всё это лишь вариант и можно пробовать как хочешь и что хочешь, лишь бы это работало. Но когда через время возвращаешься к чуть забытому и появляются новые фичи разные, то хочется переспросить.
1. Осмотрел макет.
2. Вынес цвета. Точки адаптива.
3. Накидал CSS основные стили.(Да так эффективнее, когда ты сначала думаешь какие классы, а потом их используешь)
4. Разметка. Лично я бэм использую
5. После базового шаблона добавляешь картинки, шрифты, svg
6. Осматриваешь визуально. Подправляешь косяки.
Раньше использовал Gulp
Со временем понял что он не нужен.
Для анимаций использую свое.
Чем больше верстаешь тем больше своих шаблонов для анимаций.
Про кроссбраузерности не понял в чем проблема? Инструмент для чего?)
SVG не сжимаю, в спрайты не перевожу.
У нас проекты на 100+ страниц?
Карусели, календари, мб еще что-то трудное использую готовое.
Модалка это 5 минут делов.
Итог
HTML, CSS(Если больше 10-15 страниц то SASS), JS
Jquery не использую тк как не умею.
owl carousel - слайдеры
form validation - для форм
Всё
Алексей Дубровин,
1. Я так понял, ты без фронтэнд-библиотек, только по верстке с элементами JS?
2. Кроссбраузерность - сервисы, которые прогоняют твой сайт через различные устройства и выводит скрины, как оно выглядт на деле. Не через эмуляции встроенных девелоперских инструментов браузера.
KIQIK,
1) Ну, в большинстве случаев да. Очень редко бывает функционал который тебе дольше самому делать чем библиотекой.
Минусы библиотек:
1. Дополнительная зависимость, тот кто дальше будет с этим работать должен ее знать
2. Не знаешь как это устроено, труднее изменять
По этому предпочтительно нативные методы.
2) Ну обычно я использую просто для 320, 768, >768 просто через инспектор.
Ну и особенности браузеров то-же уже представляешь по опыту +- сразу знаешь где и как решать.
Только готовый результат проверяю. Тыкаю и прочее.
Тк как иногда ты на дизайне не можешь проверить удобство. Пытаюсь еще прокликать весь интерактив.
Алексей Дубровин,
1. Мне показалось, что изучая реакт, то разумнее на нем даже простые проекты верстать:
- Когда можно обернуть компонент, чтобы не копипастить какие то элементы повторяющиеся
- Подобрать библиотеки готовых компонентов на нём или UI библиотеки использовать, но там просто лицензии разные, надо смотреть условия. Одно дело для себя, другое кому то делать, вряд ли это проверять будут.
- Роутер с вложенными фичами
Я это пишу к тому, что сразу в экосистеме вертеться, чтобы в перспективе работать потом на более сложных фронтэнд проектах текущего стэка. Все же, если фокусироваться на верстке, анимации и различныъ эффектах, то это больше надо в дизайн, three.js и т.д уходить.
Мне просто кажется, что перспективнее быть разработчиком на проекте с логикой и приятным дизайном, версткой. Если есть желание к дизайну, графике, то уходить больше в профиль моделирования, программ композитинга и выстраивать там свой профессиональный стэк, хотя вопрос открытый.
2. Так да, но все же сервис надежнее. Меня так парень замучал на одном проекте, потому что там на стареньком айфоне чуть плыла верстка. Надо изначально ценник подстраивать под количество поддерживаемых устройств.
Опиши пожаалуйста свой опыт, проекты какие пишешь, их количество. Дополнит картину ответа.
Я не против подхода проще, просто дискутирую.
KIQIK,
Ну пот тот же реакт верстка. она не отменяет того факта что нужно будет это написать
Да в реакте тоже бем использую. Обычно все кастомные проекты верстаются с 0.
Почти никогда не работал со сторонними библиотеками UX.
Одно дело для себя, другое кому то делать, вряд ли это проверять будут.
Ну я хочу работать с людьми на постоянной основе. По этому лучше сразу делать хорошо
1) Если тебя попросят потом сделать правки на этом сайте
2) Другие люди могут узнать кто это сделал и ты так-же можешь получить заказ
По поводу трудных анимаций, думаю да возможно нужно уходить в какие-то библиотеки.
Для меня такой опыт очень редкий.
Обычно можно справиться средствами svg
Ну и тех кто пишет логику в разы больше чем тех кто делает трудные макеты.
Думаю что они и ценятся выше. Я таким не являюсь. По этому не могу прям полностью сказать.
Скажем так логику писать не так трудно тк как это достаточно частая задача,
с которой очень много сталкивался, и это гораздо легче гуглить, вопрос в объемах и качества.
А это чаще зависит от опыта
На счет поддерживаемых устройств 320 это минимум который обязателен.
Для меньшего никто не делает( Я не видел) И да такие телефоны нужно поддерживать
Это всякие мощные мини модели. Или старые телефоны
По проектам.
Интернет магазины.
Лендосы - Нативные.
Верстка логических блоков ( Там не страницы а отдельные компоненты по типу корзин с несколькими этапами)
Прямо сейчас я работаю на React Native там я тоже применяю бэм.
Но не могу сказать что так же как и веб
Для меня обычно инструменты(Методологии, Препроцы и прочее)
Должны решать какую-то значительную задачу.
Бэм мне дает однотипное поведение при чтении. Ты понимаешь что и как.
TS - тк как большой проект, который нужно поддерживать.
