Большой гайд, как стартовать и развиваться в профессии Frontend: советует Frontend Engineer в Amazon

ITExpert team19.12.2023

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

По данным Stackoverflow, frontend-разработка входит в тройку самых востребованных IT-специальностей. О том, кто такой фронтенд разработчик, что нужно знать фронтенд разработчику, как правильно учиться, чтобы не набить шишек, и двигаться по карьере уверенно, а также на какие ресурсы обратить внимание, если хотите попробовать себя в профессии frontend разработчика, спросили у Frontend Engineer в Amazon, Антона Худякова.

Он работал в Ubisoft и Ciklum. Также был преподавателем и ментором на курсе React в IT-школе «Лектрум», где учил группы до 30 студентов, проводил индивидуальный менторинг и code review.

А Tech Recruiter в ITExpert Анна Василенко поделилась, где ищут фронтенд-разработчиков, как проверяют soft skills кандидатов и какие вопросы задают во время «хантинга» скиллового специалиста в команду.

Для начала: разница между бэкендом и фронтендом

Фронтенд разработчик: кто это? Чем занимается frontend разработчик? В чем разница между ним и бэкендером? Бэкенд — это все, что скрыто от пользователя и находится на сервере. То есть код внутри, благодаря которому корректно работают кнопки и функции сайта или веб-приложения. Идентификация данных, соединение с платежным шлюзом, передача информации — результаты работы backend-разработчика.

Окей, Google: а кто такой frontend разработчик? Фронтенд, напротив, — то, что видит и с чем взаимодействует пользователь. Рассмотрим один из примеров работы фронтендеров — сайт сервиса бронирования жилья Airbnb. Окна, где вы выбираете даты, а также страну и место, где будете останавливаться, а также фильтры, по которым можете определить параметры жилья, — это все фронтенд.

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

Главная задача фронтенд-разработчика — перевести дизайн-макет в код, а также сделать так, чтобы все на сайте или в приложении работало быстро и удобно для пользователя.

Must-have скиллы и знания Frontend developer

Разберем, что должен знать Frontend разработчик. JavaScript — главный язык фронтенд-разработчика. Фронтендерам часто приходится заниматься версткой сайтов: написанием HTML-кода и CSS-стилей, чтобы предоставить информацию в виде, который соответствует дизайну и понятен всем браузерам.

Собрали технологии, инструменты и навыки, которыми должен владеть Frontend developer в зависимости от уровня.

Смотреть детальнее

«Также независимо от уровня важны soft skills. Здесь стоит добавить, что требования к ним могут отличаться в зависимости от специфики компании/проекта. Например, людей, которые получают повышение в Amazon, объединяет одно: каждый думает о бизнесе и заботится о клиенте.

Наша компания — это не о том, чтобы перепробовать все новинки в технологиях asap. К примеру, вышла новая версия Next JS и вы решаете попробовать серверные компоненты. Все переписываете, добавляете серверные компоненты и потом рассказываете всем из команды, какой вы крутой и современный. Это так не работает.

Задача специалиста в Amazon — обеспечить value для клиента, понять, что ему нужно, а также как закрыть эту потребность быстро и качественно. И, конечно, нужно выполнять свою работу так, чтобы с вами было приятно работать другим участникам команды». Антон Худяков

«В зависимости от требований проекта (технический стек, этап разработки, домен, необходимый уровень специалиста), требования и вопросы для проверки скиллов будут отличаться. Какими могут быть общие вопросы для специалиста на этапе первичного скрининга:

Сколько лет опыта в JS-разработке у вас есть? С какими JS-фреймворками вы работали?

Покрываете ли вы код unit-тестами? Если да, какие фреймворки использовали для unit-тестирования?

Есть ли у вас опыт архитектурных решений? Расскажите поподробнее.

Кроме того, работодатели обращают внимание на soft skills. Особенно важны для вакансии Frontend-разработчика умение организовать свою работу (способность управлять своим временем, навыки самоорганизации, планирования и приоритезации задач), навыки коммуникации (сюда входят скиллы коллаборации, решение проблем и конфликтов), стремление к постоянному профессиональному развитию (быстрое изучение новых технологий, гибкость, регулярное совершенствование навыков и поиск возможностей для получения нового опыта).

