Фронтенд в 2024: React, AI, jQuery? Большой стрим с Андреем Мелиховым

YOUTUBE · 27.11.2025 03:32

Ключевые темы и таймкоды

Начало стрима

0:00
  • Проверка запуска стрима на разных платформах.
  • Подтверждение запуска стрима в YouTube и ВКонтакте.
  • Подготовка к запуску стрима в Telegram.

Запуск стрима в Telegram

1:49
  • Попытки запустить стрим в Telegram.
  • Нажатие на «вайф стрим аккаунта» и «старт стриминг».
  • Успешный запуск стрима в Telegram.

Эксперимент с мультистримом

2:30
  • Объяснение эксперимента с мультистримом на YouTube, ВКонтакте и Telegram.
  • Призыв к зрителям писать в чатах соответствующих платформ.

Начало обсуждения

4:03
  • Представление ведущего Леши Симоненко и гостя Андрея Мелихова.
  • Объявление темы обсуждения: требования к фронтенд-разработчикам в 2024 году.
  • Обсуждение различий между большими и маленькими компаниями.

Определение фронтенд-разработчика

5:55
  • Вопрос к Андрею Мелихову о определении фронтенд-разработчика.
  • Планирование обсуждения требований к фронтенд-разработчикам и их грейдам.

Определение фронтенда

6:54
  • Фронтенд включает все, что связано с веб-интерфейсами, кроме мобильных и десктопных приложений.
  • В Яндекс все разработчики Node.js считаются фронтендерами.
  • Верстальщики теперь часто относятся к фронтендерам.

Грейды в IT

7:43
  • Грейды делятся на три большие группы: джуниор, мидл, сеньор.
  • Каждая компания имеет свою систему грейдов, иногда с сквозными рядами.
  • Позиция в грейдах может различаться в зависимости от области работы.

Определение грейдов

9:38
  • Джуниор не может самостоятельно выполнить задачу, но может её частично декомпозировать.
  • Мидл может выполнить задачу самостоятельно.
  • Сеньор может объяснить, как выполнить задачу, и обучить других.

Матрицы компетенций

10:46
  • Матрицы компетенций помогают формализовать требования к позициям.
  • Они делятся на хард-стилс технические знания и софт-стилс soft skills.
  • Системный подход к грейдам позволяет избежать ситуаций, когда человек с глубокими техническими знаниями остаётся на уровне мидл из-за недостаточных софт-навыков.

Технические компетенции фронтендеров

12:38
  • Базовые навыки: JavaScript, общая теория программирования, структуры данных.
  • Специализированные навыки: HTML, CSS, семантика, доступность, формы, валидация, графика.
  • Методологии: BEM, компонентное мышление.

Микроразметка и SEO

16:31
  • Микроразметка включает Schema.org, Open Graph, RDFa и другие форматы.
  • Понимание микроразметки важно для SEO-оптимизации.
  • Знания микроразметки набираются через решение задач.

Основы CSS

17:33
  • Основные принципы CSS: каскадность, наследование, специфичность.
  • Эти принципы лежат в основе работы с HTML и CSS.

Основы CSS

17:52
  • Обсуждение специфики и наследования в CSS.
  • Упоминание о понимании сеток, флексов и прототипирования.

Адаптивность и препроцессоры

18:37
  • Размышления об адаптивности на уровне джуна.
  • Решение не включать адаптивность в базовый уровень.
  • Обсуждение использования препроцессоров в проектах.

Дополнительные навыки

20:02
  • Вопрос о необходимости знания шрифтов и анимации для фронтенд-разработчика.
  • Призыв к зрителям в чате предложить дополнительные навыки.

Базовые знания JavaScript

21:38
  • Обсуждение базовых механик JavaScript: область видимости, замыкания, типы данных.
  • Важность понимания объектов и примитивов.

Функции и замыкания

24:11
  • Различие между анонимными и стрелочными функциями.
  • Базовое понимание замыканий для фронтенд-разработчика.

