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

Где работает и сколько получает, карьерный рост

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

Мидл имеет более полные знания, справляется с нестандартными задачами. Может работать самостоятельно, без постоянного контроля со стороны лида. Способен участвовать в коллективной разработке кода.

Сеньор – опытный разработчик, знающий разработку проектов на различных уровнях. Senior frontend developer одна из самых высокооплачиваемых стадий вакансии frontend разработки.

Зарплата фронтенд разработчика колеблется от 40 000 рублей и практически не имеет потолка. Напрямую зависит от умений и навыков специалиста.

Средняя зарплата через год работы для juniors, которые обладают качественным portfolio колеблется от 70 000 рублей. Большинство вакансий предполагают работу из дома. Средний потолок 250 000 рублей, но при работе на фрилансе уровень верхней границы отсутствует.

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

• предприятия, создающие софт для бизнеса;
• IT-компании;
• веб-студии;
• стартапы;
• агентства аутсорсинга.

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

1. Вертикальный. Получение новой должности, стандартное продвижение по карьерной лестнице.
2. Горизонтальный. Постоянное развитие навыков, повышение от джуна до сеньора. Чем выше статус, тем выше оплата за услуги.
3. Диверсификационный. Обретение новых навыков в смежной специальности с последующей переквалификацией.

Универсальный работник, который может охватывать задачи и из других областей – наиболее востребованный специалист для компании

Поэтому важно постоянно совершенствоваться и развивать свои навыки, расти как в плане личностных качеств, так и в освоении нового софта

Чем занимаются фронтенд-разработчики

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

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

• Языки: HTML, CSS, JavaScript, всё чаще требуется TypeScript.
• Фреймворки: React, Vue или Angular. Нужно уметь работать с одним из них.
• Дополнительные инструменты: работа с внешними расширениями через NPM или Yarn, настройка сборки фронтенда (например, Webpack).

Рассмотрим типичную задачу младшего фронтенд-разработчика.

Предположим, у команды есть проект на React и TypeScript. В него нужно добавить компонент, выводящий на страницу иконку. Иконка может быть разных цветов в зависимости от ситуации, в которой она появляется:

‘primary’ — основной цвет,

‘secondary’ — вспомогательный цвет,

‘error’ — цвет в случае ошибки,

‘success’ — цвет в случае успешной операции.

Все цвета заданы в дизайн-системе. Связь названий и цветов описана в файле utils.ts. Выглядит он примерно так:

// utils.ts

type TIconTypes = 'secondary' | 'primary' | 'error' | 'success';

export type TIconProps = { type: TIconTypes, onClick?:() => void; };
export const getIconColor = (type: TIconTypes) => {

  return `${
    type === 'secondary'
      ? '#8585AD'
      : type === 'error'
      ? '#E52B1A'
      : type === 'success'
      ? '#00CCCC'
      : '#F2F2F3'
  }`;
};

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

// icon.tsx

import React from 'react';
import { getIconColor, TIconProps } from './utils';

export const Icon = ({ type }: TIconProps) => {
  return (
    <svg
      xmlns="<http://www.w3.org/2000/svg>"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill={getIconColor(type)}
    >
      <path d="/* здесь будет длинный набор чисел, описывающих svg-изображение */"/>
    </svg>
  );
};

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

Это лишь небольшой пример задачи, но он наглядно демонстрирует необходимость понимания дополнительных технологий помимо HTML, CSS и JavaScript: например, React и TypeScript. То, какие технологии потребуются на конкретном проекте, определяет стек, принятый внутри команды или компании. Его нужно либо знать, либо быть готовым быстро в него погрузиться.

Рабочие инструменты

Профессиональному повару неважно, где готовить — на маленькой кухне у друзей или в огромной кухне престижного ресторана. Если он не найдёт нож для рыбы, то порежет её обычным

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

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

Главное в работе фронтенда — понимать, как устроены и как работают технологии, чтобы применять их в проекте.

История веб-разработки: от 1990 до 2020

В 1990 году Тим Бернерс-Ли создал первый сайт и браузер в CERN — Европейском центре ядерных исследований. Выглядел он так себе, но это была настоящая революция.

Первый сайт info.cern.ch в первом браузере WorldWideWeb

Профессиональная веб-разработка началась во второй половине девяностых после выхода первого «нормального» браузера — Mosaic, технологии CSS (каскадные таблицы стилей), языка JavaScript и Flash. Примерно в это же время появился PHP — специальный язык программирования для бэкенда, который до этого писали на чём придётся: на C, C++ или Perl. Веб быстро набирал популярность, стало выгодно делать красивые и удобные сайты — и в разработке появились хорошие деньги.

