Есть бэкенд — это тот, кто программирует серверную часть приложения. И есть фронтенд. Вот зачем он нужен, в чём его сила и сколько можно тут заработать.
Фронт? Бэк?
Вот есть ваше устройство: компьютер или телефон. Когда вы заходите на сайт, вам в устройство залетают данные: картинки, текст, скрипты и прочее. Браузер на вашем устройстве ловит эти данные и обрабатывает: картинки выводит на экран, тексты рисует в определённом шрифте, красит страницу в нужный цвет и так далее. Вот это всё — «фронт-энд», то есть «передовая».
А откуда эти данные прилетели? Кто сказал сайту вывести вам именно этот текст и именно эту картинку?
Вы уже знаете, что эти данные прилетели с сервера — специальной машины в дата-центре, которая отвечает за отдачу вам содержимого сайтов и приложений. На этом компьютере работает специальная программа, которая вас узнаёт и формирует страницу с нужной информацией. Вот эта программа, а также все её вспомогательные системы, базы данных, хранилища и прочее — это «бэк-энд», то есть «тыл».
Фронтенд-разработчик пишет тот код, который будет исполняться на передовой, то есть на клиенте.
Как в вакансии
Фронтенд-разработчик делает следующее:
- собирает сайт по макету дизайнера;
- использует для этого HTML, CSS, JavaScript и несколько других языков;
- понимает процессы, которые происходят во время создания сайта;
- знает, как опубликовать сайт в Сети так, чтобы он выглядел одинаково на всех устройствах;
- умеет работать с Git или другим инструментом контроля версий;
- использует Webpack для сборки проекта и вообще оперирует препроцессорами.
Звучит сложно, но вот основное: фронтенд берёт макет будущего сайта (картинку) и превращает его в код, который можно отправить клиенту. При необходимости он программирует интерактивные элементы и анимацию, которые будут обрабатываться на клиенте.
Часто фронтендов путают с верстальщиками, но на самом деле верстальщик — это специалист узкого профиля (вёрстка по макету). А фронт кроме этого может и слайдер прикрутить, и шаблон в CMS поправить, и закодить нестандартное поведение картинки при нажатии, и написать скрипт для проверки правильности заполнения данных на сайте.
Фронтенд — это повар
Чтобы было проще всё это понять, давайте проведём аналогию с поваром. Задача повара — приготовить блюдо по рецепту так, чтобы оно понравилось клиенту. Это похоже на работу фронтенда, только вместо рецепта у него макет дизайнера. Копнём глубже, чтобы разобраться.
Начало работы
Когда повару дают новый рецепт, он говорит: «Хм, мне понадобится лук, морковь, картофель и пара томатов. А ещё глубокая кастрюля, венчик для взбивания и сковорода с толстым дном».
Фронтенд берёт макет со словами: «Так, это всё, конечно, хорошо, но кроме HTML и CSS тут нужно будет использовать Ajax для отправки форм и JavaScript, который поможет отследить нажатие на картинку. Значит, подключим вот эту и эту библиотеки».
Использование технологий
Повар не всегда готовит всё сам — иногда он использует полуфабрикаты или готовые изделия. Например, если ему нужно сделать тарталетки, он не будет выпекать их, а закажет готовые. Потом просто положит в них нарезанные овощи с сыром, поставит в духовку и получит вкусное блюдо.
Фронтенд-разработчик тоже не пишет весь код с нуля. Если он понимает, что какую-то часть логики будет сложно реализовать на странице, то может отправить её на сервер, чтобы все вычисления были там. В итоге фронтенд попросит ребят на сервере сделать такую-то функцию, которая будет обрабатывать данные со страницы — точно так же, как повар заказывает готовые корзинки.
Но чтобы так уметь, и повар, и разработчик должны понимать, как работают процессы на стороне. Если повар попросит корзинку размером с арбуз из цельного картофеля, ему откажут, потому что не бывает такой большой картошки. То же самое с кодом: прежде чем ставить задачу на сервере, фронтенд должен знать, что реально сделать, а что нет.
Рабочие инструменты
Профессиональному повару неважно, где готовить — на маленькой кухне у друзей или в огромной кухне престижного ресторана. Если он не найдёт нож для рыбы, то порежет её обычным. Если друзья просят повторить дома его знаменитые сырники, то повар им не откажет из-за того, что дома нет профессионального жарочного шкафа. Вместо этого он приготовит их на сковороде, а корочку хитро сделает в духовке с помощью электрогриля.
Фронтенд в работе, как правило, использует уже готовые и проверенные решения. Он знает, как встроить красивую галерею на сайт и как настроить форму обратной связи. Но если в проекте нужно будет использовать старую галерею, которую написал давным-давно их главный программист — он вникнет в код и разберётся. Если понадобится, то напишет к ней свой обработчик, который существенно упростит работу.
Главное в работе фронтенда — понимать, как устроены и как работают технологии, чтобы применять их в проекте.
Тонкости работы
Иногда в процессе готовки повар понимает, что блюдо можно немного улучшить, если, например, добавить побольше чеснока или вместо ржаных сухарей взять пшеничные. Внешний вид может остаться тем же самым, а вкус станет лучше.
Когда фронтенд-разработчик трудится над сайтом, он может найти более изящное решение, чем то, которое предусмотрел дизайнер или менеджер проекта. Например, можно встроить готовый модуль авторизации вместо самодельного — это ускорит разработку, но не факт, что получится сделать там тот же дизайн.
Чтобы так уметь, нужно набраться опыта на десятках других блюд или проектов. Пока такого умения нет — просто используйте рабочие инструменты и учитесь. Со временем всё появится.
Что дальше
Дальше всё очевидно — нужно пробовать. Специально для этого в Яндекс.Практикуме дают 20 бесплатных часов обучения фронтенд-разработке. Если понравится — продолжите и освоите новую профессию.