На интервью эти навыки могут проверять с помощью таких вопросов:

Можете поделиться примером, когда вы оптимизировали свою работу для повышения производительности?

Как вы определяете приоритеты в работе для достижения результата?

Как вы реагируете, когда кто-нибудь из коллег критикует ваше решение или подход к выполнению задания?

Как вы обычно совершенствуете свои навыки и прокачиваете знания?»

Анна Василенко

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

Топ фреймворков для фронтенд-разработчиков

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

Среди фронтендеров особенно популярны React.js, Angular.js и Vue.js. По данным ежегодного Stack Overflow Developer Survey, в 2022 году фреймворк React.js использовали 44% опытных разработчиков и почти 43% тех, кто только начинает работать с кодом. Следующий в рейтинге Vue.js: среди опрошенных его выбирают 20% разработчиков с опытом и 13,5% начинающих. Почти 10% скиловых dev’ов и 5% новичков предпочитают Angular.js.

Антон Худяков рекомендует начинать именно с React. Он очень близкий к обычному JavaScript и самый простой в изучении. Также для начинающих доступна большая база решений. Angular — самый сложный из этой тройки, потому что требует знаний Typescript и RxJS. К нему лучше переходить после изучения React и/или Vue.

Свяжитесь с нами уже сейчас

С чего начать карьеру в Frontend development: пошаговый план действий

Что нужно знать frontend разработчику для старта в карьере? Вот ключевые шаги, чтобы стать фронтенд разработчиком с нуля:

Шаг 1: составьте план изучения фронтенда

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

«Значительным преимуществом перед другими кандидатами станут профессиональные сертификации — например, по AWS. Это показатель того, что вы владеете знаниями в области облачного решения и знаете, как его использовать, а также серьезно настроены и имеете прокачанный навык обучения. Вот, например, AWS-программа для украинцев». Антон Худяков

Шаг 2: регулярно практикуйтесь

Согласно кривой забывания, люди теряют 50% полученной информации уже в первые часы, 70% — в течение суток, а 90% — в период 7 дней после изучения. Выход один: закреплять новые знания в процессе выполнения рабочих задач. Кроме того, так вы получите реальные навыки, сможете увереннее выполнять тестовые и проходить технические интервью. Для этого подойдут:

«Фронтендеру, особенно если вы хотите получить оффер от FAANG-компании, очень важно практиковаться и уметь решать алгоритмические задачи уровней easy и medium. Задачи уровня hard не так критичны, но желательны». Антон Худяков

Еще один эффективный способ научиться фронтенду — помогать Open Source-проектам на Github. Поскольку современный фронтенд — это множество сторонних библиотек, которые нужно развивать и поддерживать, в разделе этих библиотек на Github часто просят о помощи. Ваш код проверят и дадут фидбек. По ссылке вы найдете список issues в популярных репозиториях для новичков.

Смотреть детальнее

Шаг 3: прокачайте английский

Frontend Developer должен владеть английским на уровне не ниже B1 (Intermediate). Это необходимо для работы с кодом, чтения документации и профессиональных ресурсов. Если вы планируете устроиться в иностранную компанию, ориентируйтесь на уровень B2 (Upper-Intermediate) или С1 (Advanced).

Шаг 4: найдите ментора

Ментор может подсказать, как строить карьеру, что именно выучить, а также порекомендовать курсы или заняться обучением фронтенду в индивидуальном формате. В интернете доступны площадки для поиска IT-ментора: например, Stack Overflow, Менторы в тылу или Projector Mentorship Program. Больше о менторинге в IT-компаниях читайте в нашем блоге.

Шаг 5: пройдите стажировку или ищите вакансии для Trainee Frontend Developer

Как найти работу разработчику, если вы новичок? Прежде всего, ищите стажировку или вакансии для Trainee, чтобы получить первый реальный опыт и поучиться у опытных разработчиков. Примерно 70% компаний время от времени предлагают работу для стажеров — например, можно отслеживать предложения на карьерных сайтах напрямую или искать на job boards.

