Путь веб разработчика или web developer roadmap

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

Интернет

• Как работает интернет
• Что такое HTTP
• Что такое доменное имя
• Что такое хостинг
• Что такое DNS и как они работают
• Понимание работы браузера

HTML

• Структура документа, основные теги, атрибуты, формы, семантические теги, комментарии, стили, скрипты.
• Валидация полей формы, встраивание мультимедиа, адаптивность, API браузера, инструменты отладки.
• Рисование графики с помощью svg и canvas, Shadow DOM, HTML-шаблоны, оптимизация для SEO, доступность.

CSS

• Позиционирование, Flexbox, Grid, CSS переменные.
• Кроссбраузерность, адаптивный дизайн, медиа-запросы.
• Архитектура BEM, приоритетность стилей, анимация.
• Препроцессоры CSS: SCSS и подобные.
• Фреймворки CSS: Tailwind и подобные.
• Критические этапы рендеринга, оптимизация.

JavaScript

• Объявление переменных, hoisting, операнды, операторы, деструктуризация/rest/spread, область видимости, циклы, стрелочные функции, понимание модульности: import/export.
• Типы данных, приведение типов, копирование объектов, запрет модификации объекта.
• Методы строк, чисел, объектов, массивов. Мутабельные/иммутабельные методы.
• Манипуляции с DOM, работа с событиями: распространение событий, перехват, обработка, отмена.
• Получение данных: Fetch API, Ajax, XmlHttpRequest.
• Асинхронность: процессы, потоки, конкурентность, цикл событий, async/await, Promise, AbortController.
• Класс: функция конструктор, this, геттеры/сеттеры, call/bind/apply, создание экземпляров, дескрипторы, флаги, квантификаторы, наследование, переопределение, инкапсуляция, статические свойства, полиморфизм, коллекции Set/Map/WeakSet/WeakMap.
• Чистые функции, функции высшего порядка, замыкания, рекурсии.
• Итераторы, генераторы, каррирование, мемоизация.
• Структуры данных: Stack, Queue, Linked List, Set, Hash Table, Tree, Trie, Graph.
• JS scope: Static, Dynamic, Runtime-Augmented. Tail call.
• Фреймворки JavaScript: React, Vue и подобные.

Git - система контроля версий

• Работа с файлами: add, commit, log.
• Работа с ветками: branch, checkout, merge.
• Работа с удалёнными репозиториями: pull, push.
• Разрешение конфликтов слияния.
• Дополнительные команды и функции: diff, reset, cherry-pick.
• Продвинутые темы: stash, rebase.
• Модели ветвлений: Git Flow, GitLab/GitHub Flow.

Инструменты разработки

• Линтеры и форматтеры: ESLint, Prettier.
• Пакетные менеджеры: npm, yarn и подобные.
• Хостинги репозиториев: GitHub, GitLab, Bitbucket.
• Сборщики: webpack, vite или другие. Создание базового конфига.
• Сборщики: написание продвинутого конфига, внедрение конфига в проект.

Тестирование

• Проверка корректности отображения элементов интерфейса на разных устройствах и браузерах.
• Покрытие unit-тестами: позитивные, негативные сценарии, использование mock и снапшотов.
• Тестовые фреймворки: Jest, Mocha, Jasmine и подобные.
• Интегрирование тестирования в процесс разработки, например CI/CD.
• Инструменты автоматизации для End-To-End тестирование: Selenium, Cypress, TestCafe, Puppeteer и подобные.

Typescript

• Типы данных, аннотации к переменным, литеральные типы.
• Тип и интерфейс: наследование, имплементация, объединение, пересечение, условные типы, infer. Enum.
• Типизация функций: типизация аргументов, возвращаемого значения, rest параметров, перегрузка функций, типизация асинхронных функций, типизация анонимных функций.
• Типизация классов, модификаторы доступа свойств и методов. Наследование, инкапсуляция, статичность.
• Типизация объектов: необязательные свойства, readonly свойства, literal inference - буквальный ввод, mapped types - сопоставленные типы, переназначение ключей с помощью as.
• Типы утверждения: оператор as, оператор ненулевого утверждения - postfix !. Кастование типов, операторы keyof, typeof. Type guard - сужение диапазона типов для значения.
• Дженерики: указание типа по умолчанию, работа с функциями, интерфейсами, классами, DOM элементами, ограничение типов дженерика.
• Утилиты, декораторы, пространство имён.
• Настройка tsconfig.

