Что нужно знать фронтенд разработчик

Что должен уметь фронтенд-разработчик

Редактор «Нетологии» Светлана Шаповалова разбирается в том, кто такой фронтенд-разработчик, что он должен уметь (или не должен), и за что ему платят прекрасную зарплату (или не очень).

Кто такой фронтенд-разработчик

Согласно ежегодному исследованию StackOverflow, самая популярная профессия среди пользователей сервиса в 2017 году — это Web developer. Именно в эту категорию входят все фронтенд-разработчики.

Данные StackOverflow

Если зайти на первый попавшийся сайт по поиску работы, например, на hh.ru, создастся впечатление, что фронтенд-разработчик — это специалист-хамелеон.

Начинается все с путаницы в названиях вакансий: можно встретить и «front-end developer», и «front end разработчик», и «фронтендщик», и «фронтенд девелопер», и «web developer», и «фронтенд-разработчик». Иногда даже можно увидеть какого-нибудь «веб-верстальщика» с требованиями под фулстак-разработчика. Реакция на это одна: WTF?!

Беда в том, что часть работодателей не отличают (или не хотят отличать) верстальщика от фронтенд-разработчика, — это понятно по описанию вакансий. Разберемся, какие умения отделяют фронтенд-разработчика от «верстака» (верстальщики, не обижайтесь, вы тоже хорошие).

Верстальщик — боец узкого фронта. Его задача — сверстать полученный от дизайнера макет, используя HTML+CSS. Он, возможно, немного умеет в JavaScript, но чаще ограничивается умением прикрутить какой-нибудь плагин jQuery.

Фронтенд-разработчик не просто верстает макеты. Он хорошо знает JavaScript, разбирается во фреймворках и библиотеках (и активно юзает часть из них), понимает, что находится «под капотом» на серверной стороне. Его не пугают препроцессоры и сборщики LESS, SASS, GRUNT, GULP, он умеет работать с DOM, API, SVG-объектами, AJAX и CORS, может составлять SQL-запросы и копаться в данных. Получается сборная солянка навыков, к которым добавляется понимание принципов UI/UX-проектирования, адаптивной и отзывчивой верстки, кросс-браузерности и кросс-платформенности, а иногда и навыков мобильной разработки.

Фронтендщик в обязательном порядке умеет работать с контролем версий (Git, GitHub, CVS и т. д.), использовать графические редакторы, «играть» с шаблонами различных CMS.

Еще крайне желательно знать английский язык, чтобы не переводить спецификацию в Гугл-переводчике, уметь работать в команде, иногда мультиязычной, разбираться в веб-шрифтах, ну и понимать тестировщиков и сам процесс тестирования.

Итак, какие технологии должен освоить фронтенд-разработчик:

• HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills)
• Препроцессоры CSS (Sass, Less, Stylus и т. д.)
• JavaScript
• Популярные фреймворки и библиотеки: jQuery, Angular.JS, React.JS, Backbone.js и т. д.)
• OOCSS / BEM / SMACSS
• SVG
• DOM
• HTML5 API
• ECMAScript 6
• Популярные CMS (WordPress, Drupal, Joomla и т.д.)
• Понимать принципы построения бекэнда и разбираться в серверных технологиях (Node.js, PHP, Ruby, .NET и т. д.)
• Инструменты дебаггинга (Chrome Dev Tools, Firebug и прочие)
• JavaScript транспайлеры (Babel)
• Инструменты контроля версий (Git, GitHub, CVS и т. д.)
• Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и т. д.)
• Графические редакторы (Photoshop, Illustrator и т. д.)

В чем должен разбираться:

• кросс-браузерная и кросс-платформенная разработка;
• прогрессивное улучшение и изящная деградация;
• мобильная разработка;
• адаптивная и отзывчивая верстка;
• веб-шрифты;
• принципы SEO-оптимизации.

Конечно, это все в идеале. Всегда можно выбрать себе стек навыков по душе и развиваться в более узком направлении.

Что говорит статистика

Какие технологии и инструменты чаще всего используют фронтенд-разработчики? Во-первых, трудно представить фронтендщика, не умеющего в JavaScript. Это подтверждают опросы:

• по данным StackOverflow, JavaScript в списке инструментов фронтенда лидирует с огромным отрывом (90,5%)
• исследование компании O’Reilly, проведенное среди европейских программистов в конце 2016 года, тоже ставит JavaScript на первое месте.

Далее идут различного рода фреймворки и библиотеки, самые популярные из которых: Angular, Node.js, React. Кроме обязательного JavaScript, фронтенд-разработчики также используют и другие языки, хоть и не так часто. Лидируют PHP, SQL, Java и С#. И, конечно же, не обойтись фронтендщику без навыков работы с CMS. Самый популярный выбор — WordPress.

Данные StackOverflow

Если сгруппировать самые популярные инструменты в стеки, то получим такую ситуацию:

Данные StackOverflow

А набор самых популярных фреймворков и библиотек всех разработчиков выглядит следующим образом (см. иллюстрацию). Приятно видеть среди этого списка инструменты фронтенда:

Данные StackOverflow

Карьерный путь и зарплата фронтенд-разработчика

Карьерный путь фронтендера обычно начинается с верстальщика — это самый логичный и общепринятый вариант. Сначала изучается связка HTML+CSS, затем на нее «наслаиваются» знания JavaScript, библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем все это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов UI/UX-дизайна.

Бывают и иные варианты. Если начинающий программист изначально знает, в какой сфере планирует развиваться, ничто не мешает ему изучать ключевой стек технологий сразу, а не по частям. Все зависит от целей и времени, которыми располагает будущий фронтендщик. Любой вариант приемлем, лишь бы на выходе получился толковый специалист.

У готового фронтенд-разработчика в целом есть три основных варианта развития:

• горизонтальный (совершенствоваться как специалист, тем самым постоянно повышая свою стоимость на рынке труда);
• вертикальный (расти по карьерной лестнице);
• диверсификационный (освоение смежных специальностей, превращение в фулстака и переквалификация).

Сервис PayScale наглядно проиллюстрировал все возможные пути карьерного развития фронтенд-разработчика:

Какой из них выбрать — зависит лишь от самого специалиста и его пожеланий/навыков.

Касаемо зарплат фронтенд-разработчиков: здесь, как и во всей IT-индустрии, нет единого стандарта оплаты. Все зависит от навыков и умения подать себя. Ну, и от везения иногда 🙂

Средняя зарплата фронтенд-специалиста по России, рублей/месяц

Средняя зарплата фронтенд-специалиста по Москве, рублей/месяц

По данным «Моего круга»

Традиционно годовая зарплата фронтенд-разработчиков в США чуть выше, чем по России. Однако, если вы работаете в филиале иностранной компании — вам такой разрыв, скорее всего, не страшен.

По данным PayScale

Как стать фронтенд-разработчиком

Для начала снять розовые очки. Обучение — это труд и самодисциплина. Большинство начинающих айтишников отсеиваются на этапе «хочу стать программистом и получать зарплату в долларах, но не думал, что придется так много учиться». Уникальность программирования и вообще любой айтишной специальности в постоянном самообучении. В этом и сложность, и прелесть IT-сферы. Если вас это не пугает — круто! У вас есть все шансы стать отличным специалистом.

Главное правило будущего специалиста — ставить реальные цели в процессе обучения. В этом поможет планирование. Составьте список инструментов, которые планируете изучить, и держите его перед глазами.

Тем, кто стартует с нуля, надо начинать с HTML и CSS и освоить их на уровне идеальной верстки PSD-макетов. На этом этапе также надо научиться работать с текстовыми и графическими редакторами и знать основные принципы дизайна (как плюс). Затем взяться за JavaScript: синтаксис, архитектура и возможности языка. Освоить популярные фреймворки и библиотеки, параллельно полюбить системы контроля версий и какой-нибудь из популярных таскраннеров. Добавить препроцессоры и фреймворки CSS, разобраться в серверных технологиях. А дальше можно пить смузи на Бали шлифовать полученные знания до бесконечности.

Примерный путь начинающего фронтенд-разработчика.
У вас он будет свой.

