Что должен уметь фронтенд-разработчик
Редактор Нетологии Светлана Шаповалова разбирается в том, кто такой фронтенд-разработчик, что он должен уметь (или не должен) и за что ему платят прекрасную зарплату (или не очень).
Кто такой фронтенд-разработчик
Согласно ежегодному исследованию 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.
Еще крайне желательно знать английский язык, чтобы не переводить спецификацию в Гугл-переводчике, уметь работать в команде, иногда мультиязычной, разбираться в веб-шрифтах, ну и понимать тестировщиков и сам процесс тестирования.
Итак, какие технологии должен освоить фронтенд-разработчик:
Что говорит статистика
Какие технологии и инструменты чаще всего используют фронтенд-разработчики? Во-первых, трудно представить фронтендщика, не умеющего в JavaScript. Это подтверждают опросы:
Данные StackOverflow
Если сгруппировать самые популярные инструменты в стеки, то получим такую ситуацию:
Данные StackOverflow
А набор самых популярных фреймворков и библиотек всех разработчиков выглядит следующим образом (см. иллюстрацию). Приятно видеть среди этого списка инструменты фронтенда:
Данные StackOverflow
Карьерный путь и зарплата фронтенд-разработчика
Карьерный путь фронтендера обычно начинается с верстальщика — это самый логичный и общепринятый вариант. Сначала изучается связка HTML+CSS, затем на нее «наслаиваются» знания JavaScript, библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем все это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов UI/UX-дизайна.
Бывают и иные варианты. Если начинающий программист изначально знает, в какой сфере планирует развиваться, ничто не мешает ему изучать ключевой стек технологий сразу, а не по частям. Все зависит от целей и времени, которыми располагает будущий фронтендщик. Любой вариант приемлем, лишь бы на выходе получился толковый специалист.
У готового фронтенд-разработчика в целом есть три основных варианта развития:
Какой из них выбрать — зависит лишь от самого специалиста и его пожеланий/навыков.
Касаемо зарплат фронтенд-разработчиков: здесь, как и во всей 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-разработчик: что должен уметь, как освоить профессию
Frontend-разработчик – быстро развивающаяся, востребованная профессия, которая имеет дело с веб-интерфейсом. Взаимодействие пользователя с сайтом – удобство серфинга, продуманное расположение кнопок и решение множества других задач – всё это заслуги фронтендеров.
Многие путают фронтенд с верстальщиками, так как сфера деятельности у этих профессий смежная. Если говорить вкратце, frontend-разработчик – это универсальный солдат, верстальщик – боец спецназначения с узкой специализацией. О том, что собой представляет эта профессия, что должен уметь frontend-разработчик, как и где можно обучиться этому делу – вы узнаете из нашего материала.
Что собой представляем профессия frontend-разработчика
Внешне может показаться, что веб-интерфейс теряет былую популярность как среди пользователей, так и среди разработчиков. Мобильные приложения и IoT, напротив, находятся на пике развития. Но это не совсем так. Давайте задумаемся, сколько сайтов мы посещаем со смартфонов или планшетов в течение недели.
А какие мобильные приложения установлены на гаджетах? Большинство используют мобильные приложения для общения в мессенджерах и социальных сетях, устанавливают планировщики или онлайн-банки, игры и т.д. Все остальные ресурсы, будь то новости или поиск необходимой информации, чаще всего просматривают в браузере, в полных или мобильных версиях. Значит, о вымирании веба пока речи не идет.
Профессия frontend-разработчика
Сегодня широкое распространение получили так называемые PWA (Progressive Web Apps). Этот тренд получил развитие в начале 2019-2020 гг. и, скорее всего, сохранит позиции до 2025 г. Многие видят за PWA будущее мобильного веба. Говоря простыми словами, PWA — это не что иное, как мобильный сайт здорового человека. Автором термина стал Алекс Рассел, создатель этой концепции. Он говорил так: «Progressive Web Apps are just websites that took all the right vitamins.» («PWA это всего лишь сайт, который принимает все необходимые витамины»).
Пользователь PWA получает дополнительные возможности в эксплуатации гаджета, которые связывают с нативным мобильным приложением. Так, при втором заходе, можно получить мгновенную загрузку, для быстрого входа установить на экране значок сайта, настроить получение уведомлений, работать в удобном полноэкранном режиме, отказавшись от навигации браузера и т. д.
Все сводится к тому, что при любом бэкенде сайта, должна быть его «морда» и функционирование. И за все это отвечают фронтенд-разработчики. В их ответственности разработка внешнего интерфейса сайта, то есть того, как бэкенд и внешний дизайн взаимодействуют с конечными пользователями. Ведь каждый сайт — это не просто интернет-страница. Это огромный труд, который включает в себя: разработку дизайна, выстраивание логики работы, СУБД, разного рода прослойки и т. д.
Зона ответственности фронтендера — логичное функционирование всех компонентов сайта: изображение, кнопки, навигация, внутренние ссылки, контент. Именно фронтендеры создают первичную структуру, выявляют требования пользователей (заказчиков), полностью отвечают за клиентскую сторону пользовательского интерфейса.
Не нужно путать с бэкендерами. В их зоне компетенции программно-аппаратная часть и то, как программы взаимодействуют с железом. А вот фронтендеры имеют дело со сложной «аппаратной частью» — органами слуха, зрения и обоняния простых людей, которым предстоит пользоваться сайтом. Их задача сделать так, чтобы пользоваться интернет-ресурсом было удобно, понятно и логично. И если фронтендер где-то допускает ошибку, то это сразу заметно.
Что делает frontend-разработчик
StackOverflow ежегодно проводит исследования, согласно которым самой популярной профессией среди пользователей сервиса является Web developer, к которой относятся все фронтенд-разработчики.
Ваш Путь в IT начинается здесь
Так, при посещении одного из популярных сайтов по поиску работы, например hh.ru, можно подумать, что фронтенд-разработчик — это специалист-хамелеон.
Отметим тот факт, что названия вакансий сильно перепутаны: можно увидеть такую формулировку как «frontend-developer», и «frontend-разработчик», «web-developer». Более того, нередко встречаются вакансии с желанием найти «веб-верстальщика» с требованиями под фулстак-разработчика. Что это вообще такое?
Получается довольно большой список навыков и умений с требованием понимания принципов UI/UX-проектирования, адаптивной и отзывчивой верстки, кросс-браузерности и кросс-платформенности, а часто и навыков разработки мобильных приложений.
Любой frontend-разработчик имеет дело с контроллером версий (Git, GitHub, CVS и т. д.), умеет пользоваться графическими редакторами, «играет» с шаблонами разных CMS.
К тому же такой специалист обязан владеть английским, чтобы не тратить время на переводы, должен иметь навыки командной работы, ориентироваться в веб-шрифтах, быть на одной волне с тестировщиками.
Мы в GeekBrains каждый день обучаем людей новым профессиям и точно знаем, с какими трудностями они сталкиваются. Вместе с экспертами по построению карьеры поможем определиться с новой профессией, узнать, с чего начать, и преодолеть страх изменений.
Карьерная мастерская это:
Уже 50 000 человек прошли мастерскую и сделали шаг к новой профессии!
Запишитесь на бесплатный курс и станьте ближе к новой карьере:
Зарегистрироваться и получить подарки
В каких областях иметь компетенции:
Места работы для frontend-разработчика
Frontend-разработчики требуются везде, где нужно разработать сайт, приложение или любую другую программу с интерфейсом. Владения языком JavaScript (основа для фронтенд-разработчика) не подразумевает работу только в качества программиста. Знание языка необходимо и при создании десктопных приложений, офисных пакетов Microsoft и OpenOffice или приложений Adobe. Более того знание JavaScript необходимо при программировании оборудования и бытовой техники (терминалов, ТВ приставок, роутеров и т. д.).
Fronted-разработчик может работать в студии веб-разработки, но это не единственный вариант трудоустройства. Есть еще несколько вариантов.
IT-департаменты в крупных компаниях. Каждый день над совершенствованием своих сервисов работают маркетплейсы и ритейлеры, операторы сотовой связи, банки и соцмальные сети, стриминговые платформы. Более того, тренды во frontend-разработке появляются как раз при совершенствовании внутренних сервисов указанных компаний.
Места работы для frontend-разработчика
Разработчики корпоративных программ. Здесь задачей фронтенд-разработчика становится создание сервисов управления проектами, CRM и другие веб-приложения для ведения бизнеса. Интерфейс такого софта довольно сложен, ему требуется регулярная поддержка и обновление.
Государственные компании. Городские и информационные порталы, сервисы «Госуслуги», «Налог.ру», постоянно растут и совершенствуются, в связи с чем появляется необходимость в привлечении таких специалистов.
Зарплата и карьера frontend-разработчика
Часто начинающий frontend-разработчик строит карьеру с должности верстальщика, что считается самым простым и логичным вариантом. Он должен получить опыт работы в связке HTML+CSS, а затем освоить знания JavaScript, библиотек и фреймворков. Junior frontend-разработчик обязан разбираться в ключевых понятиях построения серверной части, владеть навыками использования инструментов, необходимых для ключевой специализации.
Но можно пойти другим путем. Начинающему специалисту достаточно определиться со сферой карьерного развития и сразу начать изучение ключевого стека технологий, без деления на части. Конечно, многое зависит от целеустремленности будущего фронтенд-разработчика и наличия свободного времени. Оба варианта развития хороши. Главное, чтобы на выходе получился профессионал.
Фронтенд-разработчик может расти в трех вариантах:
Опыт фронтенд-разработчика может стать хорошим трамплином в будущее, даже если через несколько лет практики захочется иного развития и освоения других горизонтов. Можно заняться изучением внутреннего устройства веб-порталов и стать фулстек-девелопером, специалистом, который может закрыть собой работу на любом из участков проекта (от создания интерфейсов до организации баз данных или руководства проектами).
Для реализации подобного плана понадобится освоение бэкенд-языков — например, Python, наиболее подходящий для новичков. Имея опыт в реализации сайтов, вам будет легче понимать, как устроены веб-ресурсы и за какой этап работы отвечает тот или иной специалист. Крупные работодатели нанимают фулстек-разработчиков именно ради навыка стратегического видения внутреннего устройства интернет-проектов.
Все возможные варианты карьерного развития фронтенд-разработчика наглядно продемонстрировал Сервис PayScale:
Сервис PayScale
Только от специалиста и его пожеланий /профессиональных качеств зависит дальнейший путь.
Что касается зарплатных ожиданий, то тут нет единого стандарта оплаты, но это характерно для всей IT индустрии. Оплата услуг фронтендера зависит как от профессиональных навыков, так и от умения себя преподать и продать. В некоторых случаях помогает везение.
Что интересно, frontend-разработчик в США зарабатывает в год больше, чем тот же специалист в России. Но всегда можно устроиться в филиал иностранной компании, тогда разница вам не страшна.
Если сравнивать с другими профессиональными областями, то на одну вакансию обычно приходится 6 активных резюме. На часть должностей, например (юрист, журналист, секретарь и т. д.) приходится от 7 до 10 резюме, что говорит о повышенной конкуренции. Другими словами, найти работу фронтенд-разработчику легче, чем другим специалистам на рынке.
Как стать frontend-разработчиком
В первую очередь нужно настроиться на то, что придется долго учиться. Часть начинающих айтишников не готовы к тому, что нужно получить так много знаний и отсеиваются сразу. Ведь многие надеялись только на звание программиста и зарплату в долларах, без усилий со своей стороны.
Профессия фронтенд-разработчика, как и любая, связанная со сферой IT, предполагает постоянное самообучение. Но в этом как сложность профессии, так и ее прелесть. Если вас это не останавливает, значит, шансы стать хорошим специалистом точно есть.
Новичкам следует освоить HTML и CSS на уровне идеальной верстки PSD-макетов. Важно на том же этапе овладеть текстовыми и графическими редакторами, освоить принципы дизайна.
Второй этап развития frontend разработчика — изучение языков программирования, таких как JavaScript, а именно: синтаксис, архитектура и возможности языка. Будущему фронтендеру предстоит изучить популярные фреймворки и библиотеки, полюбить системы контроля версий и какой-нибудь из популярных таскраннеров.
Неплохо было бы изучить препроцессоры и фреймворки CSS, разобраться в серверных технологиях. Ну а дальше предстоит лишь оттачивать навыки, что, не будем скрывать, нужно делать бесконечно, даже если ваш уровень позволяет делать это под свежие коктейли на Бали.
Большинство фронтенд-разработчиков проголосовали в первую очередь за онлайн-курсы, почти 64,7 % голосов. Далее идет самообучения по книгам и видео, курсы офлайн, опенсорс-разработка.
Личные качества хорошего frontend-разработчика
Честно говоря, несложно стать фронтенд-разработчиком. А вот построить карьеру и стать профессионалом, которого ценят совсем непросто. Освоение языков программирования и знание фреймворков еще не гарантирует проторенный путь к славе. На пути к успеху нужно будет проявить и свои лучшие личностные стороны:
Важно с каждым из них быть на связи, уточнять моменты из их зоны ответственности, отвечать на вопросы. Важно научиться не только общаться устно, но и уметь выражать свои мысли письменно. Ведь без этих навыков даже самую простую техническую документацию составить не получится.
Или же пользователи начнут просто уходить с сайта без целевого действия и придется разбираться почему так произошло. Фронтенд-разработчик должен научиться быстро решать возникающие проблемы, а еще лучше — предотвращать их. Такой специалист всегда будет иметь в работе интересные проекты и хорошую зарплату.
Перспективы профессии frontend-разработчика
Профессия фронтенд-разработчика в 2021 г. довольно перспективна. Оплата тоже неплохая. Каждый день на порталах по поиску работы появляются новые вакансии.
Однако есть мнение, что в скором времени профессия утратит популярность. Это связано с развитием конструкторов вроде Tilda, Wix, Nethouse и т. д. С помощью готовых шаблонов на этих платформах можно собрать полноценный сайт и бесплатно разместить его на субдомене, даже не владея навыками программирования. Конструкторы расширяют набор как бесплатных, так и платных функций.
Перспективы профессии frontend-разработчика
Закономерно встает вопрос, а нужен ли разработчик, если можно самостоятельно и бесплатно собрать сайт на основе готовых шаблонов.
Но надо признать, что ни один сайт, созданный на конструкторе, не сравнится с профессиональным уникальным проектом, ни по дизайну, ни по стилю, ни по удобству пользования. Не зря ведь на биржах фриланса так много заказов по переносу сайта с конструктора на движок. Более того, некоторым конструкторам уже более 15 лет, а в востребованности разработчиков сомневаться не приходится.
Но даже и в том случае, когда конструкторы получат колоссальное развитие и начнут удовлетворять личные требования заказчиков, спрос на фронтенд-разработчиков не снизится.
Ведь со временем появляются новые технологии, которые необходимо адаптировать под пользователя. Например, каких-то 15 лет назад о мобильной разработке мало кто слышал. Если бы в то время бизнесмену сказали, что можно отследить статистику посещений интернет-магазина, нажав две кнопки в телефоне, он бы только посмеялся.
А сегодня — это наша реальность. За прошедшие 15 лет индустрия мобильных приложений перешла на мировой уровень. Люди используют каждый день тысячи сервисов со смартфона.
Будет ли что-то новое в следующие 10 лет? Безусловно!
Вот поэтому фронтенд-разработчики могут не беспокоиться, что в ближайшее время их заменят роботы. Более того, нужно радоваться, так как с помощью роботов можно автоматизировать самую нудную и неинтересную работу в пользу решения сложных задач.
Перспективы развития у фронтенд-разработчика весьма радужные. Это одна из самых востребованных областей программирования, но от специалиста требуется постоянная работа над развитием личностных и профессиональных навыков. Свежие знания и навыки в области технологического прогресса —то, что должен знать каждый frontend-разработчик.
Обучение профессии frontend-разработчика в GeekBrains
Для кого разработан курс?
Как построен обучающий процесс?
Живое общение с экспертами-практиками. Курс состоит на 80 % из вебинаров с преподавателями: можно задать актуальные вопросы и сразу получить обратную связь. Будет обязательная запись занятий. К ним можно вернуться в любое время.
Много практики. Практические задания после каждого теоретического урока. Вы получите обратную связь от преподавателя с указанием ошибок и вариантами их исправления.
Поддержка наставника. К каждому ученику прикреплен наставник или куратор. Его задача — помогать с домашними заданиями. С поддержкой наставника усвоить материал получиться гораздо быстрее и эффективнее.
Обучение даст необходимую базу, которая поможет быстро стартовать в профессии и построить карьеру. Для вас подготовлена современная программа обучения, 2-3 вебинара в неделю и стажировка в течение 2 месяцев.
