О Front-End сегодня: «Наша работа стала еще более программистской, и связь с бэкендерами теперь теснее»

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

По словам экспертов из справочника ПВТ «ИТ-абитуриент 2022», Frontend-разработчик остаётся одной из топовых IT-профессий. Кроме того, знания JavaScript позволяют быстро войти в другие направления: например, в Back-End или в мобильную разработку. А в рейтинге популярности языков TIOBE JavaScript занимает 7 место.

Куда можно расти во Frontend-разработке, как начинающим фронтендерам выделиться на рынке труда, чего ждать джуну на собеседовании — об этом и не только пообщались с Юрием Семененко, Front-End Engineer в компании Monterosa и тренером курсов по разработке сайтов и веб-приложений в IT-Academy.

— Юрий, чем занимается Frontend-разработчик?

— Обычно я привожу в качестве простой аналогии автомобиль. Все, что под капотом машины: двигатель, аккумулятор, радиатор, подвеска и т. д. — это back-end. А то, что снаружи: кузов, салон, интерьер — это front-end.

Front-End — видимая часть продукта, его обертка. Но он тесно связан с бэкендом: если обертка красивая, а внутренняя часть сделана некачественно, продукт работать не будет; но и при отлично реализованной внутренней составляющей продукт продаваться не будет, если у него нет красивой обертки. Поэтому бэкендеры и фронтендеры всегда работают сообща.

— Бытует мнение, что Front-End намного проще Back-End. Это правда?

— 7 – 8 лет назад, возможно, так и было. Тогда фронтендом занимались верстальщики, которые просто превращали в код макеты дизайнеров. Они использовали HTML, CSS и немножко JavaScript в слайдерах и плагинах, а добавлением, обработкой и отображением данных занимался бэкендер. Сейчас все изменилось: бэкенд только присылает данные, которые обрабатываются, сортируются и отображаются уже фронтендом.  

Не так давно я наткнулся на технический спор в Twitter о том, что появились раздельные вакансии Frontend Developer (HTML, CSS) и Frontend Developer (JavaScript). То есть наша работа стала еще более программистской, и связь с бэкендерами теперь теснее.

— Куда можно расти во Frontend-разработке?

— Front-End — гибкая область, где можно развиваться в разных направлениях. На занятиях я обычно показываю студентам сайт roadmap.sh. Это очень обширная карта, которая демонстрирует, в каких областях разработки ты можешь себя реализовать, стартуя с базы Front-end, и какие дополнительные знания для этого нужны. Пойти можно куда угодно, все зависит от желания. У меня были студенты, которые после курса развивались как верстающие UI\UX специалисты и тестировщики. Были те, кто ушел в бэкенд, что тоже позволяет база JavaScript (работа с node.js). Даже есть примеры студентов, которые поняли, что создавать код — это не их путь, и выбрали направление управления проектами.

А если брать градацию: Junior, Middle, Senior и так далее, то здесь все зависит от отдельной компании и от того, какой у человека опыт. Бывают случаи, когда на собеседовании кандидат, который до этого работал на позиции Senior, демонстрирует знания уровня Junior. Возможно, он просто лет 5 работал только в одном узком направлении и просел во многих вопросах. А бывает и наоборот, когда человек был недооценен и, придя собеседоваться на Middle вакансию, показывает крепкие знания, которые присущи Senior-позиции. Поэтому эти градации условны.

— Какие технологии нужно знать сегодня, чтобы стать хорошим Frontend-разработчиком?

— Я всегда за хорошую базу. Не нужно бросаться в изучение фреймворков, не зная верстки и программирования. Такие люди будут очень долго расти в зарплате и тратить время на то, чтобы наверстать базовые знания. Поэтому я за то, чтобы сначала выучить HTML, CSS, JavaScript, а потом уже приступать к изучению фреймворков. В последние годы рынок особо не меняется и все так же остаются востребованы такие библиотеки и фреймворки, как React, Vue и Angular. Если кого-то интересуют детали, то я всегда советую смотреть на хорошо реализованную статистику на сайте stateofjs.com.

— Чем фреймворк отличается от библиотеки?