Объектно-ориентированное программирование

25:47
  • Обсуждение необходимости знания классов и прототипов.
  • Работа с классами в контексте React.

Модель событий и браузерные API

28:08
  • Введение в модель событий в JavaScript.
  • Перенос обсуждения браузерных API в отдельную категорию.

Браузерные API и кросс-браузерность

33:02
  • Общее понимание браузеров и их версий.
  • Проблемы, связанные с старыми браузерами.
  • Обобщение знаний о кросс-браузерности.

Завершение обсуждения

34:04
  • Призыв к зрителям предложить дополнительные навыки для джунов.

Функции и ES Modules

34:25
  • Обсуждение функций, которые сами запускаются, и их использования в коде.
  • Упоминание о ES Modules и их применении на уровне джуна.
  • Процесс создания и обсуждения матриц компетенций.

Методология и базовые навыки

35:24
  • Важность методологии в разработке.
  • Необходимость включения понимания ES Modules в базовые навыки.
  • Различие между CommonJS и ES Modules.

Синхронность в JavaScript

36:23
  • Объяснение важности понимания асинхронности в JavaScript.
  • Влияние окружения на работу с асинхронными запросами.
  • Добавление понимания синхронности в базовые навыки.

Компьютерные науки

37:15
  • Основные структуры данных и алгоритмы.
  • Алгоритмическое мышление и его применение.
  • Пример из Pascal для понимания алгоритмов.

Сети и браузеры

40:43
  • Объяснение работы сетей на примере браузера.
  • Уровни модели OSI.
  • Влияние понимания сетей на разработку.

Культура кода

42:07
  • Важность читабельности и структурированности кода.
  • Примеры: короткие функции, понятные названия переменных.
  • Участие в код-ревью.

Безопасность

43:29
  • Необходимость базового понимания безопасности.
  • Различия между протоколами и уязвимостями.
  • Уровень требований к безопасности для джунов.

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

44:53
  • Понимание основ тестирования, включая кросс-браузерность.
  • Изоляция и воспроизведение проблем.
  • Базовые навыки тестирования для джунов.

Крупные проекты

48:16
  • Необходимость понимания крупных проектов.
  • Работа с CI/CD и пуриквестами.
  • Проверка прохождения тестов.

Базовые навыки работы с Docker и тестирование

48:52
  • Умение работать с Docker и заворачивать приложения в контейнеры.
  • Понимание работы с pull-запросами и красными тестами.
  • Важность базового умения тестировать вручную.

Экосистема JavaScript и TypeScript

49:51
  • Необходимость знания экосистемы JavaScript: фреймворки, билды, package managers.
  • Адаптация TypeScript на рынке и его важность для фронтенд-разработки.
  • Базовое понимание статической типизации и работы с TypeScript файлами.

Современные фреймворки

51:39
  • Обзор популярных фреймворков: React, Angular, Vue.
  • Использование библиотек компонентов на React в компаниях.
  • Рекомендация изучить несколько фреймворков для расширения навыков.

Package managers и build tools

54:04
  • Знание базовых и дополнительных вариаций package managers.
  • Понимание работы сборщиков и преобразования файлов.
  • Инструменты для сборки проектов, такие как Webpack и Next.js.

CSS и CSS frameworks

56:18
  • Знакомство с подходами к CSS в фреймворках.
  • Примеры популярных CSS-фреймворков: Bootstrap, Tailwind CSS.
  • Умение использовать и внедрять компоненты фреймворков.

Семантика и доступность

1:00:22
  • Глубокое понимание семантики и связи с юзабилити.
  • Работа с экранными ридерами, клавиатурными командами и фокусом.
  • Оценка контраста и других параметров доступности.

Методологии и адаптивность

1:02:01
  • Микроразметка SEO, каскадные таблицы стилей.
  • Прототипирование сеток и адаптивность на уровне проектирования.
  • Глубокое понимание инструментов для работы с CSS.

Оптимизация графики

