Кто такой фронтенд-разработчик
Согласно ежегодному исследованию 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 полноценный проект в качестве дипломной работы.
Все студенты, успешно окончившие курс, получают удостоверение о повышении квалификации установленного образца и фирменный диплом «Нетологии».
P.S. Как вы считаете, какие знания жизненно необходимы фронтенд-разработчику, а какие можно осваивать по мере надобности?
Комментарии (34)
VolCh
25.04.2017 13:55Большинство начинающих айтишников отсеиваются на этапе «хочу стать программистом и получать зарплату в долларах, но не думал, что придется так много учиться». Уникальность программирования и вообще любой айтишной специальности в постоянном самообучении.
Всегда вспоминается
— Ну, а здесь, знаешь ли, приходится бежать со всех ног, чтобы только остаться на том же месте, а чтобы попасть в другое место, нужно бежать вдвое быстрее.
А по теме: что должен уметь фронтенд-разработчик сильно зависит от проекта и команды. В большой команде из узких специалистов, закрывающих все потребности проекта, да ещё с командами админов и тестеров рядом, фронтендеру возможно не придётся ничем заниматься кроме написания клиентского кода на JS или компилируемого в него языке.
Кстати, о тестерах: современный фронтендер должен не просто иметь представление о тестировании, но и обладать практическими навіками юнит-тестирования, как минимум. Мокко, Жасмин и т. п. должны быть его обычными инструментами.
bertmsk
25.04.2017 14:32-5> но и обладать практическими навіками юнит-тестирования, как минимум. Мокко, Жасмин
Не путайте фронтенд и бекенд. Даже используя Селениум это боль и страдание, а не юнит-тестирование.
Юнит тестирование во фронтенде, вообще говоря, невозможно. Поскольку FE оперирует другими абстракциями — это не к библиотеке тесты писать.
AstarothAst
25.04.2017 14:51Вы спутали юнит и функциональные тесты. Селениум и иже с ним это, как раз, функциональное тестирование. Мокка и Жасмин — юнит. Функциональное тестирование фронта — это, да, боль и страдание. Юнит не более обременительно, чем в любых других языках, поскольку тестирует работу отдельных частей кода, а не всего приложения в целом. В случае js юнит-тестирование даже облегчено, так как нет private и прочих protected, так что можно добиться чуть ли не 100% покрытия.
Suvitruf
25.04.2017 14:01+2Итак, какие технологии должен освоить фронтенд-разработчик:
Как говорится, начали за здравие, а кончили…
Понимать принципы построения бекэнда и разбираться в серверных технологиях (Node.js, PHP, Ruby, .NET и т. д.)
Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и т. д.)
В итоге сами же смешали Front-end и Full stack разработчиков.
AstarothAst
25.04.2017 14:03+6Я правильно понял, что вся эта довольно пространная статья затевалась ровно ради ссылки на " программу подготовки фронтенд-специалистов — «Профессию front-end разработчик»" в конце?
Aingis
25.04.2017 17:49М-да, списочек явно от балды.
Итак, какие технологии должен освоить фронтенд-разработчик:
- HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills)
Спецификации знать надо, хотя бы базовые, и хорошо бы уметь в них ориентироваться. А вот сетки и фреймворки нужны только тем, кто не умеет верстать или делает быстрые прототипы «тяп-ляп и в продакшен». Полифиллы CSS? Серьёзно?
- Препроцессоры CSS (Sass, Less, Stylus и т. д.)
Практически не нужны, особенно с последними новинками CSS (и, возможно, немножко PostCSS). См. доклад про ванильный CSS. Если уметь в программирование, разобраться не проблема. Важность на порядок меньше предыдущего пункта. Лучше настроить Emmet.
- JavaScript
Само собой.
- Популярные фреймворки и библиотеки: jQuery, Angular.JS, React.JS, Backbone.js и т. д.)
Про фреймворки желательно иметь представление, но, как говорится, если уметь программировать и знать javascript, любой фреймворк изучается по ходу дела.
- OOCSS / BEM / SMACSS
Интересно, кто-то встречал в наших реалиях что-либо кроме BEM?
- SVG
- DOM
Да.
- HTML5 API
В HTML5 много разных API, но реально в большинстве случаев используется лишь небольшая часть. Хорошо бы иметь представление, но опять же важность на порядок ниже знания DOM и прочего.
- ECMAScript 6
Действительно, пора изучить тем, кто ещё не успел.
- Популярные CMS (WordPress, Drupal, Joomla и т.д.)
Не нужно для любой приличной разработки. Надо разве что разработкам низшего звена.
- Понимать принципы построения бекэнда и разбираться в серверных технологиях (Node.js, PHP, Ruby, .NET и т. д.)
Можно, но скорее для общего кругозора или карьеры фулл-стека. Разве что хорошо бы знать что-то про Node.js, на котором работают многие инструменты.
- Инструменты дебаггинга (Chrome Dev Tools, Firebug и прочие)
Желательно, но с практикой (которая неизбежна при обучении) освоится по ходу дела.
- JavaScript транспайлеры (Babel)
Непонятно, что тут вообще надо знать. ES6 уже был, с настройкой справиться не сложно, и поэтому даже не факт что понадобиться (всё уже будет настроено). Webpack и то смотрелся бы логичнее.
- Инструменты контроля версий (Git, GitHub, CVS и т. д.)
Довольно важный пункт по сравнению с некоторыми другими, но тоже не критичный.
- Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и т. д.)
Очень специфичное требование, понадобиться может только для серверной разработке на Node.js, да и то, если нет бэкенда.
- Графические редакторы (Photoshop, Illustrator и т. д.)
Можно, но нужно далеко не везде, и есть инструменты позволяющие обходиться без них.
В чем должен разбираться:
- принципы SEO-оптимизации.
SEO — это отдельная тема, но в принципе достаточно знания HTML. За всю мою десятилетнюю карьеру у меня была ровно одна задача, непосредственно связанная с SEO. Надо было просто прикрутить схему.
По факту, главное что нужно — знать основные технологии и уметь разрабатывать. Это значит разбираться в технологиях, уметь разбираться в коде, генерировать решения и успешно их реализовывать. Для этого нужен определённый кругозор, открытость к изучению нового, желателен некоторый логический и математический аппарат и уметь «компилировать в голове».
blognetology
26.04.2017 16:53Спасибо за обстоятельный и конструктивный комментарий! Действительно, в статье приведен «идеальный» стек навыков, и не все из них, понятное дело, надо изучать досконально. С некоторыми из технологий и инструментов вполне достаточно просто ознакомиться. Мы за широкий кругозор у разработчиков :)
DDroll
03.05.2017 02:49+1Бестолковый комментарий. После «сетки нужны тем, кто не умеет верстать» можно было бы дальше не читать, но там еще много подобного. Типичный комментарий от человека, пришедшего во фронтенд без верстки, сапожники без сапог.
IT_Hound
04.05.2017 10:47+1А вот сетки и фреймворки нужны только тем, кто не умеет верстать или делает быстрые прототипы «тяп-ляп и в продакшен».
Сетки и фреймворки нужны чтобы не делать рутинную работу втрое дольше по времени. По вашему тот-же Twitter Bootstrap бесполезен, и на нем верстают только кривые верстальщики?
sshikov
25.04.2017 21:25А набор самых популярных фреймворков и библиотек выглядит следующим образом:
А дальше фигурируют Hadoop и Spark, чисто для примера. Что снижает доверие к автору, приводящему эти данные, почти до нуля.
blognetology
26.04.2017 17:02Спасибо, что обратили внимание. Мы забыли упомянуть, что к статье и теме фронтенда относятся не все технологии с приведенного скрина. Сейчас поправим. По поводу источника данных — это из отчета StackOverflow, в оригинале график называется «Frameworks, Libraries and Other Technologies». А почему вам не понравились именно Hadoop и Spark?
sshikov
26.04.2017 17:35+1Проблема в том, что они никакого отношения к фронтенду не имеют. То есть ни малейшего. То что кто-то знает эти технологии и занимается фронтендом — чистое совпадение. С тем же успехом можно сюда включать SQL, знание Windows/Linux, и так далее.
monochromer
26.04.2017 07:16Откуда пошли фразы типа «умеет в JavaScript»? «Знает JavaScript» звучит как-то правильнее.
sv_kozlov
26.04.2017 16:35+1Такая мода последние 2-3 года в IT кругах. Плохая калька с английского + наплевательское отношение к русскому языку. Часто встречаю в статьях, чуть реже в презентациях и в выступлениях.
Наверное, думают, что это как-то подчеркивает их «профессионализм». Лучше бы выучили как -тся/-ться пишется и когда ставится мягкий знак после ч|ш.
Free_ze
26.04.2017 18:10Тут все как обычно: пошло от старого мема про Polandball: «Poland cannot into space» — «Польша не может в космос». Ему уже 5 лет.
wertex15
26.04.2017 07:16"Смешались в кучу кони, люди." Если frontend разработчик буде знать все что здесь указано, да еще и развиваться… То всех остальных разработчиков можно увольнять. Зачем их держать, если он и нарисует и сверстает и backend сделает.
daemonhk
26.04.2017 12:17Хм… У меня вопрос: какого хр*на верстальщик (а фронтенд разработчик это именно верстальщик и никак иначе) должен знать SQL и серверную сторону?
VolCh
26.04.2017 12:22а фронтенд разработчик это именно верстальщик и никак иначе
У нас это две разные позиции, фронтендер пишет JS во взаимодействии с версталщиком и бэкендером.
должен знать SQL и серверную сторону
Ну не то, что должен, но базовые знания — это плюс. Может открыть код сервера и посмотреть, например, что отдаёт ему или ждёт от него вызов API, с которым его нужно реализовать взаимодействие. Ну и локально может поправить где-то, типа моков/стабов себе сделать для отладки
Free_ze
26.04.2017 16:04Не у всех есть деньги на отдельного верстальщика. А то, что фронтенд — это все то, что выполняется на клиентском компьютере, очевидно из этимологии.
AIxray
26.04.2017 15:24Как всегда участники не объективны(досконально), и не забывайте былой специалист на след. день попросту может иначе мыслить, грубо говоря всё измениться.
ZoomLS
26.04.2017 22:50>>Что должен уметь фронтенд-разработчик
И получился фуллстек. Причём, вам и node.js/express подавай и всякие CMS на php.
Особенно это доставило:
>>Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и т. д.)
Просто шикарно. Прямо так и вижу, человек сверстал шаблон и в базу данных полез запросы делать.
Явно напрашивается — ещё должен уметь дизайн рисовать! А почему нет? С таким то списком обязанностей. Дизайн будет совсем не лишним! Золотой работник! И на зарплате можно сэкономить. Платить одну зарплату за пятерых. Мечта галер.
AlexPershin
27.04.2017 14:49+2HTML и CSS лучше начинать изучать на каком-нибудь интерактивном курсе. Из русскоязычных – HTML Academy
После такого курса уже можно записаться на более серьёзную платную программу, если вёрстка понравится.
sidredin
03.05.2017 02:48Здравствуйте, друзья! Я — новичок в вебразработке. У меня вопрос: чем должен заниматься бэкенд-программист? Я думал, PHP, MySQL — это его сфера деятельности.
JSmitty
03.05.2017 09:26Инструменты контроля версий (Git, GitHub, CVS и т. д.)
Родные вы наши, CVS давно уже умер. «GitHub» вообще не инструмент контроля версий. По этому пункту — местами жив еще SVN; как «интерфейс» к репозиториям (и место хранения) используют Github, Bitbucket.
И еще, любой современный разработчик обязан использовать хоть какую нормальную среду — будь то Vim / VS code / Sublime с плагинами, или Webstorm / eclipse-производные. И обязан использовать ее эффективно. В комментариях минимум Emmet уже упоминали.
spendlively
Ох уж мне эти «примерные пути начинающего фронтенд-разработчика»
spendlively
Меня вообще всегда поражают эти списки, которые кто-то должен освоить. А С# программист сначала должен освоить C++, а перед этим Си, Ассемблер, написание драйверов и модулей ядра, программирование микроконтроллеров, сетевое программирование на всех уровнях OSI, машинные коды, схемотехнику, электронику, ТОЭ, иметь ученую степень по физике и математике, знать сто фреймворков, 200 архитектур, 300 паттернов проектирования и 400 алгоритмов, а еще посадить дерево, построить сына и вырастить дом. Разработчик НИКОМУ НИЧЕГО НЕ ДОЛЖЕН, его либо берут на работу, либо не берут. А он в свою очередь либо справляется с поставленной задачей, либо нет. Простите, накипело.
kostus1974
не с той стороны смотрите. надо думать так:
в 99% случаев _хороший_ программист проходит путь от изучения спектрума (условно), от чтения тематических журналов, через написание малюсеньких программ в школе, через хотя бы поверхностное изучение основ работы компьютеров, процессоров, через «вау, как я могу!» от написания своей первой программы на c под winapi (тоже условно) до работы в самых разных компаниях, но чтобы обязательно, оглядываясь назад, кружилась немного голова от былой наивности и даже глупости (по собственной же оценке).
отличные программисты знают ещё и математику.
но это едва ли не пятая часть всех программистов. остальные — просто «компьютерщики», почему-то решившие, что они программисты. так что не расстраивайтесь — ничего вы не должны ))