Писать разметку, стили и скрипты руками – все начинали с этого. Пришло время освоить фреймворки и прочие инструменты frontend разработчика!

Во front-end разработке не развиваться опасно! Через несколько лет ручной работы вы ощутите сильный недостаток знаний. Сборщики пакетов, препроцессоры, фреймворки и многое другое останется для вас загадкой.

А конкуренты только этого и ждут!

Так что знакомьтесь: современные инструменты frontend разработчика.

1. Менеджеры пакетов

Любая серьёзная экосистема ПО рано или поздно обзаводится пакетными менеджером и репозиторием. Главные задачи пакетных менеджеров – автоматизация установок и контроль зависимостей. Первые менеджеры пакетов появились в дистрибутивах Linux, когда их экосистема вышла за пределы ядра операционной системы.

Сегодня высокоуровневые программные платформы имеют аналогичные системы. Всё просто: когда язык или технология «обрастает» библиотеками, возникает необходимость в пакетном менеджере, который автоматизирует установку зависимостей. Так было с Node.js – программной платформой, которая превращает язык программирования JavaScript в язык общего назначения.

npm

Изначально npm использовался для контроля зависимостей Node.js. Со временем он превратился в инструмент frontend разработчика на JavaScript. Сегодня репозиторий npm содержит более 800000 пакетов, что делает его самым большим репозиторием на планете! Вы найдёте там пакеты почти для всех ваших нужд.

yarn

yarn – это пакетный менеджер JavaScript, один из open-source проектов Facebook и прямой конкурент npm. На первых порах он опережал npm благодаря параллельным загрузкам и кэшированию, после чего npm наверстал упущенное и, возможно, подойдёт вам больше.

Yarn полностью совместим с пакетами npm и позиционируется как замена последнему. Серьёзных отличий нет, выбирайте любой!

2. Препроцессоры CSS

CSS препроцессоры – это компилируемые в CSS языки, которые расширяют функциональность CSS, добавляя переменные, примеси и вложенное наследование. CSS-препроцессоры дают более чистый и лёгкий для чтения код, который редактируется быстрее чистого CSS.

Препроцессоры – это важные инструменты frontend разработчика.

Sass

Sass – самый популярный препроцессор CSS, начните изучение с него. Программисты могут освоить его за 15 минут. Тем же, кто не имеет за плечами опыта программирования, будет сложнее. Приложите усилия, оно того стоит: после освоения Sass вы перестанете писать CSS c нуля!

Начните с официального гайда или освойте Sass за 15 минут.

Среди достоинств Sass – большое сообщество и качественная документация, много книг и руководств. Самое лучшее место для старта – официальная документация и практика.

PostCSS

PostCSS – не препроцессор, но может использоваться в качестве него. Приступайте к нему после изучения Sass. Этот инструмент позволяет разработчикам писать собственные препроцессоры и постпроцессоры CSS, называемые плагинами.

PostCSS популярен благодаря функциям, которые улучшают CSS, и хорошей интеграции с любыми инструментами сборки.

Популярные пакеты PostCSS

PostCSS предоставляет общий интерфейс для инструментов обработки CSS. Вот самые популярные плагины для вашего понимания возможностей PostCSS:

Autoprefixer

Autoprefixer разбирает ваш CSS и определяет, нужны ли некоторым полям вендорные префиксы.

Так вы получаете более чистый код. Пример:

a {
    display: flex;
}

Компилируется в:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

cssnext

Этот плагин позволяет использовать современные функции CSS и производит их эквивалент для совместимости со старыми браузерами.

• Он добавляет префиксы с помощью Autoprefixer (необязательно использовать Autoprefixer напрямую).
• Позволяет использовать переменные.
• Разрешает использование вложений, как в Sass.

И много других функций!

CSS Modules

CSS Modules не являются частью стандарта CSS. Модуль – это файл CSS, в котором все имена классов и анимации имеют локальную область видимости по умолчанию.

csslint

Линтинг поможет вам писать правильный код, избежать ошибок и подводных камней. Плагин Stylelint проверяет CSS во время сборки.

cssnano

cssnano уменьшает и оптимизирует ваш CSS для продакшена.

Другие полезные плагины

Смотрите полный список плагинов в репозитории PostCSS на Github. Некоторые стоят отдельного внимания:

• LostGrid – система сеток PostCSS;
• postcss-sassy предоставляет примеси в стиле Sass;
• postcss-nested позволяет использовать правила вложений Sass;
• postcss-nested-ancestors – ссылка на любой родительский селектор во вложенном CSS;
• postcss-simple-vars – переменные в стиле Sass;
• PreCSS предоставляет много функций Sass, и больше всего подходит в качестве замены последнему.

В чём отличия от Sass и других препроцессоров?

Главные преимущества PostCSS – возможность выбрать свой путь, нужные вам функции и добавлять новые возможности. Sass и Less не настолько гибкие, в них может быть много лишних для вас функций, их нельзя расширить.

Используйте PostCSS для того, что не умеет Sass: автопрефиксы и линтинг.

Наконец, вы можете написать свой плагин для реализации нужной вам функциональности.

3. Фреймворки CSS

CSS фреймворки, несмотря на свои недостатки, подходят в качестве следующей ступени развития front-end разработчика. В отличие от препроцессоров, фреймворки – это не отдельные инструменты frontend разработчика с ограниченными функциями. CSS фреймворки – это набор инструментов и шаблонов для создания готовых архитектурных решений и приложений.

Bootstrap

Это open source инструмент для разработки на HTML, CSS и JavaScript. Он включает переменные и примеси Sass, адаптивную сеточную систему для создания полноценного приложения.

У проекта отличная документация, начинайте с неё или с подборки:

• Использование сетки в Bootstrap 4: принципы работы и адаптивность
• Курс по Bootstrap: 10 бесплатных уроков по основам
• Пишем небольшой проект на Bootstrap 4

Materialize CSS

Ещё один фреймворк CSS, который следует принципам дизайна Material Design, принятых в Google. У проекта есть наглядная демонстрация сайтов, созданных с помощью Materialize.

Начните отсюда.

Bulma

Bulma – популярный бесплатный фреймворк, построенный на Flexbox. Поддерживает адаптивный дизайн «из коробки». Интересная особенность фреймворка – модульность. Фреймворк состоит из 39 файлов .sass и позволяет импортировать каждый индивидуально.

У проекта есть документация.

Semantic UI

Очередная опция для расширения вашего инструментария. Semantic – это фреймворк, который позволяет разрабатывать красивые, адаптивные макеты с помощью понятного HTML. В нём есть простой отладчик, который поможет отслеживать производительность.

Загляните на сайт фреймворка, который отлично демонстрирует его возможности, или начните отсюда.

4. Архитектура CSS

Владение одним из современных front-end фреймворков лишает вас необходимости разбираться в архитектуре CSS. Однако знание хотя бы БЭМ-архитектуры поможет вам в долгосрочной перспективе.

Архитектура – это не инструменты frontend разработчика, а методология разработки.

BEM

БЭМ или Блок, Элемент, Модификатор – это методология, созданная в Яндекс, которая открывает возможности повторного и совместного использования кода для front-end разработки. Благодаря этой методологии, вы можете писать отдельные модули.

На Github доступен проект от разработчиков БЭМ, в котором есть все необходимые технологии и библиотеки. Начните с русскоязычной документации методологии.

OOCSS

Это методология разработки объектно-ориентированного кода на CSS, которая помогает писать многоразовый, масштабируемый и обслуживаемый код. OOCSS опирается на ООП, включая принцип единственной ответственности и разделения ответственностей.

SMACSS

Ещё один метод, который преследует масштабируемость и модульную архитектуру CSS. Как и OOCSS, этот подход использует классы. В отличие от OOCSS, допускается использование ID и селекторов.

В основе SMACSS лежит классификация. С помощью распределения правил CSS вы можете создавать шаблоны для повторного использования.

Целью категоризации является меньшее количество повторений кода, более последовательное взаимодействие и простое обслуживание.

5. Инструменты frontend разработчика для сборки

Эти инструменты frontend разработчика включают в себя линтеры, таск-менеджеры и модульные сборщики. Их цель – автоматизировать все служебные и подверженные ошибкам задачи.

Для выполнения задач инструменты сборки используют свою экосистему и пакеты. Не все инструменты сборки выполняют одинаковые задачи. Иногда приходится использовать разные инструменты в одном проекте, и все они предназначены для автоматизации служебных задач.

Линтеры и средства форматирования кода

Линтеры – это не просто важные рекомендации к стилю, они помогают предотвращать ошибки и потенциально опасный код. Они делают код согласованным и чистым. Используйте линтеры прежде, чем предоставить свой код на ревью.

Prettier

Prettier обеспечивает согласованный стиль, анализирует ваш код и заменяет его собственными правилами, учитывающими максимальную длину строки. Он поддерживает интеграцию с различными IDE.

ESLint

Open source линтер для JavaScript. ESLint позволяет разработчикам обнаруживать проблемы в  коде JavaScript, не выполняя его.

Утилита позволяет создавать собственные правила и подключать их в любое время.

Начните с официального гайда.

Другие линтеры:

• JSHint – онлайн-линтер JavaScript.
• JSLint – ещё один онлайн-линтер с поддержкой JSON.
• JSCS – теперь это часть ESLint.

Таск-менеджеры

Есть три технологии создания сайта, каждая из которых используется непосредственно браузером. Первая – это HTML, управляющая структурой страницы. Вторая – CSS, управляющая внешним видом страницы. И, наконец, язык JavaScript, который используется для программирования интерактивности сайта.

Для простых сайтов или небольших команд работа с этими языками напрямую – неплохой подход. Для сложных сайтов, созданных командами инженеров, каждая из которых имеет свою специализацию, прямая работа с этими языками может привести к фиаско.

Представим, что у проекта сменился фирменный стиль корпоративного сайта. Теперь нужно изменить шестнадцатеричный код цвета в разных файлах стилей. При использовании простого CSS эта операция потребует согласованных изменений от нескольких команд. С помощью Sass такое изменение можно сделать одной строкой. Эта проблема применима и к JavaScript, когда инженер пишет код с использованием синтаксиса async/await из ES2017, который затем преобразуется в сложный оператор switch из ES5 с обратными вызовами.

Сайту нужно компилировать Saas в CSS и преобразовывать ES2017 в ES5. Другие нужные операции – уменьшение компилируемого кода и сжатие PNG. Каждая из этих задач должна выполняться в определенном порядке при создании сайта. В зависимости от целей и задач сборки, сайт может быть собран для отладки – некоторые задачи нужно изменять или пропускать. Для решения подобных сложностей были созданы таск-менеджеры – полезные инструменты frontend разработчика.

Скрипты npm

Npm скрипты используются для автоматизации повторяющихся задач, как сборка проекта и уменьшение CSS и JavaScript файлов. Вы можете писать свои скрипты для расширения функциональности и решения любых задач.

gulp

Gulp – это таск-менеджер для автоматического выполнения частых задач, написанный на JavaScript. Использует командную строку для запуска задач, определённых в файле Gulpfile.

Что дальше?

Модульные сборщики, JavaScript фреймворки, CSS в JS, тестирование, прогрессивные веб-приложения, проверка типов и WebAssembly – это вторая половина пути front-end разработчика.

Хотите знать больше? Напишите в комментариях, и мы расскажем ;)