Пройти этот путь можно как в одиночку, так и с наставниками (вузы, курсы). Вот какие самые популярные форматы обучения разработчиков по версии StackOverflow:

Данные StackOverflow

На первом месте находятся онлайн-курсы, за них проголосовали 64,7% опрошенных разработчиков, затем идут: самообучение по книгам, офлайн-курсы, опенсорс-разработка и лагери программирования. Интересно, что высшее образование (Master’s degree) стоит практически на последнем месте.

Вывод

Фронтенд-разработчик — это универсальный солдат. Он и макет заверстает, и веб-приложение построит, и серверную часть, если надо, освоит. Знать надо немало: HTML, CSS, JavaScript, библиотеки и фреймворки JS, препроцессоры и фреймворки CSS, системы контроля версий и таскраннеры, технологии бэкенда, юнит-тестирование и многое другое.

Кроме того, нелишними будут soft skills: взаимодействие с людьми и работа в команде, умение наладить эффективный workflow и решать поставленные задачи наиболее оптимальным способом. Не обойтись без уверенных знаний английского языка.

Оплата труда фронтенд-специалиста вполне себе достойная, и чем больше навыков — тем выше шансы получить «жирный» оклад.

Стать фронтенд-разработчиком может каждый, кто не пасует перед самообучением: как мы выяснили, полагаться на вузовское образование сложно. Идеальный вариант — различные онлайн и офлайн-курсы + литература по теме, практика и великий Гугл.

«Нетология» запускает полноценную программу подготовки фронтенд-специалистов — «Профессию front-end разработчик». Это 6-месячный курс, посвященный базовым технологиям фронтенд-разработки: HTML и CSS, JavaScript, Web API, AJAX, веб-сокеты, библиотека React.

По итогу курса студенты создадут собственное одностраничное веб-приложение. Обучение ведут 10 практикующих фронтенд-специалистов — это позволяет получить всестороннее понимание инструментов и задач фронтенд-разработки. В течение всего обучения студенты получат не менее 100 практических заданий, максимально близких к «боевым», и реализуют 3 проекта среднего объема и 1 полноценный проект в качестве дипломной работы.

Все студенты, успешно окончившие курс, получают удостоверение о повышении квалификации установленного образца и фирменный диплом «Нетологии».

Что должен знать FrontEnd разработчик в 2019 году

Верстка сайтов и веб-программирование привлекают большое количество новичков в мир IT. Это связано с достаточно низким порогом вхождения. Количество желающих стать фронтендщиком с каждым годом увеличивается, вследствии чего растут и требования к кандидатам.

Какие технологии необходимо изучить, чтобы стать FrontEnd разработчиком в 2019 году? Давайте разберемся.

HTML5 & CSS3

HTML5 и CSS3 — это фундаментальные технологии, без знания которых не обойтись любому веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид.

Также необходимо владеть:

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

Хорошее владение HTML и CSS уже позволяет заниматься версткой сайтов и начать зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика.

Bootstrap 4

Популярная HTML/CSS платформа для разработки адаптивных веб-приложений, которую применяют при создании сайтов и интерфейсов администраторских панелей. Основные преимущества Bootstrap:

• высокая скорость верстки;
• кроссбраузерность и кроссплатформенность;
• наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов;
• низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).

JavaScript

Язык программирования, который используется как при разработке клиентской стороны веб-приложения, так и серверной. При помощи JavaScript (сокращенно — JS) можно писать даже десктопные (настольные) и мобильные приложения, используя определенные программные платформы и библиотеки. Этот язык позволяет:

• динамически изменять разметку;
• осуществлять интерактивное взаимодействие с пользователем;
• анимировать изображения;
• совершать валидацию форм;
• управлять мультимедиа и т. д.

Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика.

Сергей Росоха, Software Architect с 11-летним опыта во FrontEnd/JS, отмечает важность изучения алгоритмов и структур данных на JavaScript:

“JavaScript давно уже используется не только для разработки динамических интерфейсов пользователя, но и для написания достаточно сложной бизнес-логики. Поэтому знание алгоритмов и структур данных становится критичным для JS-разработчиков. ” (источник)

