Что должен уметь фронтенд-разработчик
Согласно ежегодному исследованию 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 на первое месте.
Данные 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 полноценный проект в качестве дипломной работы.
Все студенты, успешно окончившие курс, получают удостоверение о повышении квалификации установленного образца и фирменный диплом Нетологии.
P.S. Как вы считаете, какие знания жизненно необходимы фронтенд-разработчику, а какие можно осваивать по мере надобности?
- фронтенд
- фронтэнд
- фронтэнд javascript
- фронтэнд девелопмент
- фронтэнд разработка
- frontend
- front-end
- front-end разработка
- front-end development
- front-end разработчик
- front-end developer
Frontend-разработчик
- #Frontend-разработчик
Frontend-разработчик — это специалист, который занимается разработкой пользовательского интерфейса, то есть той части сайта или приложения, которую видят посетители страницы. Главная задача фронтенд разработчика — перевести готовый дизайн-макет в код так, чтобы все работало правильно.
О профессии frontend-разработчика рассказывает Александр Юдин, главный инженер Сбера по разработке.
Уровень зарплат frontend-разработчика
Зарплата зависит от сферы, профессиональных умений и опыта работы. На сайтах по поиску работы в Москве предлагают:
- от 45 тыс. до 70 тыс. рублей начинающим специалистам;
- от 90 тыс. до 200 тыс. на уровне middle (обычно от трех-пяти лет опыта);
- до 350 тыс. рублей на позиции senior.
Чем занимается frontend-разработчик в течение рабочего дня
- верстка приложения с помощью HTML/CSS;
- разработка логики компонента или приложения;
- продумывание архитектуры приложения;
- поиск и оценка решений;
- чтение документации (в том числе на английском);
- рефакторинг и оптимизация текущего функционала;
- настройка и оптимизация сборки проекта;
- верстка email;
- другие задачи.
Кроме этого, в течение дня frontend-разработчик может участвовать во встречах с дизайнерами, бэкенд-разработчиками, product manager/product owner и другими членами команды.
Что нужно знать и уметь, чтобы быть успешным в профессии фронтенд-разработчик
Хорошее знание основ HTML5, CSS, Javascript. Также желательно небольшой опыт работы с CSS препроцессорами: SCSS, Stylus, postCSS или аналоги. Работа с популярными фреймворками вроде React, Angular, Vue, Svelte будет дополнительным плюсом. Понимание REST также дополнительный плюс.
«Работая frontend-разработчиком нужно будет постоянно учиться и развиваться, общаться с коллегами и клиентами. Пригодятся и навыки критического мышления, внимательность к деталям и обостренное чувство прекрасного», — делится своим опытом Александр.
Где учатся на фронтенд-разработчика
В интернете достаточно информации для самостоятельного изучения. Есть каналы на Youtube, где бесплатно можно разобраться с основами и базовыми концепциями.
Если нет понимания, как учиться самостоятельно, можно пойти на online интенсивы — Htmlacademy, Skillbox, Geekbrains, Hexlet, learn.javascript.ru и другие. На таких курсах информация дается структурированно. Обычно на интенсиве есть проект, который позволяет разобраться в теме от самых основ до конечного продукта. Такой проект можно добавить в резюме, если вы новичок. На курсах есть преподаватели и наставники, которые помогают в реализации той или иной задачи.
Обучение в университете многие рассматривают как трату времени, но если пойти на техническую специальность, то можно получить базу для начала работы.
Карьерный рост веб-разработчика
В IT можно быстро расти по карьере. Сначала вы новичок, а через год-два вы уже можете стать middle-разработчиком.
Есть разные варианты роста:
- Первый — техническая сторона, можно расти как разработчик и решать все более сложные задачи, разбираться в узких специальностях и спецификах.
- Второй — расти в Team Lead или Архитектора. У такого специалиста появляются другие задачи, связанные с разработкой, управлением проектом и персоналом. Так можно дорасти до технического директора.
- Третий — уйти в project manager/product owner. У вас будет опыт разработки, но нужно дополнительно приобрести навыки управления командой и проектом.
Что важно знать о профессии перед трудоустройством
Чаще всего на собеседовании кроме технических умений, смотрят и на самого человека. В ходе разговора выясняют, как он впишется в команду, как общается, есть ли у него интерес к сфере. Александр говорит: «Лучше нанять новичка с горящими глазами, чем профессионала, который работает только ради денег и не развивается».
Fe разработчик что это
УРОК 1. ВВЕДЕНИЕ
Тебе предстоит решить кодовую задачу на языке Frontend. Начнём с общей информации для более лёгкого понимания, зачем и как выполнять Тестовое задание.
Что значит быть Frontend или JavaScript-разработчиком?
Frontend-разработчик — создаёт интуитивные интерфейсы и эффектные веб-сайты, используя языки вёрстки HTML и CSS. Сайты, которыми ты скорее всего пользуешься: Microsoft, Gmail, Dropbox, Facebook, WhatsApp и даже Netflix, были созданы с помощью JavaScript. Такие приложения, как Uber, Instagram, Skype, Pinterest, Facebook написаны на JavaScript.
- Стабильно занимает лидирующую позицию по данным индекса Github.
- Проекты на JavaScript есть во многих крупных IT компаниях: Google, Yandex, Сбер, EPAM, Спортмастер, TWINO, Тинькоф Банк, Wildberries и другие
- JavaScript работает во всех браузерах и поддерживается всеми платформами.
JavaScript-разработчики гипер востребованы.
Сайт hh.ru выдает 15 тыс. открытых вакансий по всей России для Frontend-разработчиков любого уровня, в том числе начинающих. Это профессия будущего. Спрос на этих специалистов год от года только растёт, сейчас это одна из самых дефицитных профессий в сфере информационных технологий (IT).
JavaScript-разработчики требуются в следующих компаниях: Сбербанк, ВТБ, EPAM, Росбанк, Ай-Теко, Тинькофф Банк, Банк Хоум Кредит, Райффайзенбанк, TWINO, Спортмастер, Банк Открытие, Wildberries и других. Здесь уже работают наши выпускники!
Fe разработчик что это
| Вернуться в блог |
РУБРИКИ БЛОГА
Разница между Front end, Back end, Full stack разработчиками
Опытного IT рекрутера точно нельзя испугать модными словечками или техническими выражениями, а вот начинающему стоит разобраться во всех тонкостях IT сферы. Узнайте, чем занимаются «front end», «back end», «full stack» разработчики, чтобы быть уверенными в том, что вы с твердыми знаниями подходите к выполняемой роли специалиста. Какие-то различия — существенные, какие-то несут в себе большое количество тонкостей, но все они позволят вам понять текущие потребности IT-индустрии.
На сегодняшний день создается все больше и больше различных веб-инструментов, программ и сервисов. Спрос на разработчиков растет с каждым днем с такой же прогрессией. В связи с этим выросла потребность в IT рекрутерах.
Сегодня мы поможем вам понять, кто такие «front end», «back end», «full stack» разработчики.
Front End разработчик
Когда вы видите наполненный жизнью сайт с привлекательным интерфейсом, вам становится интересно, кто же этот волшебник, который так профессионально с ним поработал. Именно в эту минуту вы думаете о front end разработчике, даже об этом не зная. Любое визуальное отображение, с которым вы работаете, производится потом, кровью и слезами front end разработчика. GUI или «Графический пользовательский интерфейс» — это визуальный фронт, на котором отображается экран, позволяющий клиентам взаимодействовать с программным обеспечением. Любое из сегодняшних устройств с прилагательным «умный», будет иметь интерфейс, который запускает приложения, предоставляет доступ к веб-сайтам, и все это создается разработчиком front end.
UI дизайнер или дизайнер «Пользовательского интерфейса» создает пространство, в котором происходит взаимодействие между человеком и машиной. С точки зрения мастерства, данный процесс требует от программиста сочетания навыков программирования и дизайна, и часто этот человек вовсе не должен быть программистом.
Дизайнер UX ссылается на конструктор «User Experience», в котором описывается путь, который пользователь использует, и его общая эффективность. Front end разработчики также должны думать над общим удобством использования, полезностью и опытом, которые пользователь имеет при взаимодействии с программным обеспечением и этот конкретный сегмент требует, безусловно, самых «гибких навыков» программиста. Тем не менее, эта работа может выполняться также не программистами.
Responsive design — очень трудная работа. Она относится к процессу адаптации дизайна интерфейса к любому экрану, от широкоэкранных настольных компьютеров и ноутбуков до мобильных устройств, таких как планшеты и смартфоны.
Традиционно разработчиком front end является человек, которому удобно работать как с дизайном, так и с кодированием. Другими словами, тот, кому комфортно работать с использованием простых инструментов проектирования и умеет писать структуру веб-сайта в HTML и стилизовать его с помощью CSS-кода. На данный момент самой большой проблей для front end разработчиков является то, что веб-сайт, построенный только с использованием HTML и CSS, будет полностью статическим. Если вы думаете о stickman на пустой странице в качестве веб-сайта. HTML будет достаточно, чтобы нарисовать его форму и CSS будет использоваться для его стилизации (сгустить, покрасить его, добавить одежду и т.д.). Но чтобы заставить stickman двигаться и реагировать, front end разработчику как следствие потребуется что-то еще.
По мере усложнения и совершенствования веб-приложений спрос на полный язык программирования Turing в интерфейсе растет с большой скоростью, поэтому для анимации программистов — stickman используют Java Script, который является языком программирования на стороне браузера.
Back End разработчик
В прошлом back end состоял из физического компьютера и программного обеспечения, предназначенного для запуска запросов через него. Сегодня этот процесс стал куда более сложным: облачные серверы являются более распространенными, трудоемкие базы данных и приложения микросервиса, но в принципе back end по-прежнему остается процессом объединения сервера, приложения и базы данных для решения проблемы.
Весь процесс прочно закреплен в логике, сети процессов и запросов, разрешаемых за считанные секунды, чтобы дать вам, как пользователю, определенный желаемый результат. Выберите рейс из Нью-Йорка в Гонконг и вы находитесь в зоне front end, нажмите клавишу поиска и вы перемещается в back end, чтобы правильно вернуть вам лучший, самый короткий, самый дешевый рейс в мгновение ока. Как только результаты будут отображаться для вас, вы снова будете во front end. Если поисковый запрос выдал вам своевременный и полезный результат, и вы не представляете, благодаря чему это произошло, спасибо разработчику за завершение поиска, а также бесчисленное множество других вещей, упрощающих вашу жизнь.
У back end разработчика может быть множество обязанностей. От создания базы данных и интеграции до обеспечения безопасности, а также технологий резервного копирования и восстановления, также back end разработчики создают мозг приложения.
Back end разработчики используют различные технологии для кодирования основной вычислительной логики информационных систем, конкретного программного обеспечения или веб-сайтов. Они могут включать Java, C#, Python и языки баз данных, такие как SQL и многие другие. Back end отличаются от разработчиков front end тем, что работа back end разработчика полностью лишена какого-либо визуального дизайна и основывается на логике и архитектуре программного обеспечения, целью которой является предоставление определенного результата. Иногда возникают проблемы с объединением back end и front end, что приводит нас к человеку, который может обработать обе части.
Разработчик Full Stack.
Разработчик full stack — это тот, кто хорошо работает как с бэкэнд, так и с фронтэнд. «Чтобы быть более конкретным, это означает, что разработчик может работать с базами данных, PHP, HTML, CSS, JavaScript и всем, что находится между ними, также принимая во внимание преобразование проектов Photoshop в интерфейсный код», — говорит Sitepoint.
Для разработчиков full stack необходимо общее знание технологий из каждой части процесса разработки. Это, конечно, означает, что они не будут экспертом в какой-либо конкретной области, но скорее могут предложить лучший обзор возможностей применения и возможности преодоления разрыва между тем, как функционирует система и как она выглядит и ощущается для пользователя. Возможно, это не требование дляработы, но разработчик full stack обычно также понимает бизнес-логику, пределы дизайна и пользовательский интерфейс. На ранних этапах развития бизнеса может возникнуть большая потребность в разработчиках full stack, поскольку их универсальность может быть полезна при разработке продукта, но по мере созревания компании разработчикам требуется все больше и больше конкретных навыков.
Full stack разработчик также может быть отличным техническим специалистом. Он имеет широкое понимание технологий и может предвидеть, какие будущие усилия по набору персонала должны быть или какие технологии должны быть реализованы в дальнейшем.