Дорожная карта Фронтенд-разработчика

Сегодня Михаил Непомнящий, автор популярных курсов на Stepik: «Фундаментальный JavaScript» и «React для современных веб-приложений», поделится секретами о том, как начать свой путь в мире фронтенд-разработки и что нужно учесть, чтобы стать успешным специалистом.

Вот вы решили вступить на путь айтишника и выбрали направление веб-разработки, причём той его части, что связана с визуальной составляющей. Фронтенд одним словом.

Короткий поиск в сети позволяет найти всевозможные карты движения в этом направлении (например, такая roadmap.sh/frontend). Однако беглого взгляда на них зачастую бывает достаточно, чтобы отказаться от идеи стать разработчиком. Давайте будем откровенны, иногда даже опытный специалист может не знать от трети до половины того, что можно встретить в подобных рекомендациях.

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

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

Люди приходят в IT-школы с разной предысторией и подготовкой. Кто-то с малых лет был приучен к компьютеру, обращается с ним на «ты» и даже успел попрограммировать в средней школе, а кто-то в лучшем случае умеет открыть браузер и перейти на пару знакомых сайтов.

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

Для кого-то может звучать смешно, но опыт показывает, что многим это даётся с трудом.

Хорошо, если имеется опыт работы с офисными приложениями вроде Word и Excel. Оно необязательно, но в дальнейшем может облегчить понимание работы с визуальной составляющей (при работе с текстом, например) и базовыми алгоритмическими действиями (как то суммирование значений ячеек в таблице).

Владение Интернетом должно быть на уровне уверенного поиска (он реально пригодится даже при наличии чатов GPT), электронной почты и поиска в ней. Важно уметь пользоваться программами для видеозвонков (Skype, Zoom или Телемост), уметь настраивать в них камеру и микрофон, уметь делиться экраном.

Опыт работы с сервисами вроде Google Drive или Яндекс.Диск с синхронизацией данных между устройствами также определенно будет полезен. Готовая ментальная модель по синхронизации данных заметно упростит дальнейшее понимание айтишных фокусов.

Ну и конечно, это владение клавиатурой. Чтобы не водить носом в поисках нужной кнопки, печатать хотя бы четырьмя пальцами (а в идеале всеми десятью, не глядя вниз) и уметь пользоваться базовым набором «горячих» клавиш.

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

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

Когда мы говорим про фронтенд, то всё, как правило, начинается с основ HTML и CSS. Стилизация — штука довольно глубокая, и это нормально чего-то не знать, добирая по мере решения конкретных задач. Но необходимый уровень — это умение верстать по дизайнерским макетам. Верстать одинаково хорошо под телефоны, планшеты и десктопы.

Каждый новый макет будет ставить свои вызовы, а вместе с ними будет приходить понимание того «как надо». На первых порах можно верстать «на глазок», не глубоко вдаваясь в детали. Постепенно прояснятся задумки дизайнера и основ того, что называется UX/UI (т.е. пользовательский опыт и интерфейс пользователя). Здесь хорошей привычкой станет обращение внимания на детали интерфейса тех сайтов и приложений, которыми вы пользуетесь.

Для добавления интерактивности приложениям повсеместно используется JavaScript. И это главный рабочий инструмент фронтенд-разработчика. А значит, его основы надо знать очень хорошо: работу с разными типами данных, умение крутить-вертеть массивы и объекты как угодно, писать функции разного уровня сложности, делать сетевые запросы и реагировать как на браузерные события (загрузка страницы, таймеры, получение данных и т.д.), так и на пользовательское поведение (клики, печать, скролл и пр.).

Для закрепления навыков в JS подходит как решение задачек на CodeWars.com, так и верстка тех же макетов, где используются интерактивные элементы (модальные окна, слайдеры, интеграции с внешними сервисами и многое другое). На сайте frontendmentor.io можно найти большое количество подобных задачек, в том числе и бесплатно.

По сути, это трио — HTML, CSS и JavaScript — залог успеха. Уверенное владение каждым из них заметно упростит дальнейшее обучение и развитие в профессии. Последующие технологии могут сильно варьироваться и в основном будут базироваться на этих трёх.

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

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

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

И для профессиональной работы нужны дополнительные навыки. Здесь ещё большее количество инструментов, выбор фреймворка (по сути, абстракция над JavaScript) и большая скрупулезность при работе с макетами.

Из инструментов понадобится базовое владение NodeJS (в двух словах это среда выполнения JavaScript кода за пределами браузера), а именно пакетный менеджер npm на уровне создания проекта, установки зависимостей и запуска скриптов. Нужно понимание семантического версионирования (semver), которое используется у любой внешней библиотеки. Плюс к Git’у добавится удалённый сервис по работе с репозиториями, например, GitHub. И чтобы работать с ним комфортнее и безопаснее, потребуется базовое владение шифрованием (SSH).

