Мастер-класс по архитектуре JavaScript-приложений и фреймворков

Этот мастер-класс – для JavaScript-разработчиков, которые хотят повысить свой уровень знания архитектуры фронтенд-приложений, паттернов разработки, а также понять устройство современных фреймворков, чтобы осознанно выбирать среди них.

Цели интенсива

Изучить современную архитектуру фронтенд-приложений, хорошие практики и принципы написания кода.
Научиться применять паттерны проектирования для решения повседневных задач.
Познакомиться с важными инструментами и подходами, упрощающими жизнь и улучшающими разработку.
Разобраться в устройстве современных фреймворков: React, Angular, Vue, в их сильных и слабых сторонах, чтобы лучше понимать современные подходы к разработке сложных приложений, расширить кругозор.

Запись на этот интенсив приостановлена.

Как организовано обучение?

Онлайн-интенсив на два дня

Интенсив разделен на два дня, приблизительно по 4 часа в день (плюс перерыв на обед ~30 мин).

Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания интенсива.

Общение

Между онлайн-занятиями, также во время них доступен групповой чат для общения и вопросов преподавателю. Общаться можно также голосом.

Результат

Вы разбираетесь в различных приёмах, паттернах разработки сложных frontend-приложений.

Вы познакомились с рядом важных инструментов и подходов.

Вы понимаете как работают основные современные фреймворки, в их сильных и слабых сторонах.

Сертификат

По окончанию курсов вы получаете сертификат в электронном виде на русском и английском языках.

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

Программа интенсива

Блок 1

Начнём с общих вопросов архитектуры проекта, важные качества архитектуры и их способы достижения.

Рассмотрим как архитектура web-приложения связана с такими понятиями как SOLID, KISS, DRY, YAGNY, а также обсудим паттерны проектирования.

Организуем современное окружение фронтенд-проекта:

Настроим инструменты для статического анализа кода.

Создадим конфигурации для сборки проекта под различные требования.

Разберём организацию тестирования, различные инструменты, настроим запуск тестов.

Настроим автопроверки кода перед коммитом и тесты перед пушем в репозиторий.

Блок 2

Обсудим нововведения последнего стандарта JavaScript, рассмотрим их применение на практике.

Рассмотрим основные проблемы, с которыми сталкиваются разработчики, и способы их решений:

Роутинг SPA-приложений (Single Page Application) и "ленивая" загрузка (lazy-loading).

Событийная архитектура, паттерны взаимодействия компонент.

Жизненный цикл компонент, обработка событий и утечки памяти.

Хранение и обновление общего состояния системы, способы организации.

Структура API проекта для расширяемости и тестируемости.

Эффективное взаимодействие с браузерным DOM в проекте без фреймворков.

Prerendering и server-side rendering.

Наследование, область применения в современных проектах.

Разберём как паттерны объектно-ориентированного проектирования, такие как Abstract Factory, Adapter, Decorator, Facade, Factory method, Mediator, Observer, Proxy, Singleton, Template method, помогают решить данные проблемы на примере web-приложения на "чистом" JavaScript.

Далее мы разберем основные существующие фреймворки: Vue, React, Angular. Мы рассмотрим их архитектуру, как они работают, их плюсы, минусы, когда какой применять, их достоинства и недостатки.

Рассмотрим базовые концепции применяемые в React-проектах:

Понятие и реализация реактивности.
Однонаправленный поток данных.
Виртуальный DOM.
Функциональные и классовые компоненты.
Хранение и изменение состояния компонента.
Иммутабельность данных.
Хуки.
JSX (JavaScript syntax extension).

Сравним приемы и подходы построения архитектуры, применяемые в проекте на "чистом" JavaScript, с приемами и подходами в React-проекте.

Блок 3

Разберём архитектурные решения, концепции и подходы, применяемые в Angular-проектах:

Базовые структурные единицы: модули, компоненты, сервисы, директивы.
DI (Dependency Injection) - внедрение зависимостей.
Двунаправленный поток данных.
Реализация реактивности, библиотека RxJS.
Работа с асинхронным кодом.
Управление глобальным состоянием приложения.
Роутинг и "ленивая" загрузка.

Сравним приемы, подходы и паттерны, построения архитектуры Angular проектов с приемами и подходами применяемыми в проекте на "чистом" JavaScript и в проектах на React.

Блок 4

Разберём архитектурные решения, применяемые во Vue-проектах:

Реактивность, вычисляемые свойства, отслеживание.
Однофайловые компоненты.
Хуки жизненного цикла.
Двунаправленный поток данных.
Роутинг и "ленивая" загрузка.
Входные параметры и события компонентов.
Слоты и именованные слоты компонентов.
Управление глобальным состоянием приложения.

Итоговый обзор архитектуры, приемов, подходов и паттернов, используемых при построении архитектуры Vue-проектов, в сравнении с приемами и подходами применяемыми в проектах на "чистом" JavaScript, Angular и React-проектах.

Предварительные требования

Знакомство с HTML/CSS: верстать макеты не понадобится, но основные теги, позиционирование, margin/padding надо знать.
Опыт JavaScript с использованием ООП от 1 года (не только HTML/CSS) или пройденный курс JavaScript для новичков.
Интернет 256кб/с или быстрее для видео.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами.

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

Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов и документы для налогового вычета: детали для РФ.

Если остались вопросы – посмотрите в часто задаваемых, напишите на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.