Складчина: JavaScript в действии: архитектура, модули и создание онлайн-игры [it-incubator]
Для кого наш интенсив?
- Для тех, кто хочет понимать программирование с точки зрения важности архитектурного подхода
- Для тех, кто хочет узнать, как эти знания можно применить в fullstack-разработке
- Наличие базовых знаний HTML и JS (изучаете от 3 до 6 месяцев)+
- Познакомитесь с основами модульностью
- Научитесь строить граф зависимостей модулей
- Поймёте, что такое высокоуровневые и низкоуровневые модули, как между собой они могут взаимодействовать
- Отработаете концепцию коллбеков на примере собственной реализации паттерна Observer
- Разберёте базовую концепцию геттеров\сеттеров (вне ООП контекста)
- Примените паттерн Ргоу для того, чтобы унести модуль данных на сервер и законектить двух клиентов через Server Side Events и написать мультипользовательскую онлайн игру
1 Неделя. Создание плеера InPlayer
- Вспомним основы HTML и CSS
- Научимся динамически создавать DOM-элементы и отрисовывать их с помощью document.createElement и document.append
- Повторим основы структур и типов данных: переменные, массивы, объекты
- Научимся воспроизводить аудио-файлы с помощью тега audio
- Сделаем декомпозицию логики рендера на основе “компонентного” подхода
- Поймём, что такое предметная область
- Чётко проведём границы между UI-слоем приложения и Data-слоем
- Отобразим плеер на основе данных
- Повторим и применим работу цикла for
- Разберёмся, что такое глобальные данные и почему это плохо
- Научимся создавать модули, импортировать и экспортировать данные (import/export)
- Поймём важность порядка исполнения кода
- Отобразим полноценно плейлисты плеера с треками в плейлистах
- Построим граф зависимостей модулей, разберём что такое высокоуровневые и низкоуровневые модули
- Разберемся в проблеме props/params drilling, почему она возникает и как можно сделать проще
- Разберемся в проблеме циклических зависимостей и научимся избегать этого
- Поймём, что такое Callback и в каких ситуациях они нам нужны
- Познакомимся с DOM-событиями
- Создадим примитивную версию реализации паттерна Observer
- Создадим приложение-счётчик, чтобы лучше понять основные концепции
- В плеере научимся подсвечивать любимые треки огоньком
- Что такое CRUD-операции? Разберём основные флоу работы с данными
- Применим тег dialog для отображения диалоговых окон\попапов
- Продолжим углубляться в DOM-события и в работу с DOM-элементами
- Реализуем полноценный CRUD-флоу для нашего плеера (добавить\удалить\редактировать плейлист и трек)
- Закрепим изученные ранее концепции (UI-DATA, компоненты, callback, state, observer)
- Продолжим изучать асинхронный код с помощью работы с функциями setInterval, setTimeout (clearInterval и clearTimeout)
- Разберём базовое понятие конечных автоматов - Finite State Machine
- Создадим первую мультистраничную версию игры
- Научимся управлять персонажами через клавиатуру
- Добавим мультипользовательский режим в игру (каждый игрок будет управлять своим персонажем отдельно)
- Поймём, какие преимущества даёт нам концепция getter/selector/POJO view model
- Реализуем полноценно паттерн Observer (Шаблон Наблюдатель)
- Разберемся в преимуществах Событийно-ориентированного программирования
- Поговорим на тему SOLID/GRASP принципов
- Оптимизируем UI часть, делая только нужные перерисовки только в нужных компонентах
- Создадим простой express (NodeJS) backend
- Создадим простой Rest API
- Познакомимся с http headers, CORS, fetch API
- Познакомимся с концепцией Promise, async/await
- Научимся создавать ендпоинт для Server-Sent Event
- Перенесём ядро игры “Catch The Google” на бекенд
- Применим паттерн Remote Proxy
- Создадим мультипользовательскую сетевую версию игры
- Научимся деплоить (разворачивать) нашу игру (front-end и back-end частей) на хостинг с привязкой собственного доменного имени
Скрытая ссылка