Потом были браузерные войны: каждый добавлял какие-то свои возможности, а фронтенд-разработчики сходили от них с ума. Только сейчас создатели браузеров приняли более или менее единые стандарты. В бэкенде тоже многое изменилось: PHP теснят конкуренты — например, Python, Java и JavaScript с Node.js, изначально сделанной для фронтенда.

Front-end разработчик: кто это и чем он занимается

1. Верстка дизайна. На данном этапе происходит создание структуры html-кода, который вмещает в себя элементы, располагающиеся на страницах сайта (картинки, текст, кнопки и т. д.) и отображающегося в пользовательском окне браузера. Главная цель здесь – добиться того, чтобы каждый элемент дизайна был абсолютно идентичен макету. Помимо HTML здесь используется формальный язык программирования CSS.
2. Настройка функционирования кнопок, форм регистрации и обратной связи, галерей и прочего необходимого на сайте функционала. Для достижения высоких результатов Front-end должен применять готовый скрипт из библиотеки, либо создавать собственный.
3. После того как основная часть работы выполнена, он приступает к тестированию работы.
4. В дальнейшем он может давать рекомендации разработчикам касательно оптимального способа реализации той или иной функции на веб-ресурсе.

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

Disappearing Frameworks. Assess

В категорию «Исчезающие фреймворки» попадают фреймворки, выполняющую свою полезную работу на этапе компиляции, генерируя чистый JavaScript без тяжелых абстракций наподобие Virtual DOM. Такие фреймворки максимально легковесны, и их производительность на слабом железе заметно выше.

Кандидаты в эту категорию: Stencil, Svelte, Solid и Angular Elements.

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

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

Более подробно познакомиться с подходом Disappearing Frameworks можно в статье Питера О’Шонесси.

Machine learning in Frontend. Trial

ML может применяться в задачах разработки веб-интерфейсов. Благодаря библиотеке Tensorflow, которая является одной из популярных библиотек для ML и имеет версию для Node.js и браузера, мы получаем возможность машинного обучения на известном стеке. Здесь JavaScript подтверждает свою универсальность.

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

Одна из наших команд экспериментировала и сделала сервис, предсказывающий вероятность посещения следующей страницы. Затем интегрировала этот сервис в стратегию предзагрузки одного из проектов — теперь в некоторых случаях пользователь при переходе на следующую страницу увидит ее моментально, без ожидания загрузки. Мы разработали свое решение на базе Tensorflow.js. Конкретно для этой задачи существует open-source-решение от Google — Guess.js, которое на основе данных из Google Analytics делает похожее. Советуем попробовать.

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

Что такое frontend?

Фронтендом (англ. front-end) называют клиентскую сторону пользовательского интерфейса по отношению к программно-аппаратной части сервиса.

Говоря простым языком, frontend — это разработка функциональности и пользовательского интерфейса, работающих на клиентской стороне приложения или веб-сайта. Сюда относят всё, что пользователь видит, открывая веб-страницу. Для создания удобного и востребованного продукта фронтенд-разработчики сотрудничают с программистами, дизайнерами, UX-аналитиками.

Откройте страницу любого веб-сайта и вы увидите перед собой его интерфейс. А потом щёлкните правой кнопкой мыши и нажмите «Посмотреть код страницы». Этот код и будет примером фронтенда. Он описывает всё, что вы видите, начиная от вёрстки и всей палитры цветов, заканчивая шрифтами, графическими элементами и т. п.

Вот, взгляните:

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

Какие направления существуют в веб-разработке

Веб-разработку принято делить на две составляющие: фронтенд (front-end) и бэкенд (back-end).  Фронтенд-разработчики занимаются разработкой графического интерфейса — той части приложений, которую видит пользователь. Они превращают макет, созданный веб-дизайнером, в функциональный и удобный пользовательский интерфейс. Корректное отображение полей и блоков, работающие кнопки и формы для ввода данных — всё, с чем сталкивается пользователь в браузере, находится в зоне ответственности фронтендеров.

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

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

Универсальные знания, которыми должен обладать любой веб-разработчик — это Git и работа с Linux-окружением

Также ему важно понимать общие принципы работы интернета. Кроме того, есть много специфических инструментов, которые нужно освоить в зависимости от специализации, — о них мы расскажем ниже

Как стать frontend-разработчиком?

Чему учиться?

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

«В 2017 году я устроился на свою первую работу, зная лишь HTML, CSS, немного JavaScript и JQuery, — рассказывает Алексей Видякин. — Сегодня, в 2021 году, требования очень выросли, поскольку выросла конкуренция. Базовыми знаниями верстки уже никого не удивишь».

Вот примерный список требований к джуниор-специалисту в 2021 году:

Знать HTML и CSS. Под этим подразумеваются навыки кроссбраузерной и адаптивной верстки, знание популярных CSS-фреймворков, препроцессоров и HTML-шаблонизаторов.

Знать JavaScript, в частности стандарт Ecmascript 6 — спецификацию 2015 года, принесшую языку новые элементы синтаксиса и новый уровень производительности.

Иметь базовые навыки работы в консоли и пользования пакетным менеджером NPM, позволяющим быстро и удобно загружать JavaScript-библиотеки и приложения.

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

Уметь работать со сборщиком проектов (это небольшой код, определяющий последовательность действий при автоматическом запуске приложения из командной строки)

Тут важно понимание самой идеи инструмента и базовые навыки пользования. Сборщиков несколько, но самый популярный из них — gulp.js.

Базово знать один из современных фреймворков: React, Angular или Vue.js

С их помощью разработчик может минимизировать количество обращений к DOM (Document Object Model — объектная модель документа) и организовать мгновенный обмен данными с сервером через API. Вместо того чтобы по каждому клику перезагружать страницу целиком, фреймворк управляет состоянием ее отдельных компонентов, обеспечивая пользователю мгновенный отклик приложения. Подразумевается, что если человек сумел освоить один из них, то сможет достаточно быстро разобраться с другим, если возникнет необходимость. Есть довольно много вакансий, где требуется какой-то конкретный фреймворк.

Знать английский. Не факт, что от соискателя сразу потребуется обсуждать что-то со штаб-квартирой Facebook, но реакции «Тут нет документации на русском, поэтому я не смогу разобраться» тоже уже не принимаются.

Где начать работать?

Существует три основных варианта трудоустройства: фриланс, студия веб-разработки и работа на стороне заказчика.

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

«На позиции trainee (стажера) я выполнял ту работу, за которую не хотели браться более опытные сотрудники, — вспоминает Алексей. — В основном это были правки от заказчика, то есть дополнения на сайте, которые нужно просто внести по определенному шаблону, ничего не поломав при этом. Дополнительная ценность такой работы в том, что ты начинаешь понимать, как устроены реальные проекты именно в вашей студии».

Начиная работать с нуля на фрилансе, легко застрять на выполнении низкооплачиваемых примитивных задач. При этом рядом с вами не будет руководителя, заинтересованного в вашем профессиональном росте. А вот для опытного frontend-разработчика фриланс, особенно на международных биржах, может открыть много возможностей.

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

Траектории того, как приходят во frontend, разные. Читайте историю Марка Соболева, который служил в полиции, а теперь разрабатывает образовательные сервисы.

Сколько зарабатывает

Средняя заработная плата фронтенд-разработчиков со стажем работы 5 лет в России колеблется от 70 000 до 100 000 руб. В Москве стоимость этой же работы выше и доходит до 250 тыс. руб. Все зависит от опыта и умений специалиста.

В других городах ситуация следующая:

• Санкт-Петербург: 70–200 тыс. руб.;
• Екатеринбург: 50–100 тыс. руб.;
• Владивосток: 40–150 тыс. руб.;
• Краснодар: 50–150 тыс. руб.

Новички могут рассчитывать на доход до 40 000 руб. Поднимать планку можно уже через год-полтора.

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

А опытные фронтенд-разработчики могут еще увеличить сферу своей деятельности и с головой погрузиться в процесс разработки интернет-ресурса. Например, могут совмещать свою основную работу с backend-разработкой или начать разрабатывать дизайны сайтов.

Общие советы

• Не опаздывайте. Звучит очевидно, но это может повлиять на всё дальнейшее общение. Даже если это удалённое собеседование, будьте на звонке за пару минут. Если опаздываете, то обязательно предупредите.
• Внимательно изучите описание вакансии. Посмотрите на продукт компании, если он уже есть. Это поможет подготовиться к возможным вопросам и задачам по проектам компании.
• Не молчите, даже если не знаете ответ на вопрос. Можно просто смело сказать: «Я не знаю, но я предполагаю вот так…» Даже если вы ошибётесь, это нормально. Вам нужно показать свой интерес и желание разобраться.
• Не отвечайте слишком длинными фразами. В их середине можно легко потерять смысл того, что вы хотите сказать.
• Освежите в памяти теорию.
• Комментируете свои решения.
• Задавайте вопросы.
• Хорошо выспитесь накануне. Отдых куда полезнее выученной за ночь теории.

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

В ИТ специалисты делятся на старших, средних и младших (Senior, Middle, Junior).

Junior (младший)

Junior — начинающему специлисту важно спланировать продвижение по карьерной лестнице с упором на рост и обучение

• Знание HTML, пре- и постпроцессоры CSS;
• Базовый опыт программирования на JavaScript, знания vanilla.js (ECMA2016+);
• Принципы работы одного из фреймоворка React, Vue, Angular;
• Понимание паттерна MVC.