— Фреймворк — это инструментарий, который предоставляет четкие правила создания хорошего проекта с использованием базовых элементов (HTML, CSS, JavaScript). Если ты знаешь базовые принципы, то изучить любой фреймворк будет не так уж и сложно.

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

React позиционирует себя как библиотека, а Angular и Vue — как фреймворки. Проекты на React могут отличаться архитектурой и построением файловой системы, а на фреймворках строятся практически одинаковые в этом плане проекты. Конечно, они выглядят по-разному, но структура и код очень похожи из проекта в проект.

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

— Какие навыки и знания помогут Junior Frontend-разработчику выделиться среди других кандидатов в сегодняшних реалиях?

— Только демонстрация знаний. Джуниор без коммерческого опыта может показать свои навыки с помощью pet-проектов. Например, выделиться хорошим аккаунтом на GitHub, красиво расположив все свои проекты с документацией и описаниями: что тобой сделано, как организована твоя работа, история коммитов и понимаешь ли ты, как создаются продукты. При этом проекты в портфолио должны быть действительно интересными. То есть это не простой сайт-визитка или виджет погоды, а несколько проектов, демонстрирующих работу с получением, сортировкой, хранением данных, красивыми анимациями и переходами и так далее. Если загуглить pet-проекты для джунов, можно найти большое количество интересных идей, которые можно взять за основу и продемонстрировать на них все свои скиллы.

Pet-проекты полезны по многим причинам. Во-первых, они позволяют узнать какие-то тонкости и нюансы разработки, прокачать навыки и не забыть ту теорию, которую ты осилил на курсе или самостоятельно.

Во-вторых, интервьюеру сразу становится понятно, какими навыками владеет кандидат и что у него можно спросить. Как правило, собеседования джунов без портфолио могут длиться очень долго и выматывают обе стороны. Когда же у человека есть проекты, всегда можно спросить: «А как ты вот это делал?». Если человек осмысленно объясняет все свои действия и подходы, становится очевидно, что он разбирается, и собеседование пройдет значительно быстрее. Тогда интервьюер будет проверять тебя на culture fit и смотреть, нравишься ли ты ему по общению и визуально. Ведь собеседование — это не только хард скиллы.

В общем, если у тебя хорошо развиты гибкие навыки (soft skills), т.е. ты умеешь коммуницировать, и на GitHub-аккаунте есть интересные проекты, ты точно выделишься на собеседовании.

— 3 вопроса, которые бы вы задали кандидату, если бы проводили собеседование на позицию Junior Frontend Developer.

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

• Что такое this (то есть контекст в рамках JavaScript)?

• Что такое замыкание (и, наверное, попрошу рассказать в целом про event loop)?

• Сколько вы знаете способов, как отцентрировать div по центру экрана (включая самые невероятные)?

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

— А бывают случаи life-coding на собеседованиях?

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

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

— Стоит ли идти во Front-End сейчас, когда новоиспеченных фронтендеров становится все больше?

— Здесь нужно в первую очередь понять, нравится ли тебе эта область, потому что идти сюда только на хайпе не стоит. И не нужно надеяться, что учиться будет легко: везде на старте сложно и больно. Я своих студентов на курсе сразу приучаю к тому, что халявы не будет.

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

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

— А как сейчас обстоят дела с вакансиями по Front-End?

— Понятно, что на сегодняшний день бизнесу тяжело и набор приостановлен или снижен. Но, если у вас есть возможность получать доход на текущем месте работы и параллельно еще прокачиваться в новой сфере, обучайтесь и ждите своего часа. Всегда найдется какая-нибудь вакансия и откроется новый проект. Этот застой не может длиться вечно. В начале пандемии тоже был спад, но все осознали, что можно эффективно работать удаленно, и начался подъем. Опять же, бизнес — это очень живой организм, который адаптируется ко всему. Рано или поздно наступит момент, когда начнут открываться проекты и понадобятся новые люди. Что-то спрогнозировать я не могу, но нужно хвататься за то время, какое есть. Если у тебя есть желание развиваться, развивайся и учись прямо сейчас. Ты найдешь свою работу, даже если сначала будешь делать проекты на фрилансе. Но, когда снова наступит рост, тебе будет проще найти работу и выделиться на фоне остальных благодаря своим pet-проектам.