1:03:21
  • Базовая оптимизация графики на уровне джуна: правильный выбор формата изображения и его оптимизация.
  • Продвинутая оптимизация: адаптивные изображения, подключение нескольких форматов.
  • От мидла ожидается понимание производительности и оптимизация решений.

Анимации и шрифты

1:05:28
  • Добавление анимаций в базу знаний.
  • Работа со шрифтами на уровне мидла.
  • Мидл-разработчик больше фокусируется на JavaScript-интерфейсе, чем на вёрстке.

Требования в крупных компаниях

1:06:39
  • В крупных компаниях высокие требования из-за большой нагрузки и количества пользователей.
  • В аутсорсе развитие навыков происходит быстрее из-за разнообразия проектов.

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

1:07:49
  • Тестирование выделено в отдельный пункт.
  • Глубокое понимание замыканий и синхронности на уровне мидла.
  • Современные способы упрощения работы с контекстами.

Прототипы и классы

1:10:15
  • Понимание, что классы — это «сахар» над прототипами.
  • Знание статических методов и полей классов.

ECMAScript модули

1:10:48
  • Возможность переписывания CommonJS на ECMAScript.
  • Нюансы работы с синтетическими экспортами.
  • Проблемы совместимости ECMAScript с другими библиотеками.

Типы и дженерики

1:12:39
  • Мидл должен уметь работать с типами и дженериками.
  • Избегание использования `any` на уровне мидла.

Знание фреймворков

1:13:26
  • Хорошее знание фреймворка включает понимание его развития, версий и отличий.
  • Быстрое изучение новых фреймворков.
  • Не бояться смены фреймворков.

Универсальность

1:16:06
  • Понимание общих подходов в разных фреймворках.
  • Базовые знания других фреймворков.
  • Готовность к изменениям в экосистеме.

Диалог о диай в тайп-скрипке

1:16:42
  • Обсуждение понятия «диай» в тайп-скрипке и его связи с интерфейсами фронтами.
  • Упоминание о необходимости знания паттернов на уровне мидла.

Паттерны проектирования

1:17:34
  • Обсуждение паттернов: синглтон, фабрика, прокси, обсерверы.
  • Разъяснение концепции синглтона как объекта, контролирующего количество своих экземпляров.

Функциональное программирование

1:18:38
  • Введение в функциональное программирование: чистые функции, функции высшего порядка, работа с мэпами и коллекциями.
  • Критика чрезмерного использования функционального программирования.

Процедурное и объектно-ориентированное программирование

1:20:02
  • Понимание процедурного программирования как основы для дальнейшего развития.
  • Важность объектно-ориентированного программирования для отображения бизнес-сущностей.

SPA-фреймворки и производительность

1:21:00
  • Знание SPA-фреймворков и их особенностей.
  • Необходимость понимания производительности и профилирования для улучшения SPA-приложений.

Работа с зависимостями и сборкой

1:24:26
  • Различия между различными шлаками в NPM.
  • Умение разбираться в конфликтах зависимостей.
  • Настройка веб-пака и написание собственных конфигов для сборки.

Анализ и оптимизация

1:27:44
  • Анализ и оптимизация бандлов.
  • Использование бадлайзеров и статоскопов для анализа производительности.

Состояние менеджеры и теория конечных автоматов

1:30:15
  • Работа со состояние менеджерами в фреймворках.
  • Теория конечных автоматов и понимание потока данных через приложение.

Инлайновые инструменты

1:32:35
  • Базовое понимание инлайновых инструментов.
  • Применение методов и оптимизация работы с инлайном.

Использование фреймворков и производительность

1:33:24
  • Обсуждение влияния использования фреймворков на глубину понимания кода.
  • Упоминание о необходимости работы с перфоманс-графиками и отчётами.
  • Важность профилирования и адаптации кода под разные версии браузеров.

Слой доступа к данным

1:35:23
  • Введение понятия «слой доступа к данным» Data Layer Access.
  • Обсуждение необходимости обмена данными между компонентами.
  • Примеры решений для обмена данными, включая React.