Чтобы наработать необходимый джуну багаж, требуется около года.

Middle (уверенный)

Точное определением круга обязанностей для каждого уровня меняется в зависимости от работодателя. Знания для фронтенда уровня Middle:

• Знание синтаксиса JavaScript, опыт работы и уверенные теоретические познания в программировании;
• Понимание фреймворков React и Vue;
• Знание библиотек JavaScript;
• Знание ES6, ES2015, ES7.
• Умение настроить системы Gulp или Grunt;
• Понимать RESTful интерфейсы;
• Уровень английского не ниже Upper-Intermediate.

Дополнительные навыки, связанные с серверной стороной:

• базовые знания PHP;
• опыт разработки серверного кода под Node.js и TypeScript;
• работа с тест-фреймворками Mocha, Should, Chai, Jest.

Специалист позиции «Middle» понимает, как изнутри работает используемая технология и фреймворк. На прохождение требуется 2 — 5 лет трудового стажа.

Senior (профессионал)

Стратегия продвижения на уровне senior такая же, меняется объем и сложность усваиваемого материала. Это тот человек, который способен самостоятельно заметить и исправить ошибку в коде, найти уникальные способы решения одной и той же задачи. Способен легко организовать процесс взаимодействия участников команды.

• HTML, CSS, понимание и знание препроцессоров, постпроцессоров, css-модулей, BEM;
• Знание GIT;
• Понимание работы с API, изучение webpack и gulp;
• Знание одного бэкенд языка программирования;
• Использование баз данных: документоориентированных MongoDB и реляционных PostgreSQL;
• Умение грамотно и быстро оценивать проект по времени и по сложности;
• Знания работы с UNIX и командной строкой;
• Опыт в WEB-дизайне;
• Знание языка достаточного для изучения профессиональной литературы и общения на рабочие темы.

На позиции senior открывается несколько путей развития:

• Technical Leader — предполагает больше общения с людьми, активное взаимодействие с подчиненными, происходит усовершенствование технических навыков.
• Построение процессов и менеджмент.
• Team Lead, Head of Development или технический директор. Требуются организаторские навыки, умение взаимодействовать с бизнесом. На этом этапе происходит перестройка на бизнес-ценности.

Становление веб-разработчика — процесс постепенный. Начинайте с малого и каждый освоенный навык будет очередным шагом к конечной цели.

Фронт + бэк = фулстэк

Если в двух словах, то фронтенд (Front-end) — это сцена, бэкенд (Back-end) — закулисье, а фулстек (Full Stack) — их совокупность, то есть вся подготовительная работа к спектаклю и сам спектакль.

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

• Превращает макет дизайнера в код. Щелкните правой кнопкой мыши прямо сейчас, выберите «Исходный код страницы» — его написал фронтендер.

• Оживляет дизайн с помощью интерактивных элементов, например, онлайн-калькулятора на строительном сайте.

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

• Готовит данные к отправке на сервер или в сторонние приложения.

Иногда этого специалиста путают с верстальщиком, но последний занимается только версткой по макету (см. первый пункт в списке выше), функционал фронтендера шире. Он также должен иметь представление об особенностях UI/UX-дизайна и бэкенда — программно-аппаратной части сайта.

Бэкенд-разработчик отвечает за то, что скрыто от глаз пользователя, происходит вне его компьютера или другого устройства. Например, когда вы вводите запрос в поисковой строке Google или Яндекс, вы имеете дело с фронтендом, как только вы нажимаете Enter, в игру вступает бэкенд. Запрос уходит на сервер поисковика, распознается там и возвращается в виде понятного ответа. В выдаче появляется список сайтов — это снова фронтенд.

Коды для фронта и бэка пишутся на разных языках. Для первого наиболее актуальны HTML, CSS, JavaScript, для второго — Ruby, PHP, Python, Java.

Фулстэк-разработчик владеет сразу несколькими языками, отвечает и за «темную» серверную сторону, и за «светлую» пользовательскую. Иногда он также обладает компетенциями UI/UX-дизайнера. В общем, универсал.

И что в итоге?

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

Вывод прост: современная разработка — это многоуровневый и сложный процесс, который можно разделить на клиентскую и серверную части. А в арсенале frontend- и backend-разработчиков есть множество инструментов. Окончательный выбор средств веб-разработки зависит от сложности проекта и поставленных задач.

Ну и, разумеется, последняя картинка, которая позволит вам окончательно понять разницу между frontend и backend. И улыбнуться при этом))

Кстати, если хотите узнать о том, как происходит взаимодействие между фронтендом и бэкендом, вам сюда.