После блокнота освой инструменты frontend разработчика

После блокнота: освой инструменты frontend разработчика

Во 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 разработчика.

Препроцессоры css

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-bootstrap-everywhere

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 разработчика.