JavaScript использует официальный стандарт ECMAScript (сокращенно — ES), который подразумевает определенное формальное описание синтаксиса, базовых объектов и алгоритмов. На данный момент существует множество различных версий ES. Работодатели чаще всего требуют знание ES6.

Однако, вначале необходимо изучить чистый JavaScript и лишь потом вникать в новые стандарты. Как ни крути, а классику надо знать. Благодаря хорошему владению JS можно быстро разобраться в любой версии ES и затем освоить любой фреймворк или библиотеку.

Фреймворки JavaScript

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

Самыми популярными фреймворками для фронтенд-разработки можно назвать Vue.js, React и Angular. Каждый из них предназначен для решения своего спектра задач и имеет различную степень сложности: Vue.js — самый легкий (но и с наименьшим сообществом), React — средней сложности, Angular — высокой сложности. Стоит сконцентрироваться на глубоком изучении одного фреймворка, но в то же время очень рекомендуется знать особенности и сферу применения всех вышеперечисленных технологий.

Какой фреймворк все же выбрать? Мнения на этот счет расходятся. Инструментарий выбирается индивидуально под проект и трудно предугадать, какие задачи вам нужно будет решать. Мы рекомендуем Angular.

CSS препроцессоры

CSS препроцессор — это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS код. Самыми популярными считаются SASS, Stylus, LESS и PostCSS, однако, наибольшее комьюнити имеет именно SASS. Препроцессоры предназначены для:

• ускорения процесса написания кода;
• упрощения чтения кода и дальнейшей его поддержки;
• минимизации рутинной работы при написании кода.

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

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

Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.

jQuery

Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она призвана упростить программирование на JS. Данная библиотека представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода.

Несмотря на то, что jQuery теряет популярность, уступая место фреймворкам JS, большое количество сайтов все еще используют эту библиотеку. FrontEnd разработчик, работающий в офисе, не всегда создает новые веб-сайты — необходимо поддерживать и обновлять уже существующие. Тут без знания jQuery никак не обойтись.

JavaScript Core (DOM, AJAX, JSON)

DOM (Document Object Model) — объектное представление исходного HTML-документа. Ключевым является понятие DOM-дерева, которое описывает структуру страницы. С помощью объектной модели JavaScript получает полную власть над HTML-документом: возможность редактировать, удалять и добавлять элементы и атрибуты HTML, менять CSS код и т. д.

AJAX (Asynchronous JavaScript And XML) — это синтез технологий JavaScript и XML, который фактически представляет собой комбинацию:

• встроенного в браузер XMLHttpRequest-объекта (чтоб запрашивать данные с веб-сервера);
• JavaScript и HTML DOM (чтобы отображать или использовать данные).

AJAX позволяет веб-страницам совершать асинхронное обновление, обмениваясь данными с веб-сервером. Благодаря этой технологии страница не нуждается в перезагрузке — обновляется лишь конкретная ее часть (вспомните ленту новостей в социальных сетях).

JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий JavaScript, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP.

Все три технологии являют особую ценность для каждого веб-разработчика и раскрывают организацию работы интернет-приложения.

“Блок, Элемент, Модификатор” — методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.).

Webpack

Мощный сборщик модулей, который позволяет скомпилировать в один файл несколько разных модулей. Используется во время работы над объемными проектами. Успешно применяется как во фронтенд-разработке, так и при создании бэкенд-приложений.

Flex и Grid CSS

Технологии верстки надежных адаптивных веб-страниц, которые позволяют легче создавать динамические сайты и удобнее структурировать их содержимое. Лучше всего Flex-верстку в действии показывает интерактивный сайт flexboxfroggy.com, а Grid-верстку — cssgridgarden.com.

Gulp / Grunt

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

TypeScript

Кроссплатформенный строго типизированный язык, который является расширением JavaScript. Строгая типизация позволяет уменьшить количество потенциальных ошибок в исходном коде, написанном на TypeScript. Также, этот язык реализует концепции, которые близки объектно-ориентированным языкам, таким как C#, Java и подобным. TypeScript повышает скорость и удобство написания сложных комплексных программ, вследствии чего их становится легче поддерживать, масштабировать и тестировать.

Язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением, не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других.

