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

Как стать фронтенд-разработчиком и что изучать в 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.