Как освоить фронтенд-разработку в 2022 году: дорожная карта

Главное из статьи:
- Фронтенд строится на трёх основах: HTML (каркас), CSS (стилизация) и JavaScript (логика и интерактивность)
- Из фреймворков обязательно освоить хотя бы один: React, Vue.js или Angular
- TypeScript стал стандартом индустрии — без него сложно устроиться на работу
- Важно знать инструменты: Git, npm/yarn, ESLint, Prettier, webpack/ESBuild
- Современный фронтенд требует понимания SSR, PWA, CI/CD и основ веб-безопасности
- GraphQL заменяет REST как основной способ работы с API на фронтенде

Как стать фронтенд-разработчиком и что изучать в 2022 году? В этом поможет разобраться дорожная карта по фронтенду:

Также мы попросили Senior Frontend-разработчика Евгения Козака поделиться опытом в области фронтенд-программирования в 2022 году, и он открыл немало интересных новинок, которые мы включили в обновлённый вариант нашей статьи.

1. HTML
2. CSS
3. JavaScript
4. Веб-безопасность
5. Инструменты
6. Фреймворки
7. GraphQL
8. Тренды 2022 года и 2023 года
9. Заключение

Как и прежде, фронтенд-разработка стоит на трёх китах — HTML, CSS и JavaScript, поэтому с них и начнём разбор.

HTML

Без понимания разметки дальше не продвинуться, ведь это каркас сайта. Вы должны изучить базовые теги и атрибуты, понимать анатомию HTML-разметки, а также быть в курсе доступности и основ SEO. Не забывайте и об HTML5 — пятой версии, которая встречается в требованиях каждой первой вакансии. Развитие HTML нельзя назвать быстрым, поэтому у вас будет большое преимущество, если вы уже знаете язык разметки.

Материалы для изучения HTML:

• Основы HTML
• Книга Марка Пилгрима "Погружение в HTML5"
• Порядок выполнения скриптов в HTML
• Видеокурс "HTML5 для начинающих"

CSS

Также важно научиться стилизовать элементы с помощью CSS и делать это правильно, например повторно используя стили для одинаковых элементов. Сперва освойте блочную модель и позиционирование содержимого — компоновку, выравнивание и центрирование элементов, а также их видимость. Почитайте об адаптивном и отзывчивом дизайне. Далее переходите к медиа-запросам, чтобы учитывать технические параметры различных устройств. Неплохим бонусом станет навык работы с CSS Grid и Flexbox. После углубляйте знания, изучая архитектуру и препроцессоры.

Евгений Козак

Senior Frontend Developer, Shell

Что касается фреймворков, раньше был очень популярен Bootstrap, но сейчас многие отходят от него и используют TailwindCss. Получается что ты не пишешь CSS, а пишешь просто классы. Он очень удобен для работы в React. Также Bulma и MUI.

В общем кроме этого CSS ещё надо выучить всё, что вышло в 2022 году — там есть некоторые маленькие изменения. И нужно погрузиться в CSS фреймфорки, потому что в реальности в CSS уже мало кто пишет, даже в SASS уже не пишут в CSS.

Потому что во фронтенде это не будет например, обычный CSS, это уже будет SPA, и автоматом в топе идёт React, потом идёт Vue.js, AngularJS. И для всех них есть Tailwindcss, MUI и Bootstrap.

С CSS ситуация такая что, к сожалению, вряд ли уже придётся на нём писать, но работать с этими фреймворками (Tailwindcss/TailwindUI, Bulma, MUI) будет нужно. Их довольно легко освоить.

Материалы для изучения CSS:

• Основы CSS
• Функциональный CSS: упрощаем работу со стилями
• О CSS Grid и Flexbox простыми словами
• Игра-практика Grid Garden и CSS Diner
• 18 советов по CSS, которые сделают жизнь разработчика проще

Чтобы получить первые практические навыки в работе с HTML и CSS, следует сверстать несколько страниц: это можно сделать как по шаблонам из приведённых статей, так и написать полностью самостоятельный проект.

JavaScript

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

Так, вам потребуется освоить синтаксис и базовые конструкции. Обратите внимание, что JavaScript — язык со слабой типизацией, то есть выполняет неявное преобразование типов автоматически. Это значит, что вы можете написать что-то вроде 10+"1" и не получить никакой ошибки. Напротив, результат будет строкой — 101. Вы можете почитать об этом подробнее в большом исследовании под названием WTF JavaScript.

Ну а мы вернёмся к дорожной карте по фронтенд-разработке. Важно освоить DOM, интерфейс для работы с HTTP-запросами и ответами Fetch API, технологию AJAX и XMLHttpRequest, ECMAScript 6+, модульный подход и веб-компоненты. Также пробегитесь по перечисленным концепциям вроде строгого режима и теневого DOM.

Евгений Козак

Senior Frontend Developer, Shell

У JavaScript есть ESversion но в каждый год появляется всё больше нового.

Вот что актуально и важно на момент 2022 года:

• ES6: стрелочные функции, block scoped(const, let), Set, spread, rest, default params, for of, for in, modules, Symbol, Class, promises, includes.
• ES8: padEnd, padStart, async/await. Для работы с объектами очень помогают: object.entries, object.values, object.keys.
• ES9: RegEx improvements, rest, spread.
• ES10: array.flat(), array.flatMap(), trimEnd(), trimStart() упрощают работу с array.
• ES2020: matchAll, BigInt, Dynamic Import, Promise.all, Promise.any, Promise — finally(spinner), globalThis. Optional chaining (bill?.bank?.age).
• ES2022: private variable in class; top level await: async without await in; array.at(index); Object.hasOwn(); RegExp Match Indices.

