[HTML Academy] JavaScript. Архитектура клиентских приложений, уровень 2 (Александр Сушко)

[Moderator]

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить. Первая неделя Раздел 1 ECMAScript Рассмотрим схему работы на интенсиве и узнаем, какие инструменты нам понадобятся. Познакомимся с последними версиями стандарта ECMAScript, разберём какие проблемы он решает и чем отличается от ECMAScript 5. Организационные вопросы. Обзор проектов. Схема работы на интенсиве. Новые возможности ECMAScript. Область видимости. Операторы let и const. Строки-шаблоны. Стрелочные функции. Параметры функций по умолчанию. Деструктуризация. Практика Создание репозитория, форк, клонирование. Знакомство с проектом. Продолжение описания Раздел 2 Модули и инфраструктура проектов Познакомимся с понятием модульности и рассмотрим, как устроены модули в последних версиях стандарта ECMAScript. Разберёмся со сборщиками модулей: зачем они нужны, как они работают и как их подключить в проект. А так же узнаем, что такое npm-пакеты. Научимся их устанавливать и управлять ими. Модули. Как работают модули в ES20xx. Циклические зависимости. Структура JavaScript-проекта. node.js, файл package.json, package-lock.json. Управление проектом, npm. npm-сценарии. Обновление версий пакетов. Установка зависимостей. Сборка приложения при помощи webpack. Карты кода (source map). Практика Настройка инфраструктуры для работы на интенсиве. Подключение в сборку загрузчика модулей. Разделение проекта на модули. Вторая неделя Раздел 3 Структуры данных Узнаем, зачем нужны структуры данных frontend-разработчику и как их применять в своих проектах. Классические структуры данных. Структуры данных ES2015: Map, Set, Iterable. Возможности ES2015 для работы с массивами и объектами. Оператор spread и rest. Практика Написание клиент-серверного приложения без сервера. Раздел 4 Введение в ООП Познакомимся с объектами в JavaScript. Научимся создавать, копировать и применять объекты для решения практических задач. Поговорим про типизацию и разберёмся с магическим контекстом. Объекты JavaScript. Функции и объекты. Способы создания объектов. Свойства и методы. Динамические имена свойств. Геттеры и сеттеры. Копирование объектов. Иммутабельность. Компонентный подход. Объектно-ориентированное программирование. Какие проблемы решает ООП. Особенности ООП в JavaScript. Классы, типы в JavaScript. Инкапсуляция. Практика Обновление кода с учётом новых знаний об объектах. Применение объектно-ориентированного подхода. Третья неделя Раздел 5 Наследование и полиморфизм Продолжаем знакомиться с ООП в JavaScript. Разберем полиморфизм и наследование. Попрактикуемся в написании компонентов многоразового использования. ООП. Полиморфизм. Наследование и цепочка прототипов. Принципы ООП. Абстрактные классы. Контекст. Контекст. Потеря и привязка контекста (apply, bind, call). Контекст стрелочных функций. Практика Углубление в ООП. Применение на практике инкапсуляции, наследования и полиморфизма. Рефакторинг модулей. Раздел 6 Датабиндинг — связывание данных На этом этапе мы установим связь между компонентом и структурой данных: обновление данных при изменении состояния компонентов. Датабиндинг. Связывание данных. Паттерны «Посредник» и «Наблюдатель». Функции обратного вызова (колбэки). Практика Установка одностороннего связывания данных — от компонента к данным. Знакомство с библиотеками chart.js, flatpikr, moment. Четвёртая неделя Раздел 7 Связывание данных. Продолжение Затем установим обратную связь: обновление компонентов при изменении данных. Датабиндинг. Слабое связывание. Паттерны «Слушатель». Виды MV*. Практика Связывание данных в обратную сторону — от данных к компонентам. Применение двустороннего связывания данных. Пятая неделя Раздел 8 Работа с сетью Узнаем как работает протокол HTTP, что такое REST и REST API. Разберёмся с объектом Promise и узнаем, как он помогает отправлять и обрабатывать HTTP-запросы. Узнаем, как проектировать интерфейсы, в которых есть асинхронный код так, чтобы пользователю было удобно. Протокол HTTP. REST. Промисы. Fetch API. Практика Получение данных для отрисовки приложения с внешнего сервера. Отправка данных на внешний сервер. Раздел 9 Offline Узнаем, есть ли жизнь без интернета. Cache. Local Storage. Web Worker. Service Worker. Практика Знакомство с практиками, обеспечивающими работу приложения, в случае, если доступ к сети пропал.