JavaScript. Архитектура клиентских приложений

Профиль аудитории:

• JavaScript-разработчики начального уровня, желающие углубить навыки владения чистым JavaScript

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

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

По окончании курса слушатели смогут:

• Профессионально проектировать архитектуру и разрабатывать клиентские приложения на чистом JavaScript по техническому заданию.

Раздел 1. Single Page Application (SPA)

• Рассмотрим схему работы на курсе и узнаем, какие инструменты нам понадобятся. Познакомимся с понятием модульности и рассмотрим, как устроены модули в последних версиях стандарта ECMAScript и как собирать такие модули сборщиком.
• Обзор проектов.
• SPA.
• Архитектура.
• Разбор основ паттерна MV*.
• Модули.
• Как работают модули в ES20xx.
• Циклические зависимости.
• Инфраструктура.
• Сборка приложения при помощи webpack.
• Карты исходников (source map).

Раздел 2. Структуры данных

• Узнаем, зачем нужны структуры данных frontend-разработчику и как их применять в своих проектах.
• Классические структуры данных.
• Структуры данных ES2015: Map, Set, Iterable.
• Возможности ES2015 для работы с массивами и объектами.
• Оператор spread и rest.
• Копирование объектов.
• Генерация моковых данных.
• Написание клиент-серверного приложения без сервера.
• Знакомство с библиотекой js для работы с датами.

Раздел 3. ООП. Введение

• Познакомимся с объектами в JavaScript и рассмотрим новый способ их создания — с помощью классов. Поговорим про (не)изменяемость данных и разберём основы ООП.
• Объекты в JavaScript.
• Способы создания объектов.
• Свойства и методы.
• Динамические имена свойств.
• Геттеры и сеттеры.
• Иммутабельность.
• Компонентный подход.
• Объектно-ориентированное программирование.
• Какие проблемы решает ООП.
• Особенности ООП в
• Классы, типы в JavaScript.
• Инкапсуляция.

Раздел 4. ООП. Наследование и полиморфизм

• Продолжаем знакомиться с ООП в Разберём понятия полиморфизма и наследования. Подчиним магический 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.