Складчина: JavaScript в действии: архитектура, модули и создание онлайн-игры [it-incubator]
Для кого наш интенсив?
- Для тех, кто хочет понимать программирование с точки зрения важности архитектурного подхода
- Для тех, кто хочет узнать, как эти знания можно применить в fullstack-разработке
Для успешного прохождения интенсива желательно:
- Наличие базовых знаний HTML и JS (изучаете от 3 до 6 месяцев)+
Вы научитесь мыслить архитектурно и чётко разделите 2 архитектурных слоя — слой данных и слой UI
- Познакомитесь с основами модульностью
- Научитесь строить граф зависимостей модулей
- Поймёте, что такое высокоуровневые и низкоуровневые модули, как между собой они могут взаимодействовать
- Отработаете концепцию коллбеков на примере собственной реализации паттерна Observer
- Разберёте базовую концепцию геттеровсеттеров (вне ООП контекста)
- Примените паттерн Ргоу для того, чтобы унести модуль данных на сервер и законектить двух клиентов через Server Side Events и написать мультипользовательскую онлайн игру
Программа курса:
1 Неделя. Создание плеера InPlayer
- Вспомним основы HTML и CSS
- Научимся динамически создавать DOM-элементы и отрисовывать их с помощью document.createElement и document.append
- Повторим основы структур и типов данных: переменные, массивы, объекты
- Научимся воспроизводить аудио-файлы с помощью тега audio
- Сделаем декомпозицию логики рендера на основе “компонентного” подхода
- Поймём, что такое предметная область
- Чётко проведём границы между UI-слоем приложения и Data-слоем
- Отобразим плеер на основе данных
2 Неделя. Создание плеера InPlayer
- Повторим и применим работу цикла for
- Разберёмся, что такое глобальные данные и почему это плохо
- Научимся создавать модули, импортировать и экспортировать данные (import/export)
- Поймём важность порядка исполнения кода
- Отобразим полноценно плейлисты плеера с треками в плейлистах
3 Неделя. Создание Счётчика
- Построим граф зависимостей модулей, разберём что такое высокоуровневые и низкоуровневые модули
- Разберемся в проблеме props/params drilling, почему она возникает и как можно сделать проще
- Разберемся в проблеме циклических зависимостей и научимся избегать этого
- Поймём, что такое Callback и в каких ситуациях они нам нужны
- Познакомимся с DOM-событиями
- Создадим примитивную версию реализации паттерна Observer
- Создадим приложение-счётчик, чтобы лучше понять основные концепции
- В плеере научимся подсвечивать любимые треки огоньком
4 Неделя. Создание плеера InPlayer
- Что такое CRUD-операции? Разберём основные флоу работы с данными
- Применим тег dialog для отображения диалоговых оконпопапов
- Продолжим углубляться в DOM-события и в работу с DOM-элементами
- Реализуем полноценный CRUD-флоу для нашего плеера (добавитьудалитьредактировать плейлист и трек)
5 Неделя. Игра “Catch The Google” v1
- Закрепим изученные ранее концепции (UI-DATA, компоненты, callback, state, observer)
- Продолжим изучать асинхронный код с помощью работы с функциями setInterval, setTimeout (clearInterval и clearTimeout)
- Разберём базовое понятие конечных автоматов — Finite State Machine
- Создадим первую мультистраничную версию игры
6 Неделя. Игра “Catch The Google” v2
- Научимся управлять персонажами через клавиатуру
- Добавим мультипользовательский режим в игру (каждый игрок будет управлять своим персонажем отдельно)
- Поймём, какие преимущества даёт нам концепция getter/selector/POJO view model
7 Неделя. Игра “Catch The Google” v3
- Реализуем полноценно паттерн Observer (Шаблон Наблюдатель)
- Разберемся в преимуществах Событийно-ориентированного программирования
- Поговорим на тему SOLID/GRASP принципов
- Оптимизируем UI часть, делая только нужные перерисовки только в нужных компонентах
8 Неделя. Игра “Catch The Google” v4
- Создадим простой 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 частей) на хостинг с привязкой собственного доменного имени
Цена 2500 руб. (25 евро)