Во front-end разработке не развиваться опасно! Через несколько лет ручной работы вы ощутите сильный недостаток знаний. Сборщики пакетов, препроцессоры, фреймворки и многое другое останется для вас загадкой.
А конкуренты только этого и ждут!
Так что знакомьтесь: современные инструменты frontend разработчика.
Любая серьёзная экосистема ПО рано или поздно обзаводится пакетными менеджером и репозиторием. Главные задачи пакетных менеджеров – автоматизация установок и контроль зависимостей. Первые менеджеры пакетов появились в дистрибутивах Linux, когда их экосистема вышла за пределы ядра операционной системы.
Сегодня высокоуровневые программные платформы имеют аналогичные системы. Всё просто: когда язык или технология «обрастает» библиотеками, возникает необходимость в пакетном менеджере, который автоматизирует установку зависимостей. Так было с Node.js – программной платформой, которая превращает язык программирования JavaScript в язык общего назначения.
Изначально npm использовался для контроля зависимостей Node.js. Со временем он превратился в инструмент frontend разработчика на JavaScript. Сегодня репозиторий npm содержит более 800000 пакетов, что делает его самым большим репозиторием на планете! Вы найдёте там пакеты почти для всех ваших нужд.
yarn – это пакетный менеджер JavaScript, один из open-source проектов Facebook и прямой конкурент npm. На первых порах он опережал npm благодаря параллельным загрузкам и кэшированию, после чего npm наверстал упущенное и, возможно, подойдёт вам больше.
Yarn полностью совместим с пакетами npm и позиционируется как замена последнему. Серьёзных отличий нет, выбирайте любой!
CSS препроцессоры – это компилируемые в CSS языки, которые расширяют функциональность CSS, добавляя переменные, примеси и вложенное наследование. CSS-препроцессоры дают более чистый и лёгкий для чтения код, который редактируется быстрее чистого CSS.
Препроцессоры – это важные инструменты frontend разработчика.
Sass – самый популярный препроцессор CSS, начните изучение с него. Программисты могут освоить его за 15 минут. Тем же, кто не имеет за плечами опыта программирования, будет сложнее. Приложите усилия, оно того стоит: после освоения Sass вы перестанете писать CSS c нуля!
Начните с официального гайда или освойте Sass за 15 минут.
Среди достоинств Sass – большое сообщество и качественная документация, много книг и руководств. Самое лучшее место для старта – официальная документация и практика.
PostCSS
PostCSS – не препроцессор, но может использоваться в качестве него. Приступайте к нему после изучения Sass. Этот инструмент позволяет разработчикам писать собственные препроцессоры и постпроцессоры CSS, называемые плагинами.
PostCSS популярен благодаря функциям, которые улучшают CSS, и хорошей интеграции с любыми инструментами сборки.
Популярные пакеты PostCSS
PostCSS предоставляет общий интерфейс для инструментов обработки CSS. Вот самые популярные плагины для вашего понимания возможностей PostCSS:
Autoprefixer
Autoprefixer разбирает ваш CSS и определяет, нужны ли некоторым полям вендорные префиксы.
Так вы получаете более чистый код. Пример:
cssnext
Этот плагин позволяет использовать современные функции CSS и производит их эквивалент для совместимости со старыми браузерами.
- Он добавляет префиксы с помощью Autoprefixer (необязательно использовать Autoprefixer напрямую).
- Позволяет использовать переменные.
- Разрешает использование вложений, как в Sass.
CSS Modules
CSS Modules не являются частью стандарта CSS. Модуль – это файл CSS, в котором все имена классов и анимации имеют локальную область видимости по умолчанию.
csslint
Линтинг поможет вам писать правильный код, избежать ошибок и подводных камней. Плагин Stylelint проверяет CSS во время сборки.
cssnano
cssnano уменьшает и оптимизирует ваш CSS для продакшена.
Другие полезные плагины
Смотрите полный список плагинов в репозитории PostCSS на Github. Некоторые стоят отдельного внимания:
- – система сеток PostCSS; предоставляет примеси в стиле Sass; позволяет использовать правила вложений Sass; – ссылка на любой родительский селектор во вложенном CSS; – переменные в стиле Sass; предоставляет много функций Sass, и больше всего подходит в качестве замены последнему.
В чём отличия от Sass и других препроцессоров?
Главные преимущества PostCSS – возможность выбрать свой путь, нужные вам функции и добавлять новые возможности. Sass и Less не настолько гибкие, в них может быть много лишних для вас функций, их нельзя расширить.
Используйте PostCSS для того, что не умеет Sass: автопрефиксы и линтинг.
Наконец, вы можете написать свой плагин для реализации нужной вам функциональности.
CSS фреймворки, несмотря на свои недостатки, подходят в качестве следующей ступени развития front-end разработчика. В отличие от препроцессоров, фреймворки – это не отдельные инструменты frontend разработчика с ограниченными функциями. CSS фреймворки – это набор инструментов и шаблонов для создания готовых архитектурных решений и приложений.
Bootstrap
Это open source инструмент для разработки на HTML, CSS и JavaScript. Он включает переменные и примеси Sass, адаптивную сеточную систему для создания полноценного приложения.
У проекта отличная документация, начинайте с неё или с подборки:
Materialize CSS
Ещё один фреймворк CSS, который следует принципам дизайна Material Design, принятых в Google. У проекта есть наглядная демонстрация сайтов, созданных с помощью Materialize.
Bulma
Bulma – популярный бесплатный фреймворк, построенный на Flexbox. Поддерживает адаптивный дизайн «из коробки». Интересная особенность фреймворка – модульность. Фреймворк состоит из 39 файлов .sass и позволяет импортировать каждый индивидуально.
Semantic UI
Очередная опция для расширения вашего инструментария. Semantic – это фреймворк, который позволяет разрабатывать красивые, адаптивные макеты с помощью понятного HTML. В нём есть простой отладчик, который поможет отслеживать производительность.
Загляните на сайт фреймворка, который отлично демонстрирует его возможности, или начните отсюда.
Владение одним из современных front-end фреймворков лишает вас необходимости разбираться в архитектуре CSS. Однако знание хотя бы БЭМ-архитектуры поможет вам в долгосрочной перспективе.
Архитектура – это не инструменты frontend разработчика, а методология разработки.
БЭМ или Блок, Элемент, Модификатор – это методология, созданная в Яндекс, которая открывает возможности повторного и совместного использования кода для front-end разработки. Благодаря этой методологии, вы можете писать отдельные модули.
На Github доступен проект от разработчиков БЭМ, в котором есть все необходимые технологии и библиотеки. Начните с русскоязычной документации методологии.
OOCSS
Это методология разработки объектно-ориентированного кода на CSS, которая помогает писать многоразовый, масштабируемый и обслуживаемый код. OOCSS опирается на ООП, включая принцип единственной ответственности и разделения ответственностей.
SMACSS
Ещё один метод, который преследует масштабируемость и модульную архитектуру CSS. Как и OOCSS, этот подход использует классы. В отличие от OOCSS, допускается использование ID и селекторов.
В основе SMACSS лежит классификация. С помощью распределения правил CSS вы можете создавать шаблоны для повторного использования.
Целью категоризации является меньшее количество повторений кода, более последовательное взаимодействие и простое обслуживание.
Эти инструменты frontend разработчика включают в себя линтеры, таск-менеджеры и модульные сборщики. Их цель – автоматизировать все служебные и подверженные ошибкам задачи.
Для выполнения задач инструменты сборки используют свою экосистему и пакеты. Не все инструменты сборки выполняют одинаковые задачи. Иногда приходится использовать разные инструменты в одном проекте, и все они предназначены для автоматизации служебных задач.
Линтеры и средства форматирования кода
Линтеры – это не просто важные рекомендации к стилю, они помогают предотвращать ошибки и потенциально опасный код. Они делают код согласованным и чистым. Используйте линтеры прежде, чем предоставить свой код на ревью.
Prettier
Prettier обеспечивает согласованный стиль, анализирует ваш код и заменяет его собственными правилами, учитывающими максимальную длину строки. Он поддерживает интеграцию с различными IDE.
ESLint
Open source линтер для JavaScript. ESLint позволяет разработчикам обнаруживать проблемы в коде JavaScript, не выполняя его.
Утилита позволяет создавать собственные правила и подключать их в любое время.
Начните с официального гайда.
Другие линтеры:
- – онлайн-линтер JavaScript. – ещё один онлайн-линтер с поддержкой JSON. – теперь это часть ESLint.
Таск-менеджеры
Есть три технологии создания сайта, каждая из которых используется непосредственно браузером. Первая – это HTML, управляющая структурой страницы. Вторая – CSS, управляющая внешним видом страницы. И, наконец, язык JavaScript, который используется для программирования интерактивности сайта.
Для простых сайтов или небольших команд работа с этими языками напрямую – неплохой подход. Для сложных сайтов, созданных командами инженеров, каждая из которых имеет свою специализацию, прямая работа с этими языками может привести к фиаско.
Представим, что у проекта сменился фирменный стиль корпоративного сайта. Теперь нужно изменить шестнадцатеричный код цвета в разных файлах стилей. При использовании простого CSS эта операция потребует согласованных изменений от нескольких команд. С помощью Sass такое изменение можно сделать одной строкой. Эта проблема применима и к JavaScript, когда инженер пишет код с использованием синтаксиса async/await из ES2017, который затем преобразуется в сложный оператор switch из ES5 с обратными вызовами.
Сайту нужно компилировать Saas в CSS и преобразовывать ES2017 в ES5. Другие нужные операции – уменьшение компилируемого кода и сжатие PNG. Каждая из этих задач должна выполняться в определенном порядке при создании сайта. В зависимости от целей и задач сборки, сайт может быть собран для отладки – некоторые задачи нужно изменять или пропускать. Для решения подобных сложностей были созданы таск-менеджеры – полезные инструменты frontend разработчика.
Скрипты npm
Npm скрипты используются для автоматизации повторяющихся задач, как сборка проекта и уменьшение CSS и JavaScript файлов. Вы можете писать свои скрипты для расширения функциональности и решения любых задач.
Gulp – это таск-менеджер для автоматического выполнения частых задач, написанный на JavaScript. Использует командную строку для запуска задач, определённых в файле Gulpfile.
Модульные сборщики, JavaScript фреймворки, CSS в JS, тестирование, прогрессивные веб-приложения, проверка типов и WebAssembly – это вторая половина пути front-end разработчика.