Front End или Back End или Full Stack Developer
Существуют разные области веб-разработки, и разработчики, работающие в каждой из них, имеют уникальные обязанности.
Веб-разработчиков серверной части больше интересует та часть веб-сайта, которую пользователь не видит. Они — мозг операции. Коды, которые они пишут, могут использоваться для обработки платежей на сайте или определения контента, который пользователь видит при открытии страницы. Для этого они используют языки программирования, такие как Python, Ruby и PHP, для создания приложения.
Разработчики полного стека — это то, что вы бы назвали «мастером на все руки» разработчиками или специалистами широкого профиля. Как следует из названия, у них есть опыт и знания с обеих сторон веб-сайта.
Веб-разработчики полного стека имеют решающее значение для любого веб-проекта. Они помогают преодолеть разрыв между клиентской и серверной частью веб-сайта. Это влечёт за собой обеспечение функциональности и эстетичности сайта. Естественно, они владеют как клиентскими инструментами, такими как JavaScript, так и серверными технологиями, такими как PHP и Ruby.
Компании, в которые стоит и не стоит идти начинающему разработчику
Разумеется, это личное субъективное мнение.
Разработчик без опыта работы может претендовать на зарплату от 70 до 120 тысяч рублей
Однако лично знаю девушку, которая вышла на свою первую работу frontend-разработчиком на 160 тысяч, но это скорее исключение из правил. Важно понимать, что уже через год ваша зарплата может быть больше в два раза
В начале поиска работы важно знать, что компании бывают нескольких типов. Выделим два основных: это продуктовые и аутсорсинговые
Велик шанс, что специалиста начального уровня предложат другой компании на позицию, намного превышающую его грейд, т. к. компания стремится больше заработать.
Я бы рекомендовал для первой работы искать продуктовую компанию с командой, которая бы вкладывала в обучение своих коллег. Аутсорс на ранних этапах может быть не лучшим выбором, поскольку будет тяжело работать на позиции, превышающей ваш грейд.
Сколько длится обучение
На срок обучения влияют разные условия, в том числе формат и уровень подготовки. Видеокурс в записи рассчитан минимум на 5-6 недель, но при желании вы можете пройти его быстрее. В некоторых школах доступ к новому уроку предоставляют сразу же после выполнения домашнего задания. Вы не успеете стать профессиональным frontend-разработчиком за месяц, но изучите основы HTML, CSS и Javascript, если будете заниматься по 3-4 раза в неделю.
Вводный экспресс-курс рассчитан на 2-3 месяца, полноценная программа с изучением базового стека технологий и практикой длится не менее 9-12 месяцев.
Обучение до уровня PRO длится около 2 лет – такой долгий период требуется, чтобы выучить не только JS, но и его фреймворки.
Как стать frontend-разработчиком с нуля
Должность верстальщика – первая ступень на пути к должности фронтенд-разработчика. Это самый распространенный вариант.
Но есть и другие пути – когда программист в начале своей карьеры знает, в какой области IT-сферы он хочет развиваться. Тогда начинающий специалист целенаправленно обучается ключевым навыкам, необходимым для выбранной профессии.
Какой бы вы путь ни выбрали, для начала составьте список техник, сервисов и инструментов, которые вам необходимо изучить для совершенствования.
Чтобы стать frontend-разработчиком с нуля, первым делом познакомьтесь с HTML-кодом и возьмитесь за изучение CSS.
Затем перейдите к главному инструменту фронтенд-специалиста – JavaScript. Вникните в суть работы с фреймворками и системами контроля версий. Разберитесь в серверных технологиях. Основы веб-дизайна, текстовые и графические редакторы станут для вас плюсом во время поиска работы.
А дальше оттачивайте свои навыки, пополняйте знания.
Можно заниматься саморазвитием, читать тематическую литературу. Список книг по frontend-разработке есть на нашем блоге.
Более быстрый способ узнать все тонкости профессии – обзавестись наставником. Найти его можно на онлайн-курсах.
Где учиться
Все курсы, перечисленные в блоке ниже, направлены на введение в профессию frontend-developer. Опытные преподаватели дадут комплексные знания о том, какими технологиями необходимо владеть любому специалисту в этой области. Ученики научатся верстать веб-ресурсы, создавать интерфейсы и соберут внушительное портфолио.
По завершении обучения вам выдадут сертификат и помогут составить резюме.
Обучение проходит в онлайн-формате, и ученики могут заниматься из любого города. Преподаватели обеспечивают обратную связь, им можно задавать вопросы. Есть практическая часть.
Вот несколько хороших курсов:
- Профессия Frontend-разработчик
- Frontend-разработчик с нуля
- React: библиотека фронтенд-разработки №1
- Специализация Frontend-разработчик
- Frontend-разработчик
- Профессия “Фронтенд-разработчик”
Узнать подробности и ознакомиться с полным перечнем курсов по frontend-разработке можно на нашем блоге.
Где работать
Frontend-developer требуются на предприятия, создающие софт для бизнеса, в IT-компании по разработке сайтов, мобильных и веб-приложений, web-студии, стартапы, агентства аутсорсинга.
Карьерная лестница начинается с пункта “стажер”. Работа позволит набраться опыта и узнать на практике, что такое фронтенд-разработка.
Вакансии можно найти на профильных IT-ресурсах или на популярном сервисе по поиску работы hh.ru.
Если вам достаточно подработки или вы еще совсем “зеленый”, найти работу и испытать себя можно на биржах фриланса. Есть международные сервисы, например, Upwork, Freelancer, Joomlancers, Gigster, Codeable и YouTeam. А есть русскоязычные: Kwork, FL, Freelance.
Биржи помогут начинающим программистам набить руку, собрать портфолио и научиться работать с заказчиками.
У опытного специалиста есть три варианта совершенствования в работе:
- Вертикальный – рост по карьерной лестнице, постепенное завоевание новых должностей.
- Горизонтальный – непрерывное совершенствование своих навыков, что приводит к повышению цены за свои услуги.
- Диверсификационный – обретение новых навыков, смежных специальности фронтенд-разработчик, и последующая переквалификация. Так часто frontend-developer превращается в backend-разработчика.
Что должен уметь фронтенд-разработчик
Перечислим, какие знания и навыки должны быть у frontend-программиста:
- Методологии верстки, HTML и CSS.
- Язык программирования Javascript.
- Библиотеки jQuery, React и фреймворки Vue, Angular.
- Популярные CMS – WordPress, Битрикс, Modx и др.
- Система управления версиями Git и сервис GitHub.
- Общие представления о backend-разработке, базах данных и языке запросов SQL.
- Навыки проектирования архитектуры веб-приложения.
- Photoshop для разделения на части макетов от веб-дизайнера.
- Основы UI/UX-дизайна и юзабилити.
- Принципы кроссбраузерной и адаптивной верстки.
- Английский на уровне чтения технической документации.
Ниже расскажем подробнее о том, что знают и умеют фронтендеры разной квалификации.
Junior
Junior frontend-разработчик – это начинающий специалист с опытом до 1 года. Он может самостоятельно сверстать макеты, написать простой код на Javascript.
Особенности работы джуниор-программиста:
- Он решает только простые или типовые задания и не участвует в разработке крупных проектов.
- Его контролирует более опытный наставник, который обязательно проверяет написанный код.
- Главная задача джуна – повышать уровень квалификации, больше практиковаться, заниматься самообразованием и изучать расширенный синтаксис Javascript.
Middle
Особенности работы фронтенд-разработчика уровня middle:
- Без помощи наставника решает задачи любой сложности, пишет код, который соответствует стандартам программирования и не нуждается в ревью.
- Знает углубленно Javascript, библиотеки, фреймворки и другие технологии – JSX, AJAX, React, Flexbox и пр.
- Может участвовать в командной разработке и имеет общие представления о бэкенде.
Senior
Senior frontend-разработчик – это профессионал с опытом от 5-6 лет, который свободно владеет React, Vue.js или Angular, умеет писать код для высоконагруженных систем и юнит-тесты, имеет базовые знания в бэкенде.
Зачастую он выступает одновременно в качестве технического руководителя и тимлида, который может управлять командой программистов: определяет стратегию, согласовывает условия с заказчиками, распределяет задачи между исполнителями, контролирует сроки, делает финальное код-ревью и отвечает за конечный результат.
Как стать 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, разные. Читайте историю Марка Соболева, который служил в полиции, а теперь разрабатывает образовательные сервисы.
Какие языки программирования нужно знать?
Принципиальное отличие frontend от backend состоит в навыках и языках программирования. Например, любой фронтенд-специалист должен знать:
-
HTML. Это язык разметки и основной инструмент разработки внешнего вида страниц сайта. С помощью HTML создаются блоки, таблицы, изображения и различные компоненты дизайна. Вряд ли вы сможете найти сайты, написанные на чистом HTML, но знание языка разметки является неотъемлемым навыком любого фронтенд-разработчика.
-
CSS. Представляет собой набор шаблонов для создания стилистики страниц. С помощью CSS вы можете реализовать на странице общий сценарий оформления, сделать ее уникальной и красивой, не дублируя код.
-
JS. JavaScript, в отличие от CSS и HTML, является полноценным языком программирования. Его возможности огромны — с помощью JS вы сможете не только работать над интерфейсом приложения или страниц сайта, но и разрабатывать различные «серверные» фичи.
Для работы с JS полезно знать фреймворк React.js. Не лишними будут такие инструменты, как Angular, Vue.js.
Бекенд-разработчику нужно знать один из следующих языков:
-
PHP. Является одним из самых распространенных языков в мире. Идеальный вариант для работы с серверной частью. РНР позволяет автоматизировать веб-ресурс.
-
Python. Считается самым простым языком в плане изучения. Python можно использовать для разработки движка приложения. Это оптимальный вариант за счет удобства и фреймворка. Для Python характерна простота синтаксиса, что позволяет использовать его также для мобильной разработки.
-
Ruby. Язык серверной части, ставший популярным благодаря удобному и функциональному фреймворку.
-
SQL. Предназначен для работы с базами данных. Без SQL представить сферу backend-разработки невозможно. Ни один онлайн-магазин или социальная сеть не обходится без привязки к базам данных.
-
Go. Язык. предназначенный для высоконагруженных сервисов и разработанный компанией Google. Практически для всех сервисов корпорации характерна высокая нагрузка, поэтому язык Go был быстро принят программистами.
-
Java. Самый популярный вариант для создания веб-приложений, софта, различных сервисов и программ. Java — идеальный вариант для автоматизации тестирования. Этот язык программирования менее актуален для работы с десктопными приложениями и не подходит для фронтенд.
Одним из лучших фреймворков для работы с Java является Spring. Его особенность состоит в возможности подключения множества модулей, предназначенных для выполнения любых задач, связанных с веб-разработкой. Например, для работы с безопасностью используйте Security, для баз данных — Data.
Frontend-разработчик и суть его работы
Профессия frontend-разработчика выделилась относительно недавно и ещё вызывает путаницу у работодателей. Не все до конца понимают, чем конкретно он должен заниматься и периодически предлагают фронтенду заниматься обязанностями верстальщика. Да и с названием часто бывает путаница: в вакансиях его норовят назвать то «фронтендщиком», то «front end разработчиком», то ещё как-то.
В действительности, конечно, работа frontend-разработчика мало что общего имеет с версткой сайтов. Его основная задача – взглянуть на конечный продукт глазами простого пользователя и донести свои замечания до исполнителей. Одним словом, задача типичного фронтенд-разработчика – «подружить» сайт, программу, приложение с клиентом.
Эта профессия требует умения анализировать и адаптировать полученную информацию, активно взаимодействовать с заказчиком.
Кому подойдет профессия фронтендера
Вовсе не обязательно иметь техническое образование, чтобы стать IT-специалистом. Научиться frontend-разработке может даже гуманитарий, если есть интерес к программированию.
В профессии пригодятся следующие личные качества и «мягкие» навыки (soft skills):
Ответственность, внимательность, умение концентрироваться на задании и доводить начатое до конца.
Способность планировать рабочее время, распределять задачи по степени важности и соблюдать сроки.
Адекватное отношение к критике, готовность слышать чужое мнение и исправлять ошибки.
Эрудиция, желание развиваться в профессии, повышать уровень квалификации, изучать новые технологии.
Готовность работать в команде – фронтендер часто пересекается по работе с бэкенд-программистом, SEO-специалистом, веб-дизайнером, интернет-маркетологом и др.
Что еще нужно знать?
Текстовые
редакторы. Именно им Вы будете
посвящать львиную долю своего времени
в качестве frontend -разработчика. Поэтому
стоит выбрать наиболее удобный редактор
(среди вариантов: Sublime text, Atom, Visual Studio
Code и другие), хорошенько изучить его и
установить нужные для работы плагины.
Инструменты для
браузера. В Chrome и Firefox есть инструменты,
которые дают возможность смотреть в
режиме реального времени на структуру
сайта, совершать эксперименты с внешним
видом, проводить дебаги JS-кода.
Git (контроль
версий)
Такие системы разработаны
с целью постоянного отслеживания и
проведения изменений проекта, сохранения
и управления различными версиями и
самое важное – работе в команде с
другими разработчиками.
Что такое бэкенд‑разработка
Бэкенд — это разработка бизнес-логики продукта (сайта или веб-приложения).
Бэкенд отвечает за взаимодействие пользователя с внутренними данными, которые потом отображает фронтенд. Попросту говоря, это то, что скрыто от глаз пользователя и происходит вне его браузера и компьютера.
Пример
Когда водитель садится в салон автомобиля, он видит перед собой «пользовательский интерфейс»: панель управления, руль, педали газа и тормоза. При нажатии на педаль газа машина начинает двигаться вперёд. Так вот, фронтенд — это те самые педали: водитель знает, что будет, когда он на них нажмёт. А бэкенд — это внутренние процессы, которые происходят в автомобиле после нажатия на педаль. Пользователь не видит, как заводится двигатель, и не знает, как он устроен.
Теперь посмотрим, как работает бэкенд сайта.
Когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, вы переходите из области фронтенда в бэкенд. Запрос отправляется на сервер Google или «Яндекса», на котором расположены сложные алгоритмы поиска, — там и происходит всё «волшебство». Как только на мониторе появилась информация, которую вы искали, — вы возвращаетесь в область фронтенда.
Стать Senior: выбрать подходящий проект
Раз вы читаете эту статью, скорее всего, вы хотите знать, как вырасти до уровня senior специалиста. И уже находитесь на уровне Middle. Или где-то очень близко к этому уровню. А значит, вы понимаете, что теория без практики не стоит ничего. Поэтому даже если вы прочитает все книги, которые мы перечислили, а потом еще все остальные, которые найдете сами. Вы все равно не дорастете до уровня сеньора, если в вашей компании нет задач и перспектив, которые помогут вам прогрессировать и оттачивать навыки на практике.
Если это так, то единственный способ вырасти до уровня сеньора — сменить место работы.
Что собой представляем профессия 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 получает дополнительные возможности в эксплуатации гаджета, которые связывают с нативным мобильным приложением. Так, при втором заходе, можно получить мгновенную загрузку, для быстрого входа установить на экране значок сайта, настроить получение уведомлений, работать в удобном полноэкранном режиме, отказавшись от навигации браузера и т. д.
Все сводится к тому, что при любом бэкенде сайта, должна быть его «морда» и функционирование. И за все это отвечают фронтенд-разработчики. В их ответственности разработка внешнего интерфейса сайта, то есть того, как бэкенд и внешний дизайн взаимодействуют с конечными пользователями. Ведь каждый сайт — это не просто интернет-страница. Это огромный труд, который включает в себя: разработку дизайна, выстраивание логики работы, СУБД, разного рода прослойки и т. д.
Фронтенд-разработчик в 2021 г. — это сложная и многокомпонентная профессия, даже в сравнении с тем, какой она была всего 7-10 лет назад.
Зона ответственности фронтендера — логичное функционирование всех компонентов сайта: изображение, кнопки, навигация, внутренние ссылки, контент. Именно фронтендеры создают первичную структуру, выявляют требования пользователей (заказчиков), полностью отвечают за клиентскую сторону пользовательского интерфейса.
Не нужно путать с бэкендерами. В их зоне компетенции программно-аппаратная часть и то, как программы взаимодействуют с железом. А вот фронтендеры имеют дело со сложной «аппаратной частью» — органами слуха, зрения и обоняния простых людей, которым предстоит пользоваться сайтом. Их задача сделать так, чтобы пользоваться интернет-ресурсом было удобно, понятно и логично. И если фронтендер где-то допускает ошибку, то это сразу заметно.
Что такое фронтенд и чем занимается специалист
Frontend — это разработка интерфейса, с которым взаимодействуют пользователи. Называется она так, потому что это создание наружной части сайта или приложения, а значит, находится снаружи/спереди (front).
Фронтенд-разработчик — это программист и верстальщик в одном лице. По части программирования специалист пишет код при разработке интерфейса, по части верстки он вставляет интерфейс на сайт или приложение. Помимо этого, разработчик адаптирует интерфейс под различные платформы, например под компьютерный браузер и мобильный браузер.
Основная цель специалиста — сделать использование сайта или приложения максимально удобным для конечного пользователя. Интерфейс должен быть интуитивно понятным, не перегруженным навигационными элементами и в стиле веб-площадки. Эта профессия входит в сферу веб-разработки.
Главные инструменты в этой сфере — языки веб-разметки (HTML, CSS) и программирования (JavaScript):
- JavaScript используется для создания UI (user interface — интерфейс пользователя) с нуля;
- На HTML производится основная верстка, где интерфейс переводится на язык, понятный современным браузерам;
- Через CSS прикрепляются стили к структурированным документам (в случае с frontend это прикрепление стилей к документам HTML).
Фронтенд-специалист несет ответственность за то, чтобы все страницы сайта или приложения выглядели идентично во всех браузерах и их версиях, а также соответствовали макету, который был создан дизайнером (или самим веб-разработчиком). С каждым годом интерфейсы сайтов и приложений усложняются с технической стороны, зачастую становясь все более простыми для пользователя. Также к уже созданным устройствам добавляются новые, будь то планшеты, компьютеры, ноутбуки, смарт-часы и другие гаджеты.
Из этого выходит, что профессия фронтенд-разработчика требует постоянного обучения и нахождения в курсе событий в индустрии.
Отличие frontend от backend
Фронтенд-разработчик напрямую взаимодействует с пользователем через интерфейс, так как отвечает за все внешние элементы, с которыми контактируют клиенты/посетители сайта или веб-приложения.
За все обработки и действия, которые производятся на серверах, отвечает другой специалист — бэкенд-разработчик. Так как это разные профессии, в backend используется другой инструментал, включающий языки программирования PHP, Perl, Java, Python, Ruby, фреймворки и SQL для работы с данными. Кстати, на нашем сайте есть обзор профессии PHP-программиста.
В разработке любого сайта или веб-приложения участвуют оба специалиста. Так, пользователь выбирает определенные элементы в веб-интерфейсе, после чего на сервер отправляется запрос, результат которого отображается в интерфейсе. Есть fullstack-разработчик, который сочетает в себе обязанности и фронтенда, и бэкенда.
Достоинства и недостатки
Как и в любой сфере, во фронтенде есть некоторые плюсы и минусы. Поэтому в список того, что нужно знать фронтенд-разработчику-новичку, входит ознакомление с достоинствами и недостатками профессии.
Перечень плюсов:
- Востребованность специалистов;
- Хорошая зарплата;
- Довольно низкий порог вхождения по сравнению с другими IT-профессиями, ведь нужен всего один язык программирования, а языки разметки и стилей значительно проще;
- Есть как работа с исходным кодом, так и дизайнерская составляющая деятельности;
- Со временем можно изучить бэкенд и стать фуллстэк-специалистом.
Список минусов:
- Во многих вакансиях по этой специальности есть требования, касающиеся бэкенда;
- Обязательно взаимодействие с другими сотрудниками (далеко не для всех это минус);
- Хоть JavaScript и не такой сложный и требовательный, как, например, C++, для того чтобы им уверенно владеть, нужно иметь начальные знания алгебры.