Смотреть детальнее

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

Например, я еще во время обучения в университете прошел тренинг-программу по фронтенду в Epam. Стажировка не гарантирует, что вас быстро примут на работу в эту же компанию (и что вообще примут), это занимает время (6–12 месяцев), однако так вы получите практический опыт и будет легче искать работу в будущем.

В Amazon тоже есть программы стажировки, однако попасть на них крайне трудно. Например, нам в команду часто берут выпускников ETH Zürich, где учился Эйнштейн и другие лауреаты Нобелевской премии. ETH Zürich входит в топ-20 лучших университетов мира. Сейчас попасть в Amazon еще труднее, учитывая мировой кризис в IT, но это точно возможно». Антон Худяков

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

«Для поиска фронтенд-разработчика компании часто используют такие ресурсы:

Job-сайты, специализирующиеся на IT: Djinni, DOU, Jobs Dev, No Fluff Jobs, Wellfound (в прошлом — AngelList) и другие;

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

Университеты и учебные заведения: этот канал в основном используют для поиска Frontend разработчика уровня Junior.

Рекомендации: компании спрашивают знакомых, коллег и других кандидатов, не знают ли они IT-специалистов, которые могут быть заинтересованы в поиске работы. Или предлагают бонус за рекомендацию: например $400–1500 в зависимости от грейда. Вы можете сообщить знакомым, что ищете работу, и попросить вас рекомендовать на вакансию Trainee/Junior фронтенд-разработчика в их компании.

Реже, однако рекрутеры используют и специализированные IT-ресурсы для поиска айтишников. Среди них могут быть GitHub, Stack Overflow, CodePen (платформа, на которой разработчики создают, тестируют и публикуют свой код) и HackerRank (здесь айтишники проходят тестирование на знание языков программирования и алгоритмов). Поэтому вы можете уделить время на оформление профилей на этих платформах». Анна Василенко

Шаг 6: проявите себя на интервью

Антон Худяков советует осуществлять «инвентаризацию» достижений по технике STAR:

Situation — какой была ситуация в компании, когда вы начали работать?
Task/target — какова была ваша задача или цель?
Action taken — какими были ваши действия по достижению цели?
Results achieved — каких результатов удалось добиться?

Например: «У кастомера была проблема X, я предложил добавить End-to-End тесты, после внедрения которых количество багов на проде уменьшилось на Y%». Или: «Мы в команде думали, какие фичи имплементировать, чтобы они повысили conversion rate. Я предложил ввести A/B тестирование. Сейчас новые фичи мы сначала выкатываем для 30% пользователей. Если мы видим, что они пользуются спросом — открываем доступ к новым фичам для всех пользователей сервиса. После этого решения conversion rate вырос на 45%».

Делайте фокус на том, что вы предложили или разработали. Чем больше деталей и цифр вы будете использовать, тем лучше.

Для подготовки к интервью Антон рекомендует прочитать такие книги:

System Design Interview — An insider’s guide;

Designing Data-Intensive Applications: The Big Ideas Behind Reliable, Scalable, and Maintainable Systems;

System Design Interview – An Insider’s Guide: Volume 2.

👀 Бонус: что читать и слушать фронтенд-разработчику

Собрали книги, блоги и профили Frontend Dev’ов в соцсетях, которые следует добавить в закладки.

📖 Книги

Learning JavaScript: JavaScript Essentials for Modern Application Development, Итан Браун. Автор книги объясняет стандартные темы для начинающих (переменные, поток управления, массивы), а также охватывает такие сложные концепции, как функциональное и асинхронное программирование. Вы узнаете, как создавать мощные и быстро реагирующие приложения на клиенте или с помощью Node.js на сервере.

Secrets of the JavaScript Ninja, Джон Резиг. Небольшая книга о JavaScript и принципах работы браузера. Подойдет для начинающих и специалистов с опытом, желающих упорядочить знания. Важно: выбирайте второе издание.

Серия книг You don’t know JS, Кайл Симпсон. Серия из шести книг — от основ JS до разбора сложных задач и особенностей работы с JavaScript.