— А в процессе обучения Frontend-разработке в IT-Academy студенты тоже создают свои проекты?

— Да. Многие мои студенты выкладывают свои портфолио с проектами, сделанными на курсе, и потом эти портфолио уже обрастают новыми проектами. Также никто не мешает развивать дальше свой итоговый проект: выучил после курса что-то новое — добавил туда новую фишку.

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

— Вы ведете 2 курса «Разработка веб-сайтов на HTML, СSS и Javascript» и «Разработка веб-приложений на JavaScript». Что изучается на каждом курсе?

— Есть три кита, на которых стоит фронтенд, — HTML, CSS и JavaScript.  Первый курс я сравниваю со школой, где тебя учат основам — циферкам и буковкам, т. е. как считать и читать. Сначала ты изучаешь HTML и СSS, дальше идет небольшой ознакомительный блок с JavaScript. Это, так сказать, начальная программа до 5 класса включительно. Затем идет старшая школа, когда только появляются страшные геометрия, биология, физики и химия и становится немного сложнее. Т.е. на втором курсе уже идет изучение программирования: структуры данных, общий объектно-ориентированный подход, архитектурные паттерны, как работает браузер и т. д. Это уже программа по 11-й класс. Получается, что Front-end 1 + Front-end 2 — это ваше школьное образование. Это образование дает возможность поступить в любой университет, то есть выбрать любой фреймворк и любое направление: бэкенд-разработку, тестирование или фронтенд на React или Angular, да хоть уйти в мобильную разработку (React-native и Flutter могут с этим помочь). Поэтому, если нет структурированных знаний по верстке, начинай с базового курса «Разработка веб-сайтов на HTML, СSS и Javascript» (Front-end 1), где идет обучение с нуля. Данный курс дает полное представление о том, как работают сайты и из чего они состоят. На нем ты сможешь сверстать свой первый сайт. Если уже есть крепкие знания верстки, тогда можно идти на «Разработку веб-приложений на JavaScript» (Front-end 2) . Но здесь некоторые слушатели сталкиваются с проблемой: как правильно оценить свои знания. Потому что иногда приходят студенты, которые утверждают, что уже знают верстку. Но после первых занятий я понимаю, что они знают её плохо и им нужно еще дочитывать и разбираться в нюансах. Есть и такие студенты, которые, чтобы сэкономить, идут сразу на профессиональный курс и после 2-3 занятий осознают, что не могут потянуть этот курс и уходят, не осознавая, что заняли чье-то место.

— А как студенту оценить свои возможности максимально адекватно, прежде чем идти на курс «Разработка веб-приложений на JavaScript»?

— Я подготовил небольшой тест с каверзными вопросами для тех студентов, кто хочет попасть сразу на Front-end 2. Если человек набирает определенное количество баллов, это значит, что нужные базовые знания есть. Может, и не глубокие, но их можно использовать на профессиональном курсе и двигаться дальше.

— Каких слушателей рады видеть на курсах?

— За 5 лет у меня были абсолютно разные слушатели. Но самые классные студенты – заинтересованные и замотивированные. Я всегда сравниваю обучение на курсах со спортзалом: ты можешь купить абонемент, но, если ты не занимаешься с полной отдачей и рвением в спортзале, никакого эффекта не будет. То же самое и с учебой на курсе. Я как тренер в зале: помогаю, рассказываю, направляю если ты хочешь учиться и занимаешься. Если студент проявляет любопытство, я ему даю сверх того, что есть в базе самого курса. Но есть те, кто приходит с подходом «я заплатил, поэтому учите меня», но сам не прикладывает никаких усилий и зачастую потом возмущается. Здесь становится очень тяжело уже на уровне общения, потому что человек неправильно сопоставляет ожидания от курса с реальностью. Я жду голодных до знаний студентов, которые готовы эти знания «выгрызать» из тебя.

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

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

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

Сделать первые шаги в одно из самых топовых направлений разработки можно на курсах по Front-End в IT-Academy.