Кстати, GitHub может стать отличным вариантом для формирования портфолио. Сам сервис будет хранить кодовую базу, а его дополнение GitHub Pages позволит опубликовать готовое фронтенд приложение.

Для более детальной вёрстки понадобится покопаться с графическим редактором. Сегодня стандартом стала Figma. Впрочем её движение в сторону коммерции вынуждает людей более активно использовать вспомогательные инструменты, вроде Zeplin.

Что же касается фреймворка для JavaScript, здесь выбор будет сильно зависеть от потребностей рынка, на котором вы планируете работать. По миру самым популярным решением является React, но есть страны или даже конкретные регионы внутри отдельно взятой страны, где предпочтение отдадут Vue или Angular. С каждым годом растёт популярность Svelte, выходит множество других альтернатив.

Чтобы не потеряться и не учить всё подряд, начинаем с поиска вакансий в своём регионе и смотрим требования. Не стоит пугаться их обилия — знать процентов 40-50 будет уже большим успехом. Остальное просто пространство для роста. Всё-таки главное это понимание, какой фреймворк наиболее популярен и уже учить его, создавая на нём несколько проектов, которые не стыдно будет показать рекрутерам.

Попутно с фреймворком понадобится разобраться с управлением состояния приложения (т.е. то, как мы будем учитывать всё, что накликал пользователь и какие данные уже были получены). Здесь выбор будет сопряжен с фреймворком: в мире React — это чаще всего Redux, в мире Vue — Vuex. Есть и более простые и универсальные решения, вроде Zustand, и на начальном этапе можно обойтись им.

Наконец, работая с фреймворком, вам не обойтись без темы сборки приложения. Исторически наиболее популярным решением здесь является Webpack, но я бы рекомендовал посмотреть в сторону Vite. Он проще и быстрее, а главное, позволит уловить базовые концепции того, что же такое та самая сборка — что, как и во что собирается.

Ядром к вышесказанному будет именно JavaScript-фреймворк, а остальное пойдет бок о бок с ним. И когда мы сформировали портфолио своих работ на базе фреймворка, попутно прочувствовав, что мы действительно уже что-то можем и готовы на подвиги, можно смело идти на рынок.

С нахождением первой работы процесс обучения не останавливается, а становится даже более значимым. Многому приходится учиться буквально каждый день, в том числе узнавать о процессах работы команды, внутренних особенностях использования тех или иных инструментов. Здесь важно не бояться задавать вопросы.

Нахождение на проекте откроет новые горизонты в обучении. Что-то понадобится подтянуть под текущие нужды, с чем-то познакомиться для дня грядущего. Например, при работе со стилями часто вместо «ванильного» CSS используют какой-то инструмент. Таковых много, и можно попробовать изучить их заранее. Но куда важнее на предыдущих шагах знать сам CSS. Так как любую абстракцию всегда легче освоить при надёжном фундаменте.

Поэтому не стремитесь выучить SCSS, PostCSS, BEM, Tailwind, CSS-in-JSS и так далее. Высока вероятность, что это окажутся CSS-модули, где особых сложностей не возникнет. А вот упущенное время на якобы трендовые направления уже не вернуть, и лучше потратить его на что-то фундаментальное и на закрепление практикой.

С JavaScript тоже не всё так очевидно. Сегодня всё чаще на проектах используется его типизированный вариант — TypeScript. Можно попробовать освоить его до входа в профессию, но полно вакансий, где он либо вовсе не требуется, либо не является обязательным. Т.е. часто предполагается, что типизация будет освоена уже по ходу дела.

То же касается вопросов тестирования. Не то, чем занимаются тестировщики, а написание unit-тестов к своему приложению. Здесь также можно столкнуться с тем, что на проекте тесты не пишут. Но для профессионального роста эту тему изучить понадобится.

В некоторых компаниях помимо основного фреймворка (React, Vue или иного) может использоваться и так называемый мета-фреймворк, добавляющий больше возможностей (для React это NextJS, для Vue — Nuxt). Но вновь, как и со стилизацией, высока вероятность, что вы с ним не столкнётесь, а при уверенном владении фреймворком его мета-надстройка станет лишь приятным дополнением.

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

Наконец, развитие программиста на пути к позиции «старший разработчик» (он же senior) сложно представить без принципов SOLID и ряда других лучших практик (чистый код, паттерны проектирования и т.д.).

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