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

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

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

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

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

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

Интенсив разделен на два дня, приблизительно по 5-6 часов в день (плюс перерыв на обед).

Занятие проходит в формате вебинара. Запись занятия доступна через 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кб/с или быстрее для видео.

Опыт требуется не просто так: новые подходы в работе с асинхронным кодом и реактивное программирование имеет смысл изучать, когда JavaScript сам по себе давно знаком. Кроме того, зная, что у вас уже есть опыт в программировании, мы можем сосредоточиться именно на особенностях реактивного программирования (RxJS) и, тем самым, успеть больше.

Преподаватель

Владимир ШевчукВедёт курс с 24 сентября 2022

Разработкой занимаюсь с 2010 года, на JS пишу с 2012 года. За это время успел поработать на разных проектах от небольших стартапов до крупных банковских платформ.

Исполнял обязанности тимлида, competency manager-а в компании Eleks (отвечал за развитие компетенции фронтенд направления) и CTO в Global Tech Makers.

С 2016 года активно занимаюсь преподаванием, веду оффлайн тренинги внутри компаний, организовываю менторские программы.

Люблю “чистый” хорошо читабельный код, часто сравниваю код с литературой.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами (Яндекс, Мейл.ру и другие), а также с бюджетными (Университеты и другие).

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

У нас есть лицензия
Можно сделать налоговый вычет: детали для России

Запись на курс

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