Стратегии аутентификации

• Базовая аутентификация
• Аутентификация на основе сеанса
• Аутентификация на основе токенов
• Аутентификация JWT
• OAuth
• SSO (Single Sign-On)

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

• HTTPS и TLS для безопасной передачи данных
• CORS
• Реализация политики безопасности контента (CSP)
• Алгоритмы хеширования
• OWASP
• Предотвращение межсайтового скриптинга (XSS)
• Защита от SQL-инъекций
• Смягчение последствий подделки межсайтовых запросов (CSRF)
• Безопасная аутентификация и управление сеансами
• Валидация и очистка входных данных
• Защита от кликджекинга
• Безопасная обработка файлов cookie

Производительность

• Метрики веб-производительности.
• Оценка производительности с помощью DevTools Performance, Network.
• Управление кэшированием на стороне клиента.
• PRPL Pattern, модель RAIL.
• Оптимизация веб-приложения по рекомендациям Lighthouse.
• Оптимизация рендеринга, бандла. Обнаружение и борьба с утечками памяти.
• Работа с CDN

API Браузера

• Device Orientation
• Storage
• Location
• Notifications
• Credentials
• Payments
• Web Sockets
• Server Sent Events
• Service Workers

Мобильные и десктопные приложения

• PWA
• React Native
• Ionic
• Electron
• Tauri
• Flutter

Docker и CI/CD

• Принципы и задачи CI/CD.
• Основы Docker: Docker Image, Docker Volumes, консольные команды.
• Написание конфига CI/CD в GitLab.
• Написание конфига для билда фронтового приложения внутри Docker контейнера.
• Написание конфига для билда микросервисного приложения.

Серверные технологии

• Принципы клиент-серверной архитектуры. Разновидности веб-клиентов. Виды технологий реализации веб-сервера.
• Структура запроса: URI, методы, параметры, тело запроса, заголовки, коды ответов. CRUD-операции. Архитектура REST API, отличие от SOAP. Схема кодирования JSON.
• Open API Spec (Swagger)
• Node.js: работа с Express.js, роутинг.
• Нереляционные базы данных: MongoDB, Redis и подобные.
• Реляционные базы данных: PostgreSQL, MySQL и подобные.
• Рендеринг на стороне сервера (SSR или Server-Side Rendering): NextJS, NuxtJs и подобные.
• Статическая генерация страниц (SSG или Static Site Generators): NextJS, NuxtJs и подобные.
• Nginx: конфиг, кеширование, логирование, проксирование, управление памятью.
• Другие технологии: WebSocket, Push-уведомления, GraphQL, gRPC, Hateoas.

Процессы и стандарты

• Чистый код: наименование классов, методов, переменных должны отображать смысл решаемой проблемы, намерения разработчика.
• Рефакторинг в пределах функции, метода, класса. Комментирование функций, методов, классов.
• Отладка: использование breakpoint в IDE и браузере, изменение значений переменных в runtime, сброс фрейма, чтение stacktrace.
• Принципы проектирования ООП: SOLID, DRY, KISS, YAGNI. Паттерны проектирования: Singleton, Factory, Decorator и прочие.
• Предложения по развитию проекта. Наставничество и ревью кода младших специалистов.
• Мониторинг: сбор метрик с помощью Prometheus, логирование, построение дашбордов в Grafana, использование агрегатора ошибок Sentry.
• Инициативы по изменению технологий и правил разработки, ответственность за рефакторинг кода проекта. Рекомендации по изучению технологий младшим специалистам. Проведение аттестаций.
• Реинжиниринг: смена фреймворков, парадигм, разделение монорепозиториев на несколько независимых приложений. GRASP.
• Проектирование и архитектура ПО: чистая архитектура, монолитная архитектура, сервисно-ориентированная архитектура, микросервисная архитектура. Паттерны MVC, MVVM, MVP.
• Взаимодействие с продукт-менеджером, подсвечивание проблем на проекте. Разбор инцидентов и проработка способов их предотвращения. Проработка стандартов и правил разработки.