Браузерные API и веб-сокеты

1:36:42
  • Обсуждение браузерных API, таких как Web Workers и Web Sockets.
  • Различие между Web Sockets и Long Polling.
  • Значение знания веб-сокетов для реал-тайм коммуникации.

Архитектурные паттерны фронтенда

1:40:28
  • Обсуждение архитектурных паттернов: FSD, модульная архитектура, атомический дизайн.
  • Различие между архитектурой и методологией.
  • Рекомендация изучить чистую архитектуру на уровне мидла.

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

1:41:39
  • Обзор различных типов тестирования: юнит-тестирование, интеграционное тестирование, скриншотное тестирование.
  • Значение тестирования скорости и качества результата.
  • Автоматизация тестирования в крупных компаниях.

Веб-перфоманс и DevOps

1:45:52
  • Запуск PageSpeed и Lighthouse.
  • Управление билдами на основе метрик.
  • Необходимость понимания Docker и локальной разработки.

Безопасность

1:48:51
  • Введение темы безопасности.
  • Обсуждение CSR, CSP и сертификатов.
  • Понимание механизмов защиты от угроз.

Авторизация и куки

1:50:01
  • Обсуждение использования токенов и их роли в авторизации.
  • Упоминание о проблемах с ферпати куки и необходимости понимания их работы.
  • Различие между уровнями навыков: от медла до сеньора.

Редиректы и клиентские приложения

1:51:38
  • Важность понимания цепочек редиректов и их работы.
  • Необходимость регистрации поддоменов для корректной работы редиректов.
  • Умение писать клиентские приложения как навык сеньора.

Интернационализация

1:54:17
  • Базовые навыки интернационализации на уровне медла.
  • Использование браузерных API и сторонних библиотек для интернационализации.
  • Проблемы с реализацией интернационализации в браузерах.

Работа с датами и микрофронтенды

1:56:03
  • Добавление работы с датами в список навыков.
  • Обсуждение микрофронтендов и модуля федерейшн.
  • Роль сеньоров в проектировании архитектуры микрофронтендов.

Системное мышление и проектирование

1:58:24
  • Необходимость системного мышления и проектирования у сеньоров.
  • Умение создавать диаграммы и архитектуру проекта.
  • Выбор фреймворков и инструментов на основе опыта.

Верстка и экспериментальные технологии

2:00:00
  • Обсуждение необходимости умения верстать письма для сеньоров.
  • Слежение за экспериментальными технологиями и их влиянием на проект.
  • Подчёркивание важности понимания текущих тенденций в разработке.

Обязанности сеньора-верстальщика

2:00:33
  • Сеньор-верстальщик должен разбираться в веб-технологиях и понимать процессы рефлоу, репейнт, критика рендер паз.
  • Он должен уметь аргументировать выбор инструментов и понимать, как развиваются технологии.

Работа с JavaScript и браузерами

2:02:03
  • Сеньор должен уметь работать с JavaScript, включая написание спецификаций.
  • Важно понимать, как развиваются браузеры и JavaScript, и уметь адаптировать код под новые технологии.

Изоляция и безопасность

2:03:24
  • Сеньор должен уметь изолировать пользовательские плагины и решать задачи, связанные с безопасностью.
  • Примеры задач: использование полифильных реализаций и изолированное выполнение JavaScript-движка.

Типы данных в JavaScript

2:05:28
  • Сеньор должен знать расширенные типы данных в JavaScript, такие как типизированные массивы.
  • Понимание работы с атомиками и буферами данных.

Работа с Git и GitHub

2:07:11
  • На базовом уровне джун должен уметь пользоваться Git.
  • Мидл должен уметь сквошить коммиты, черепикать и переписывать историю.
  • Сеньор решает сложные задачи, связанные с Git, например, переброс всех коммитов из репозитория.

Безопасность и Docker

2:10:54
  • Сеньор умеет писать клиентские скрипты, работать с ферпати куки и директивами безопасности.
  • Умеет запускать Docker, собирать образ и описывать свои экшены.

