+7 (700) 870-07-77
university@dtu.kz
1 модуль Введение
Развертывание рабочего стенда для работы с микросервисами, представлеными, приложениями в технологиях JEE, Python, NodeJS, Postgresql, будем использовать этот стенд для всей разработки клиентской части - ReactJS - время 10 минут.
Эволюция развития веб приложений. От запроса - ответа, к сервлетам и feces технологиям сервера, к технологиям разработки клиентских приложений React, Vue, Angular. Введение в SPA приложения. Что такое реактивное приложение. Виртуальный DOM приложения.
Подготовка рабочей среды WebStorm для работы с ReactJS, подключение дополнительных библиотек в локальную песочницу.
2 модуль Основы JS TypeScript
- Обзор среды выполнения, распределение памяти, стек вызовов, куча, механизмы обратного вызова. Механизм V8 (движок) — общее представление и механизмы времени выполнения.
- EMACScript — однопоточный , цикл событий и параллельное выполнение. Асинхронное выполнение JS, setTimeout(…), выполнение событий в очереди, функции async/await. Новые стандарты языка.
- TypeScript механизм строгой типизации для JavaScript, настройка рабочего места для использования TypeScript, аннотации типов, интерфейсы, необязательные свойства интерфейсов, стрелочные функции (лямбда выражения), модификатор private, pablic, наследование. Компиляция TypeScript в JavaScript. Декораторы — как основа заключения контрактов между виртуальной машиной V8 ; Основы OOP, инкапсуляция , полиморфизм, наследование, абстракции. Использование интерфейсов TS для типизации методов и классов, шаблоны параметров интерфейсов, методов и классов
3 модуль - React
Создание минимального React приложения, утилита create-react-app, анатомия и внутренняя архитектура каталогов, React объект - как точка входа в приложение.
Синтаксический сахар - React-JSX для функции createElement. Спецификация типов элементов, область видимости и нотации JSX. Правила именования. Свойства JSX элементов и литералы.
React компоненты - классы или функции, что выбрать. Props (свойства) и состояние (state). Описание и использование событий в функциональных и классовых компонентах. Методы жизненного цикла компонента. Этапы формирования и обновления виртуального DOM. Устаревшие методы - в несколько слов.
Использование функции fetch для доступа к микросервисам стенда. Описание прокси для сервера разработки. Авторизация и аутентификация клиентского приложения на сервере. Обработка ошибок сервера на стороне клиентского приложения. Выстраивание цепочки выполнения запросов к серверу в единый промис на конкретных примерах микросервисов. Построение готового клиентского приложения с обработкой отношения мастер-деталь, изменением данных в базе данных и формированием отчетов.
4 модуль Redux
Неудобства работы с локальным хранилищем в React, изолированость хранилища и принятие специальных мер для обновления виртуального дома. Redux снимает эти проблемы.
Установка Redux, две библиотеки, создание структуры хранилища в файловой системе - общие принципы.
Назначение reducer, базовая функция.
Инициализация хранилища. Механизм диспетчеризации в хранилище, создание и использование механизмов обновления данных в хранилище. Возврат данных из хранилища.
Подписчики на состояние хранилища.
Передача состояния в свойства компонент - Provider, автоматизация передачи необходимых свойств из кранилища в компоненты - назначение функции mapStateToProps и mapDispatchToProps.
Фукция обертка, или фунция верхнего порядка, которая возвращается функцией connect - для связи компонента с хранилищем и механизмами его обновления.
Все эти теоретические предпосылки разбираются на конкретном примере работы с серверной частью стенда. Разбирается пример построения клиентского приложения, где обрабатываются таблицы в отношении мастер-деталь.
5 модуль Hooks
Изсользование состояния приложения без реализации классовой архитектуры - это функции Хуки. Добавление состояния к функиональному компоненту - useState вместо this.state. Правила чтения и записи состояния. Виртуальный DOM отслеживает состояние.
Побочные эффекты компонента и хук useEffect, получение данных из микросервиса и обновление состояния, улучшение производительности useEffect с организацией наблюдения за переменными состояния.
Использование контекста (хук useContext) для получения доступа к свойствам в родительском компоненте.