Материалы для изучения JavaScript:

• 7 главных книг для Javascript-разработчика
• Основы JavaScript + jQuery
• Современный учебник JavaScript
• Подборка книг для начинающего веб-разработчика
• Топ-5 JavaScript-библиотек для бизнес приложений в 2020-2021

Веб-безопасность

Знаете, что такое OWASP? Это открытый проект, собирающий статистику и направленный на обеспечение безопасности веб-приложений. Чтобы стать фронтенд-разработчиком в 2022 году, нужно уделять особое внимание безопасности. Хоть способов обезопасить себя и становится больше, но злоумышленники тоже не стоят на месте.

Итак, вам нужно понимать преимущества HTTPS перед HTTP, принцип работы CORS, политику защиты контента (CSP), а также регулярно следить за обновлениями на сайте OWASP.

Почитайте наши статьи о том, как защитить веб-приложение и какие инструменты для пентеста используют специалисты в сфере ИБ.

Инструменты

Здесь всё просто:

• Освойте работу с системой контроля версий Git и выберите удобный сервис для хостинга проектов.
• Пользуйтесь линтерами и форматерами для улучшения качества кода.
• Для сборки используйте таскраннеры и бандлеры.
• Возьмите в привычку работать с менеджерами пакетов npm и yarn.

Подробнее о таскреннерах и бандлерах можно узнать из данного видео:

Фреймворки

3 основных фреймворка в работе с фронтендом: React, Angular, Vue.js.

Хорошее сравнение можно найти в этой статье. Для тех, кто желает освоить React с нуля, предлагаем понятную дорожную карту по React-разработке.

Евгений Козак

Senior Frontend Developer, Shell

К 2022 году React тоже изменился:

1. Появился React 18: Server Side Rendering, Concurrent mode, useId.
2. React Testing Library.
3. Стал популярен React Native.
4. Headless CMS — это cms для того чтобы редактировать контент. Админка как у WordPress, только для React. Чтобы использовать бэкенд, например. Тоже стало популярно в последние годы.
5. Server Side Rendering — о нём тоже важно знать.
6. Есть React Hooks, которые нужно знать.

Стоит также упомянуть о Storybook.js, Jest и Cypress.

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

GraphQL

Это основной язык API-запросов фронтенд-разработчиков. Платформа Apollo в свою очередь представляет собой реализацию GraphQL для транспортировки данных из облака к UI веб-приложения, а Relay Modern — это фреймворк, использующий GraphQL и предназначенный для работы с data-driven приложениями.

Держите руководство по GraphQL для начинающих.

Евгений Козак

Senior Frontend Developer, Shell

Тренды 2022 года и 2023 года

В JavaScript это: S.O.L.I.D, KISS, YAGNI.

Также любой фронтендщик должен знать что такое и как работают: CI/CD, Kubernetes vs Docker, Azure Cloud Service, GitHub Actions.

Также нужно отметить такие моменты:

• Программист должен знать Accessibility (a11y). Это делает возможным работу с сайтом для людей с ограниченными возможностями.
• Progress Web Application — этому тренду уже 2 года. Любое SPA-приложение, JavaScript-приложение должно быть PWA. Там есть гайдлайн, который надо знать.
• Также для любого SPA-приложения нужно знать: State Management — Redux.
• А также Server Side Rendering.
• Важно знать, что такое Web Components, так как уже как 2 года они популярны.
• Важно знать что такое в JavaScript JAMStack.
• Программист должен знать как работают Serverless model: Amazon AWS Lambda, Azure Functions, RxJs, Web components, JAMstack, Atomic design, Component-driven development.
• Должны знать ESBuild. Это как webpack, но работают быстрее.
• И самое крупное изменение к 2022 году это Web 3.0. Это работа с metamask.

TypeScript

TypeScript очень популярен. Это другой тренд и его надо изучать. Без этих знаний уже вряд ли будут готовы принять на работу.

Вводный курс по TypeScript

tproger.ru

Наглядно о принципах DRY, KISS, YAGNI, SOLID:

Заключение

Итак, чтобы стать фронтенд-разработчиком в 2022 году, следует хорошо владеть HTML, CSS и JavaScript, уметь обеспечивать безопасность веб-приложений, владеть основными инструментами, такими как Git, Prettier, ESLint, npm scripts и webpack, изучить хотя бы один из основных JavaScript-фреймворков и получить навык работы с GraphQL. Но ни в коем случае не останавливайтесь на этом. Например, всё чаще компании нанимают именно фулстек-девелоперов, поэтому рекомендуем также ознакомиться с дорожной картой по бэкенд-разработке и роадмапом по JavaScript.

Часто задаваемые вопросы

Сколько времени нужно, чтобы стать фронтенд-разработчиком?

При регулярных занятиях (3-4 часа в день) освоить базу HTML, CSS и JavaScript можно за 4-6 месяцев. Ещё 3-4 месяца уйдёт на изучение фреймворка и инструментов. Итого до уровня Junior — около 8-12 месяцев целенаправленного обучения.

Какой JavaScript-фреймворк выбрать первым?

React остаётся самым востребованным на рынке труда. Vue.js проще в изучении и имеет отличную документацию на русском языке. Angular лучше подходит для крупных корпоративных проектов. Для первого изучения рекомендуется React или Vue.js.

Нужно ли учить TypeScript начинающему фронтендеру?

Да, TypeScript стал фактическим стандартом во фронтенд-разработке. Большинство вакансий требуют знание TypeScript. Рекомендуется сначала хорошо освоить JavaScript, а затем перейти к TypeScript — переход будет естественным и несложным.