Английский язык

Знание английского языка является одним из основных требований к фронтенд-разработчику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.

Итоги

FrontEnd разработчик — достаточно универсальный боец в мире веб-разработки. Он должен уметь и верстать, и создавать логику работы клиентской части, и понимать работу серверной части веб-приложения. Для освоения такого обширного инструментария стоит запастись временем, терпением и упорством. Перечисленные в статье средства разработки сайтов также имеют аналоги, поскольку для решения разных задач подходят разные веб-инструменты. Однако мы выбрали самые популярные и эффективные из них.

Если у вас остались вопросы о последовательности и необходимости изучения тех или иных технологий, ответы вы можете найти в видео Как стать FrontEnd разработчиком, в котором подробно рассматриваются основные технологии создания клиентских веб-приложений.

Для тех, кто хочет стать FrontEnd разработчиком, на ITVDN создана комплексная программа обучения, которая включает в себя 35 видео курсов.

Желаем вам успехов в достижении ваших целей!

Frontend разработчик

Фронт-энд разработчик (с англ. «front-end developer») — это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере. Главная задача фронт-энд разработчика — сделать максимально удобным взаимодействие пользователей с сайтом или веб-приложением. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам).

Само слово «фронт» говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем, и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист — бэк-энд разработчик. Для сведения: существует универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. «full stack developer»).

Основные инструменты фронт-энд разработчика в web: JavaScript, HTML, CSS.

JavaScript — главный язык фронт-энд разработчика в web, на котором он осуществляет программирование пользовательского интерфейса. Основная задача фронтендера — вёрстка сайтов: написание HTML-кода и CSS-стилей для представления информации в понятном всем браузерам виде и внешнему соответствию сайта макету дизайнера. Часто бывает, что макеты не отражают всех деталей общей идеи. В данном случае фронт-энд разработчик включает свои дизайнерские способности, чтобы учесть все технические детали и нюансы. Есть много дополнительных инструментов, которые автоматизируют рутинную часть работы: Sass/SCSS, jQuery, LESS, AngularJS, Bootstrap, Prototype, Ember.js, Backbone, React.js, Grunt Gulp. А появление Chrome Dev Tools и Firebug позволило повысить производительность труда.

Фронт-энд разработчик в web отвечает за то, чтобы страницы сайта выглядели во всех браузерах одинаково и соответствовали макету дизайнера. С появлением новых средств разработки и более современных браузеров эта задача решается проще. Но интерфейсы современных сайтов или интернет-сервисов становятся более сложными, а многообразие устройств, с которых пользователи выходят в сеть, постоянно расширяется — ноутбуки, планшеты, смартфоны. Поэтому фронт-энд разработчику очень важно, как и любому программисту, постоянно находиться в курсе всех новшеств и фишек, чтобы успешно адаптировать сайты под новые устройства.

Код сайта, написанный фронт-энд разработчиком, можно увидеть, вызвав контекстное меню на сайте и выбрав пункт «Посмотреть код».

Особенности профессии

Функционал фронт-энд разработчика в web выглядит следующим образом:

• создание HTML-страницы сайта на основе дизайн-макетов;
• вёрстка сайта и шаблонов для CMS;
• привязка к пользовательскому интерфейсу скриптов, которые обеспечивают визуализацию и анимацию страниц сайта;
• обеспечение необходимого уровня пользовательского интерфейса (UI — User Interface) и опыта взаимодействия (UX — Uzer Experience).

Типичный верстальщик

Что стоит изучать фронтенд разработчику в 2019 году?

Начало 2019 года — это замечательный повод проанализировать будущее фронтенд-разработки и выяснить, какие технологии стоит применять в работе в предстоящем году, а от каких пора отказаться. Читай дальше и сравни с тем, что ты уже знаешь (или не знаешь, но уже пора учить).

Основа: HTML, CSS и Javascript

Безусловно, мы начнем с основ. Вам необходимо знать HTML, CSS и Javascript. Это то на чем держится вся фронтенд разработка в целом. Если вы не знаете хотя бы одну технологию из предложенных, то вряд ли Вы дальше сможете развиваться как фронтендер. Но есть хорошие новости. Всё это можно изучить в кратчайшие сроки. Если Вам интересно, сколько по времени всё это может занять, то рекомендую посмотреть видео, в котором всё разложено по полочками.

