JavaScript в действии: архитектура, модули и создание онлайн-игры [it-incubator]

Складчина: 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 евро)
Скрытая ссылка