IT 12.08.2020

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

13 мин.

Фронтенд разработчик кто это

Фронтенд-разработчик – это тот, кто создает сайты. По большому счету. А почему его называют не создатель сайтов, а именно фронтенд-разработчик? Сейчас объясню.

Начнем с главного, т.е. происхождения слов. В словах “фронтенд” и “бэкенд” задействованы два разных начала, и одинаковый конец. Front – перед, Back – зад, End – конец. Понятно, что если переводить дословно и буквально, то получится полная чушь: передний конец и задний конец.

Однако, так это никто и не переводит. Frontend означает “передняя часть”, а Backend, соответственно, “задняя часть”. И да, речь идет не только о сайтах, но и о современных программах, приложениях для смартфона. Это на тот случай, если вы однажды услышали от кого-то из знакомых “Я фронтенд-разработчик” или хуже того “Я – бэкенд разработчик”. И подумали про этого человека чего-то не того.

В этом конкретном материале я почти ничего не буду говорить о бэкенде, но коротко объясню, чем он от фронта отличается. А вот о фронтенде постараюсь объяснить максимально понятно. Ибо сегодня это востребованное направление образования и работы, платят фронтендерам очень неплохо. Поехали.

Фронтенд-разработчик

Если зайти на первый попавшийся сайт по поиску работы, например, на 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-оптимизации.

Компоненты frontend-разработки

  • HTML (HyperText Markup Language) — язык разметки документов для создания структуры страницы: заголовки, абзацы, списки и так далее.
  • CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду браузер понимает, как именно отображать элементы. CSS задаёт цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Ещё он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом.
  • JavaScript — это язык, который создавался, чтобы оживить веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Ещё он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.

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

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

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

Важные качества

  • Аналитический ум
  • Ответственность
  • Внимание к мелочам
  • Творческие способности
  • Способность соблюдать дедлайны
  • Умение работать в команде
  • Умение объективно оценивать свои возможности для решения поставленных задач
  • Нацеленность на результат
  • Постоянное желание осваивать новые технологии и инструменты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кто такой фронтенд-разработчик и как им стать?
По данным «Моего круга»

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

Кто такой фронтенд-разработчик и как им стать?
По данным PayScale

Плюсы и минусы профессии

Плюсы

Востребованная и высокооплачиваемая профессия.

Минусы

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

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

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

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

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

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

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

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

Кто такой фронтенд-разработчик и как им стать?
Данные StackOverflow

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

Фронтенд-разработка на практических примерах

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

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

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

Если говорить об освоении данной профессии с нуля, то потребуется изучить следующие технологии:

1. HTML и CSS. Как известно, HTML – это язык разметки документов на сайтах. А CSS – это каскадные таблицы стилей, которые управляют оформлением разных элементов на веб-страницах (например, размером и типом шрифтов). И освоить эти инструменты нужно в первую очередь.

 2. JavaScript. По сути, основной язык программирования, который должен знать front-end-программист. При этом есть разные библиотеки готовых скриптов, написанных на JavaScript. И их тоже желательно изучить, так как их применение упрощает и ускоряет работу. Одна из таких библиотек – jQuery.

3. Методология верстки. Подойдёт тот же БЭМ от Яндекса. Это методология «Блок-Элемент-Модификатор», которая помогает создавать web-приложения по определенным принципам. Так называемый компонентный подход в вёрстке, который упрощает поддержку структуры кода при росте проекта, позволяет использовать код повторно и вносить в него точечные изменения с минимальными затратами, добавляя функциональные элементы либо обновляя дизайн.

 4. Фреймворки. Пригодится, в частности, Bootstrap. А вообще, фреймворк – это набор готовых решений и на их базе можно создавать сайты гораздо быстрее, чем если бы вы делали всё с нуля.

5. Кроссбраузерная вёрстка. Разумеется, нужно уметь создавать веб-страницы таким образом, чтобы они одинаково выглядели во всех браузерах, но это ведь очевидно, не правда ли?

6. Адаптивный дизайн. Речь идёт о дизайне, который может подстраиваться под размеры экрана пользователя. В результате сайт будет оптимально выглядеть и на персональном компьютере, и на планшете, и на смартфоне.

7. Язык серверного программирования. Рекомендуется хотя бы на базовом уровне знать, например, один из самых популярных языков в среде web. Как вы уже, наверное, догадались, мы говорим о PHP.

8. Git. Ну, без знания системы контроля версий сегодня никак, сами понимаете.

Место работы

Компании по разработке сайтов, веб-приложений, мобильных приложений.

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

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

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

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

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

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

Вывод

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

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

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

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

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

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

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

P.S. Как вы считаете, какие знания жизненно необходимы фронтенд-разработчику, а какие можно осваивать по мере надобности? Обсуждаем в комментариях.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»?

Телеграм Нетологии

Источники

  • https://internetprofessia.ru/2019/10/31/frontend-razrabotchik-kto-eto/
  • https://habr.com/ru/company/netologyru/blog/327294/
  • https://skillbox.ru/media/code/frontend_i_backend_razrabotka/
  • https://www.profguide.io/professions/front_end_developer.html
  • https://netology.ru/blog/frontend-skills
  • https://otus.ru/nest/post/718/
[свернуть]
Оцените статью
Понравилась статья?
Комментарии (0)
Комментариев нет, будьте первым кто его оставит

Комментарии закрыты.