Майстер-клас від Р.Якобчука "Best-practice SPA на React" (28.11)

"Best-practice SPA на React"

Розробка SPA - один з основних напрямків фронт-енду.

На майстер-класі ми розберемось на які граблі не варто наступати. А саме які рішення здаються хорошими на початку, але призводять до проблем в майбутньому, про що варто задумуватись з перших строк, щоб економити час і нерви через місяць.

Детально розберемо, як взяти найдинамічніший фреймворк, React.js, і побудувати з його допомогою проект, який масштабується та підтримується. Пройдемо від його основ до кращих практик застосування. Навчимось будувати архітектуру Flux додатків, і оглянемо які задачі стоятимуть перед програмістами в найближчому майбутньому.

Детальна програма майстер-класу:
Блок 1. Основи React.
Введення

• Основні проблеми при розробці SPA
• Декларативний опис і його переваги
• Короткий огляд основних SPA фреймворків
• Основні концепції React
• MVVM(MVC) и Flux арихтектури - огляд і порівняння

• Компонентний підхід - наше “все"
• Віртуальний DOM, як головна ідея
• JSX - синтаксис зрозумілий кожному верстальщику
• Побудова простого компоненту
• Вчимось використовувати Props і State

• Життевий цикл React-компонент
• Іноді доступ до DOM все ж потрібен: keys і refs
• ShouldComponentUpdate, змушуємо додаток “літати"
• Радість Immutable-данних

• Налаштовуємо Webpack і Babel
• Розносимо компоненти по файлам
• Структуруємо код
• PropTypes - Створюємо reusable компоненти

• Які стори нам потрібні? Збереження данних і стану системи
• Визначаємо спільний функціонал, пишемо Абстрактний стор
• Згадуємо ООП, створюємо більш специфічні стори
• Розробляємо абстрактні моделі

• Пишимо диспетчер, звязуємо всю систему
• Створюємо прості екшини, налаштовуємо потік данних
• Розбираємось з асинхронними екшинами
• Підключаємо коммунікацію з API
• Проектуємо систему кешування

• Огляд проблеми і варіантів
• Прикручуємо React-router
• React-router у зв’язці з Flux
• Налаштовуємо аутентифікацію
• Розбір корисних API React-router

• Огляд аналогів Facebook Flux(Redux, Reflux та інші)
• Проблеми великих SPA: server-rendering, code-spliting, offline-first
• JSON API