Тестирование и браузеры

2:12:18
  • Мидл решает простые задачи тестирования.
  • Сеньор занимается сложными задачами тестирования, такими как анализ причин сбоев и тормозов тестов.
  • Понимает, как развиваются браузеры и JavaScript.

Специфика работы сеньора

2:14:33
  • Сеньор должен адаптироваться к специфике каждого проекта.
  • Часто сеньор «вырастает» под проект, решая задачи, которые ранее были недоступны.
  • Важно помнить, как решались задачи пять лет назад, чтобы эффективно работать в текущих условиях.

Роль сеньоров в команде

2:15:06
  • Сеньоры берут на себя задачи, которые не попали в предыдущие категории.
  • Они решают проблемы, которые видят мидлы и джуны.

Глубокое понимание инструментов

2:15:41
  • Сеньоры глубоко понимают циклы и структуру кода, например, в Redux.
  • Они умеют обновлять версии TypeScript в проекте.

DevOps и понимание технологий

2:17:50
  • Сеньоры должны понимать, как код попадает в продакшн.
  • Важно знать, что такое CI/CD и как они работают.

Реактивное и функциональное программирование

2:20:01
  • Сеньоры должны разбираться в реактивном и функциональном программировании.
  • Они могут работать с Redux и другими технологиями.

Знание движков JavaScript

2:21:08
  • Сеньоры должны знать различия и оптимизации движков JavaScript.
  • Это помогает решать проблемы с производительностью.

Работа с Node.js

2:22:49
  • Node.js используется для сборки и запуска приложений.
  • Обсуждается использование Node.js в продакшене.

Дизайн интерфейсов

2:24:08
  • Сеньоры могут создавать общие компоненты и быть их maintainers.
  • Фронтенд-разработчики также участвуют в дизайне интерфейсов.

Практики разработки

2:26:46
  • Упоминаются практики TDD и монорепы.
  • Монорепы используются в DevOps и требуют понимания тулингов.

Монрепо и DevOps

2:27:05
  • Обсуждение включения навыков работы с монорепой в DevOps.
  • Подчёркивается, что использование монорепы зависит от конкретного проекта.
  • Упоминается, что навыки работы с монорепой не являются общим знанием.

Публикационные пакеты и архитектурные навыки

2:28:17
  • Обсуждение навыков работы с публикационными пакетами в npm.
  • Сеньор должен уметь выделять компоненты проекта в отдельные npm-пакеты.
  • Эти навыки относятся к архитектурным системным взглядам.

Запуск проектов

2:29:36
  • Сеньор и мид могут запускать проекты с нуля.
  • Упоминание о двух pet-проектах.

Планы на будущее

2:30:01
  • Обсуждение публикации результатов обсуждения.
  • Планы на будущие встречи с Андреем и другими экспертами.
  • Идея создания «дерева» навыков для разработчиков фронта, фул стека и верстальщиков.

Завершение стрима

2:30:58
  • Признание усталости участников и зрителей.
  • Благодарность за просмотр.
  • Обещание выложить навыки отдельно и посмотреть схему.
  • Прощание и пожелание хорошего вечера.
Похожие пересказы
Что должен знать JUNIOR Фронтенд Разработчик? ROADMAP: как стать фронтенд разработчиком в 2023
YOUTUBE 16.11.2025
Надежда|Путешествие к Таинственному океану/EP04|Анимация|Мультфильм|Счастливая Коза и Большой-Большой Волк|Приятная Коза и Большой-Большой Волк|Таинственное океанское приключение|Adventure|Китайский официальный подлинник
YOUTUBE 24.11.2025
НА ПИ ФКН ВСЁ ПЛОХО?? Путь во фронтенд с ПИ ФКН ВШЭ
YOUTUBE 30.11.2025
Насколько мой фронтенд плох? – Семен Левенсон / #DevTalks
YOUTUBE 27.11.2025