[HTML Academy] JavaScript. Архитектура клиентских приложений [11 апреля — 12 июня 2022]

[HTML Academy] JavaScript. Архитектура клиентских приложений [11 апреля — 12 июня 2022]



На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.​

Спойлер: Программа курса

Раздел 1
Single Page Application (SPA)
Рассмотрим схему работы на курсе и узнаем, какие инструменты нам понадобятся. Познакомимся с понятием модульности и рассмотрим, как устроены модули в последних версиях стандарта ECMAScript и как собирать такие модули сборщиком.

Организационные вопросы.

• Обзор проектов.
• Схема работы на курсе.

SPA.

Архитектура.

• Разбор основ паттерна MV*.

Модули.

• Как работают модули в ES20xx.
• Циклические зависимости.

Инфраструктура.

• Сборка приложения при помощи webpack.
• Карты исходников (source map).

Практика

• Создание репозитория, форк, клонирование.
• Знакомство с проектом.
• Разделение проекта на модули.
• Настройка инфраструктуры для работы на курсе.
• Подключение в сборку загрузчика модулей.

Раздел 2
Структуры данных
Узнаем, зачем нужны структуры данных frontend-разработчику и как их применять в своих проектах.

• Классические структуры данных.
• Структуры данных ES2015: Map, Set, Iterable.
• Возможности ES2015 для работы с массивами и объектами.
• Оператор spread и rest.
• Копирование объектов.

Практика

• Генерация моковых данных.
• Написание клиент-серверного приложения без сервера.
• Знакомство с библиотекой Day.js для работы с датами.

Вторая неделя
Раздел 3
ООП. Введение
Познакомимся с объектами в JavaScript и рассмотрим новый способ их создания — с помощью классов. Поговорим про (не)изменяемость данных и разберём основы ООП.

Объекты в JavaScript.

• Способы создания объектов.
• Свойства и методы.
• Динамические имена свойств.
• Геттеры и сеттеры.

Иммутабельность.

Компонентный подход.

• Объектно-ориентированное программирование.
• Какие проблемы решает ООП.
• Особенности ООП в JavaScript.
• Классы, типы в JavaScript.
• Инкапсуляция.

Практика

• Обновление кода с учётом новых знаний об объектах.
• Применение объектно-ориентированного подхода.

Третья неделя
Раздел 4
ООП. Наследование и полиморфизм
Продолжаем знакомиться с ООП в JavaScript. Разберём понятия полиморфизма и наследования. Подчиним магический this (контекст). Попрактикуемся в написании компонентов многоразового использования.

ООП.

• Принципы ООП.
• Полиморфизм.
• Наследование.
• Абстрактные классы.

Контекст.

• Контекст.
• Потеря и привязка контекста (apply, bind, call).
• Контекст стрелочных функций.

Практика

• Погружаемся в ООП. Инкапсуляция, наследование и полиморфизм на практике.
• Рефакторинг модулей.
• Реализация подписок в компонентах.

Раздел 5
MVP. Presenter
Начнём детальный разбор составляющих MVP. С помощью презентера (presenter, англ.) установим связь между компонентом и структурой данных: обновление данных при взаимодействии пользователя с компонентами.

Датабиндинг.

• Схемы связывания компонентов в паттерне MV*.
• Односторонняя связь.

Практика

• Реализация презентеров в приложении.
• Установка одностороннего связывания данных — от компонента к данным.

Четвёртая неделя
Раздел 6
MVP. View
Продолжим детальный разбор составляющих MVP. Рассмотрим способы реализации интерактивных компонентов, которые должны реагировать на действия пользователя без обновления данных.

• Состояние компонентов.
• Способы реализации интерактивности компонентов.

Практика

• Реализация интерактивных компонентов.
• Знакомство с библиотекой flatpikr.

Пятая неделя
Раздел 7
MVP. Model
Завершим детальный разбор составляющих MVP. Установим обратную связь: обновление компонентов при изменении данных.

Датабиндинг.

• Разбор схем связывания компонентов в паттерне MV*.
• Двусторонняя связь.

Практика

• Реализация моделей в приложении.
• Связывание данных в обратную сторону — от данных к компонентам.
• Применение двустороннего связывания данных.
• Знакомство с библиотекой chart.js.

Шестая неделя
Раздел 8
Работа с сетью
Вспомним, как работает протокол HTTP. Узнаем, что такое REST и REST API. Разберёмся с объектом Promise и узнаем, как он помогает отправлять и обрабатывать HTTP-запросы. Разберём, как проектировать интерфейсы, в которых есть асинхронный код так, чтобы пользователю было удобно.

Протокол HTTP.

REST.

Промисы.

Fetch API.


Практика

• Получение данных для отрисовки приложения с внешнего сервера.
• Отправка данных на внешний сервер.
• Реализация обратной связи в интерфейсе.

Первая неделя защиты
Завершение работы над проектом и подготовка к итоговой защите.

Раздел 9
Offline
Узнаем, есть ли жизнь без интернета.

Offline.

• Знакомство с практиками, обеспечивающими работу приложения, в случае, если доступ к сети пропал.

Технологии.

• Cache.
• Local Storage.
• Web Worker.
• Service Worker.

Продажник