Сколько бы раз я ни смотрел RoadMap для начинающих фронтендеров, всегда натыкаюсь на одну проблему: RoadMap, как правило, — просто свалка технологий, которую можно описать одной фразой: "Учи всё, что есть". Но так ли это? Нужно ли учить всё это в самом начале? Давайте отбросим большую схему с технологиями в сторону и поговорим начистоту.

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

1. Теория о веб-разработке

2. Верстка

3. JavaScript

4. Первый фреймворк

Теория о веб-разработке

Для начала надо разобраться, кем мы вообще собираемся работать и чем предстоит заниматься. Как устроено взаимодействие в классической команде? Как происходит коммуникация между сотрудниками и как ведётся работа над задачами (классический подход с канбанами и менеджерами)?

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

Необходимо базовое понимание работы бэкендерской части: что он там делает и зачем.

Советую также прочитать пару статей о принципе работы поисковой выдачи и основах SEO — это добавит ясности к жизненному циклу фронтенд-приложения (что происходит после того, как мы разработали своё приложение и выпустили его в свет).
Не стоит переживать, если поначалу новая информация будет казаться неподъёмной.

Нужно понять, что в основе каждой "сложной штуковины" стоит кучка незамысловатых концепций.

HTML/CSS

Учим HTML для постройки каркаса страниц. Сразу изучаем семантическую вёрстку. Далее берёмся за CSS. Помимо того, что мы научились делать нашу страницу красивой, нужно научиться делать её адаптивной под разные экраны и браузеры. Здесь нам понадобятся знания о кроссбраузерной и адаптивной вёрстке. Практикуем использование препроцессоров.

JavaScript

По JavaScript послаблений не будет, увы. Смело учим основы. Отдельно хочу остановиться на темах, которым нужно уделить особое внимание:

• Асинхронность (event loop);

• RestAPI;

• Контекст (this);

• Замыкания;

• Реактивность;

• ООП и функциональное программирование;

• События.

Фреймворк

После того как мы более-менее изучили основы JS, пора выбирать наш первый фреймворк для работы над проектами. Идём по проторенной дорожке. Выбираем между двумя простыми для понимания и популярными на рынке фреймворками:

• Vue.js

• React.js

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

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

Обязательные темы для изучения React:

• Основные хуки (useState, useEffect, useMemo, useCallback, useContext, useRef);

• Virtual DOM;

• Оптимизация компонентов (контроль лишних перерисовок);

• Реактивность в React;

• Варианты хранения состояния;

• JSX;

• Слоты;

• Props;

• Роутинг;

• SSR и CSR.

Обязательные темы для изучения Vue:

• Option/Composition API;

• Virtual DOM;

• Оптимизация компонентов (контроль лишних перерисовок);

• Вычисляемые свойства;

• Реактивность в Vue;

• Варианты хранения состояния;

• Хуки жизненного цикла;

• Слоты;

• Props;

• Роутинг;

• SSR и CSR.

State Manager

Стейт-менеджер помогает работать с состоянием компонентов. Это практически основа для работы с данными.

Для React:
Если выбираем React, то сразу после изучения основ практикуем работу с Redux Toolkit (RTK). RTK будет довольно сложным для понимания, но он необходим для работы с более сложными приложениями. Как альтернативу для более лёгких и гибких решений могу предложить Zustand. Но предпочтительнее всё же разобраться с RTK.

Для Vue:
Если выбираем Vue, то сразу после изучения основ практикуем работу с Vuex для Vue 2 и Pinia для Vue 3. У Vue есть своя экосистема, поэтому Vuex и Pinia, по своей сути, не имеют внятных альтернатив. Vuex и Pinia довольно просты, так что разобраться с ними не составит труда.

Самый важный навык

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

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

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

Не старайтесь выучить всё. Прежде чем взяться за очередную тему для обучения, задайте себе не вопрос "Хватит ли этого для устройства на работу?", а лучше задумайтесь: "Почему это работает именно так? Какую проблему это решает?" Такой подход быстро прояснит, что многие технологии, которые навязывает сообщество (в погоне за новизной и крутизной), могут быть не так уж и важны.

Пускай вы не будете уметь настраивать Webpack, зато вы будете писать компоненты для бизнеса, которые оптимально рендерятся на экране конечного пользователя без лишних перерисовок и "дёрганий". Углубляемся, а не распыляемся!

Заключение

Здесь я описал то, что действительно нужно знать начинающему фронтендеру.

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

Ресурсы которые вам понадобятся

Документации

• Vue.js

• React.js

• Javascript

Полезные статьи

• Что учитывать при устройстве на первую работу: часть 1, часть 2

• Как я входил в IT: ссылка на статью

• Какие я совершил ошибки пока распылялся на все подряд: ссылка на статью

• Как удержаться на первой работе и не сгореть: ссылка на статью

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