Все курсы

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

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

Архитектура и фреймворки
Ближайшая группа
Перейти к записи

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

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

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

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

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

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

Общение

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

Результат

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

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

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

Сертификат

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

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

img

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

Блок 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) и, тем самым, успеть больше.

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

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

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

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

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

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

      Для компаний

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

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

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

      Комментарии

      перед тем как писать…
      • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
      • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
      • Если что-то непонятно в статье — пишите, что именно и с какого места.