После того, как Вы освоите базу, Вы можете перейти к более углубленному изучению этих технологий.

Pug — это шаблонизатор и HTML-препроцессор, написанный на JavaScript для NodeJS.

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

Вы можете использовать CSS препроцессоры такие как: SASS/SCSS, STYLUS, LESS. Самый популярный на сегодняшний день SASS.

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

ECMAScript 6 — новая спецификация JavaScript со множеством новых возможностей.

ES6 является стандартом, а JavaScript в данном случае самая популярная реализация этого стандарта. ES6 это тот стандарт, который сейчас используется при разработке во многих компаниях.

Сборщики JavaScript

На данный момент существует 2 сборщика: Gulp и Grunt. Самый популярный — Gulp.

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

Безусловно, вместе с этим Вам необходимо знать основы Node.js и использовать менеджер пакетов, например, npm или Yarn.

В некоторых случаях, если Вы уже знаете JavaScript, рекомендуют изучать TypeScript, но он потребуется, только если Вы будете использовать JS фреймворк Angular.

JS фреймворки

На данный момент популярны 3 фреймворка: Angular, React и Vue.js. Изучать все фреймворки сразу не нужно, вполне возможно, если Вы уже работаете на определенную компанию, то там используется определенный стек технологий. Зная это, Вам будет легче определиться с чего начать. Однако, если Вы работаете на фриланс биржах или удаленно, то Вы можете начать изучать любой JS фреймворк, в любом случае Вы найдете заказчиков. Но, у этих фреймворков есть некоторые особенности, о которых хотелось бы поговорить более детально.

Angular — полноценный фреймворк. У него есть зависимость от предыдущих версий и компонентов, переход с одной версии на другую не возможен, поэтому придется последовательно устанавливать все обновления между версиями. Это является минусом, так как это может привести к необоснованному увеличению объема приложения.

React — библиотека. У него есть полная зависимость между версиями, также возможно подключение к приложению библиотек разных версий и обновление устаревших, с наследованием свойств.

Vue.js — самый молодой фреймворк. Его модульная система аналогична React, но включающая в себя все атрибуты JS фреймворка, работающих с полной обратной зависимостью.

Что можно в целом сказать про эти 3 JS фреймворка?

Если Вам нужно быстро изучить среду, то Вы можете сделать выбор между React и Vue.js. Вместе с тем, на Vue.js легко перейти тем, кто уже знает Angular или React. Если Вы знаете, что предполагается разработка крупного проекта, то стоит обратить свое внимание именно на Angular, так как у него большая скорость рендеринга и есть большое комьюнити разработчиков, которые помогут в случае возникновения проблем. React в данном случае может показаться слишком объемным, а у Vue.js на данный момент нет такого количества гайдлайнов. Если в разработке в будущем будут привлекаться другие программисты, то Vue.js может стать лучшим выбором, ведь этот фреймворк не только прост для изучения, но и позволяет менять приложения без разрушения его архитектуры. Если для проекта предусматривается его обновление или расширение функциональности, то стоит рассматривать Vue.js или React.

Webpack

Webpack позволяет избавиться от таких инструментов, как Bower, Gulp или Grunt сборщик.

Webpack — это модуль с открытым исходным кодом для JavaScript-модулей.

Flexbox и Grid CSS

Если снова вернуться к теме CSS, то здесь стоит отметить, что актуальнее всего использовать технологии Flexbox и Grid.
Игра Flexbox Froggy — flexboxfroggy.com
Игра Grid Garden — cssgridgarden.com

Также, стоит по максимуму использовать SVG изображения на сайтах, вместо привычных растровых форматов, таких как png и jpeg. Изображения сделанные при помощи SVG (в основном это иконки или мелкие элементы) корректно отображаются на любых мониторах, в том числе ретина.

Если Вы считаете, что мы не назвали какую-то из технологий которые должен знать Front-end разработчик в 2019 году, то обязательно напишите название этой технологии в комментариях.

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.