✍🏻 Блоги

Netanel Basal. Статьи об управлении состоянием программы, тестировании и создании форм от opensource-контрибьютора.

Angulararchitects. Блог автора книги Enterprise Angular Манфреда Стеера. В нем он делится последними новостями и дает советы по работе с Angular.

Minko Gechev. Блог инженера Google, который специализируется на Angular. Автор делится лучшими, по его мнению, практиками и подходами в разработке.

Overreacted. Блог о React одного из его основных разработчиков — Дэна Абрамова. Он рассказывает о чистом коде, о том, как работает режим разработки в React, а также о карьерном развитии.

📺 YouTube

Programming with Mosh. Автор канала — разработчик с 20-летним опытом и преподаватель на платформе Udemy. Здесь вы найдете туториалы по фронтенду, JS, а также фреймворкам React и Angular.

📱 Twitter

Addy Osmani. Профиль разработчика из Google, который работает над Chrome. Недавно Эдди Османи выложил в свободный доступ книгу о паттернах и React.

Mathias Bynens. Автор также работает над инструментами для Chrome и V8 — двигателем для JS. В профиле публикует ссылки на свои лекции, а также рассказывает о новых возможностях JS и CSS.

V8. Страница о V8 — самый популярный двигатель для JavaScript. Здесь вы найдете информацию о том, что нового в последних версиях и как все работает под капотом. Например, о Sparkplug (неоптимизированный компилятор байт-кода в машинный) и спрятанные классы (метод оптимизации производительности) и так далее.

«Практически все, что касается технических вещей и трендов, я узнаю из Twitter. Я подписан здесь на профили dan_abramov, Alex Xu, Satya Nadella, Kevin Scott, Adam Selipsky, Clement Mihailescu и Illya Klymov». Антон Худяков

🤓 Что еще?

Чтобы знать, как развиваются инструменты, с которыми вы работаете, какие новинки появляются, важно следить за официальными блогами библиотек/фреймворков. Например, у React.js есть блог в Twitter.

И главное: при всех трудностях, каждая вакансия находит своего кандидата, а специалист — интересную компанию. Верьте в себя!

FAQ

В чем разница между backend и frontend-разработчиком?

Фронтенд и бэкенд — это как сцена и закулисье сайта или веб-приложения. Фронтендеры разрабатывают интерфейсы, учитывая опыт пользователя (UX), а бэкенд-разработчики создают внутреннюю сторону («внутряк») сервиса, который работает без участия пользователя.

Какие основные языки программирования используют для разработки на Frontend?

Для реализации фронтенда используют HTML (нужен для разметки документа, то есть страницы в браузере), CSS (язык отвечает за внешний вид страницы, с его помощью вы работаете с цветами, шрифтами и расположением различных блоков) и JavaScript (реализует выполнение различных действий на странице, то есть добавляется анимация и отклик на запросы пользователя). Фрондендеры также активно используют фреймворки: React.js, Angular.js и Vue.js.

Какие навыки нужны, чтобы стать успешным Frontend-разработчиком?

Техническая база must skills, которую вам следует освоить, выглядит так:

HTML(HTML5);
CSS (CSS3);
JavaScript.

Другие важные навыки:

основы JS DOM (Document Object Model);
понимание основ работы с событиями (вешать элементарные обработчики, знать о модели распространения событий, уметь их перехватить, обработать и отменить);
базовые понятия синтаксиса ES6 (fetch, async/await, promise). CSS-препроцессор (SASS/LESS) — вложенности и создания переменных;
CSS-фреймворк (Bootstrap/Foundation) — достаточно понимать архитектуру и как ее использовать;
основы JS-фреймворка/фреймворков (React/Angular/Vue);
понимание, как работать в Git;
знание систем для сборки приложений: Webpack, Vite.

Софт скиллы (они нужны как для работы в команде, так и для личностного роста):

навыки самоорганизации;
навыки решения проблем;
командная работа;
прокаченные навыки коммуникации;
английский язык не ниже уровня B1 (причем важно не только умение говорить, но и читать документацию на английском).