Интернет-магазинам, онлайн-школам и даже этой статье в блоге SkillFactory нужен удобный и красивый веб-интерфейс. За создание видимой клиентской части веб-сервисов отвечают фронтенд-разработчики. О том, как перейти в эту профессию, какие навыки осваивать и как долго учиться, рассказывает frontend-разработчик в финтех-стартапе Иван Колотилов.
Чем занимается frontend-разработчик?
Веб-сервисы состоят из серверной (backend) и клиентской (frontend) частей. За последнюю отвечает фронтенд-разработчик. Из картинки, созданной дизайнером, он делает разметку, которую браузер может прочитать и показать пользователю.
Качество сервисов постоянно растет, ожидания пользователей от них — тоже. Вместе с этим увеличивается сложность фронтенд-разработки. Сегодня все больше функций сервиса реализуется в браузере, без участия сервера, а интерфейсы усложняются. Поэтому спектр задач фронтенд-разработчика расширяется.
Frontend-разработчик отвечает за то, чтобы веб-интерфейс:
- был удобным для использования, доступным для всех категорий пользователей, в том числе для людей с ограниченными возможностями;
- был эстетически привлекательным;
- корректно отображал данные: картинки, текст, списки;
- корректно собирал и передавал данные в базу компании: через формы или кнопки.
Узнайте больше о профессии в нашем карьерном гиде. Ссылка в конце статьи.
Как я стал frontend-разработчиком
Frontend-разработке я учился самостоятельно. В университете я начал увлекаться интернетом и медиа: тогда везде говорили о том, что СМИ переходят в сеть. Это стало точкой пересечения двух моих интересов. Друг посоветовал прочитать книгу Влада Мержевича «Верстка веб-страниц», она вдохновила меня погрузиться в работу с сайтами. Frontend-разработка показалась мне привлекательной сферой, потому что она прикладная.
На тот момент, чтобы брать небольшие проекты, достаточно было знать HTML-верстку. Я начал с фриланса, спрашивал у знакомых, не нужны ли им сайты-визитки. Затем стал верстальщиком: делал лендинги, освоил адаптивную верстку. В течение полугода на онлайн-курсах освоил JavaScript и React.
После этого я четыре года разрабатывал финансовые сервисы в банковской и страховой сфере, а затем перешел в финтех-стартап. Спустя два года работы там я стал руководителем фронтенд-разработки.
Какие навыки и знания нужны, чтобы стать фронтенд-разработчиком?
Что нужно знать и уметь frontend-разработчику:
- Понимать, как устроен интернет и сайты: что такое сервер, DNS-сервис, протокол HTTP, как взаимодействуют фронтенд и бэкенд, как работает браузер.
- Знать язык разметки HTML, чтобы верстать структуру страницы, CSS — чтобы менять стили, и JavaScript — для разработки клиентской логики сайтов.
- Работать во фреймворках React, Vue.js или Angular, чтобы создавать масштабные проекты, применять готовые решения и подходы, ускорять разработку.
- Знать систему контроля версий Git и сервис GitHub, чтобы оперативно отслеживать изменения в коде, которые вносят другие разработчики.
- Работать с данными, чтобы правильно показывать пользователям контент сайта. Уметь собирать, обрабатывать и отправлять на сервер в текстовом формате JSON информацию от пользователей.
- Разбираться в основных принципах веб-доступности и UX, чтобы проектировать удобные пользовательские интерфейсы.
- Проектировать приложения, чтобы кодовая база была хорошо структурирована и все модули кода правильно друг с другом взаимодействовали.
- Налаживать коммуникацию с коллегами. Frontend-разработчик взаимодействует с проджект-менеджером и дизайнером. Важно уметь задавать вопросы и общаться с командой, чтобы правильно понять задачи и реализовать их в соответствии с задумкой.
Разберем основные задачи и навыки на примере разработки сервиса аренды автомобилей. Чтобы клиент мог выбрать машину, ему нужно показать информацию о ней. В приложении должны быть: список автомобилей с их характеристиками, фильтры по количеству пассажиров, размеру багажника. С клиента тоже нужно собрать данные: какой автомобиль он выбрал, его имя, данные для оплаты, предпочтительные даты аренды. Здесь пригодится JavaScript — основной язык разработки клиентской логики. С его помощью специалист получает и преобразовывает данные с сервера, отображает визуальные элементы в динамике, проверяет, как пользователь взаимодействует со страницей.
В работе любого интерфейса нужно предусмотреть типовые уведомления. Здесь на помощь приходят фреймворки. Чтобы показать клиенту сообщение об ошибке, без фреймворка придется пошагово давать инструкцию браузеру, что делать. Это много строк кода. Фреймворки типа React позволяют использовать специализированный синтаксис языка. Мы описываем конечное состояние — форму с ошибкой, — а React самостоятельно детально реализует наш запрос. Это позволяет меньше времени тратить на разработку, повышает надежность приложения.
Дэниел / Дэниел покруче
Чтобы завершить и выкатить сервис, frontend-разработчик должен знать базовые инструменты сборки, такие как Webpack, Parcel или Vite. Они собирают модули кода приложения и делают транспилинг — перевод из нового формата JavaScript в тот, который точно поддерживается всеми браузерами.
Сколько нужно учиться?
Стать джуном можно почти в любой профессии, вне зависимости от бэкграунда. Скорость будет зависеть от ваших исходных навыков. Frontend-разработку будет проще освоить тем, кто раньше уже работал с визуалом: дизайнерам, верстальщикам.
Если каждый день уделять два-три часа изучению языков, основ программирования, работы с браузером, то за пять-шесть месяцев можно прокачать базовые навыки и написать несколько учебных проектов. С таким портфолио можно проходить собеседования. Часто начинающие откладывают поиск работы, думая, что не готовы браться за реальные заказы. Это нормально, но важно как можно быстрее получить проверку своих знаний со стороны. Это лучший способ понять, что еще нужно доучить.
Чтобы интегрироваться в профессиональное сообщество и найти первую работу, готовьтесь играть вдолгую. Важно выбирать способы обучения, которые вас мотивируют. Часто помогает взять практическую проблему и решить ее. Например, сделать простой интерфейс для чата с друзьями, чтобы выбирать игры голосованием. Учеба идет намного проще, если понятна цель. Стоит поговорить со знакомыми, может, кому-то нужны лендинг или сайт-визитка.
Получить все необходимые навыки и подкрепить их практикой можно на программе SkillFactory «Frontend-разработчик PRO». В процессе обучения вы создадите полноценные проекты, которые можно положить в портфолио. Менторы курса дают развернутый фидбек во время обучения, подсказывают и разъясняют, если теория или практические задания непонятны. Чтобы увереннее чувствовать себя при поиске работы, на карьерном блоке вы обновите свое резюме и подготовитесь к собеседованию.
