Это быстро развивающаяся индустрия 🏃🏼
Современный рабочий процесс фронтенд-разработки - непростая задача. Сядьте и приготовьтесь к бесконечной истории. Когда вы думаете, что почти у цели, уже есть лучшая и более быстрая платформа или инструмент. Начнем наше путешествие.
Дилемма фронтенд-разработчика 🍽
Что выбрать?
Добро пожаловать в мир фронтенд-разработки 👨🏻💻
Менеджеры пакетов:
Yarn, NPM, pnpm…
Препроцессоры CSS:
Sass, PostCSS, Less, Stylus…
CSS Framework (необязательно):
Bootstrap, Foundation, Bulma…
Методология CSS / архитектура / соглашение об именах:
OOCSS, SMACSS, ITCSS, функциональный CSS, BEM, SUITCSS, атомарный…
Исполнители задач:
скрипты NPM, Gulp, Grunt…
Загрузчик модуля Javascript:
Webpack, Require.js, Browserify, Rollup, Parcel…
Транспилятор JavaScript:
Babel, Typescript, Flow…
Анализ кода JS:
JSLint, JSHint, ESLint…
Фреймворки JS:
React, Angular, Vue.js…
CSS в JS:
стилизованные компоненты, модули CSS, Radium…
Автоматическое тестирование:
Mocha, Jest, Enzyme, Chai, Ava, Karma, Jasmine…
Языки шаблонов HTML:
Nunjucks, Moustache, Handlebars, Pug, Twig.js…
Прогрессивные веб-приложения, генераторы статических сайтов… и многое другое.
Аааааааааааааааааааааааааааа! Пожалуйста, прекрати.
Итак, какова лучшая установка? 🚀
Мы - разработчики интерфейса - всегда ищем инструменты, которые помогут нам выполнить больше работы за меньшее время. Построение идеального рабочего процесса - важная часть нашей повседневной жизни, поскольку мы тем временем многому учимся.
В зависимости от типа и размера проекта существует множество подходов. Все, что угодно, от сайта для малого бизнеса, пользовательских интерфейсов, прогрессивных веб-приложений, решений для Jamstack, разработки тем электронной коммерции до сложных проектов, в значительной степени ориентированных на JS.
Мой шаблон 🥳
Gulp 4 + Webpack 4 + Babel + Sass + Архитектура ITCSS + Методология БЭМ + Twig.js
GitHub: https://github.com/tomaszbujnowicz/frontie-webpack
Диспетчер пакетов: Yarn
Быстро и работает должным образом.
Препроцессоры CSS: Sass
В нем есть все, что мне нужно. PostCSS - тоже фантастическое произведение искусства, но правда в том, что, в конце концов, это вопрос личных предпочтений.
CSS Framework:
Мне нравится полностью контролировать свой код, поэтому я использую только некоторые небольшие части из последней версии Bootstrap 4: Система сеток и Адаптивные точки останова.
Архитектура / методология CSS: ITCSS
Архитектура CSS с перевернутым треугольником помогает мне организовать мои файлы CSS наиболее эффективным и структурированным способом. Это также увеличивает ремонтопригодность и снижает сложность.
Соглашение об именовании CSS: БЭМ
Соглашение об именовании БЭМ дает мне намного больше прозрачности и ясности в моей разметке. Крутое визуальное объяснение можно найти здесь Объяснение БЭМ 5-летнему ребенку.
Соответствие CSS: ITCSS + BEM
Они отлично работают друг с другом.
Task Runner: Gulp 4
С помощью Gulp 4 можно настроить практически все, мне нравится эта гибкость.
Загрузчик модуля Javascript: Webpack
Его сложно настроить, но он выполняет свою работу очень хорошо.
Следующий шаг: Parcel молниеносно и, что более важно, нулевое объявление конфигурации тоже кажется правдой (это не Webpack). Это выглядит многообещающе, и есть смысл попробовать.
Транспилятор JavaScript: Babel
Языки шаблонов HTML: Twig.js
Он отлично работает и прост в обращении.
Почему еще один шаблон? Их так много.
Основная причина - исследования, открытия, разработки и совершенствование моих навыков. Сделать этап разработки и процесс интеграции более плавным для людей, с которыми я работаю, также является важной частью этого.
Есть ли лучший рабочий процесс фронтенд-разработки?
Это зависит от обстоятельств, но я бы сказал, что не один. Все они созданы замечательными людьми, которые потратили столько времени на то, чтобы отдать должное сообществу.
