Создание универсальных приложений на React 

Роман Якобчук

Давайте вернемся в эру динозавров

  • Заходим на абстрактный сайт
  • Нажимаем внутренний линк (например пункт меню)
  • Идем заваривать чай

Тем временем,
где-то под капотом

  1. Браузер устанавливает соединение с сервером
  2. Отправляет GET-запрос
  3. Сервер обрабатывает запрос
  4. Собирает все необходимые данные
  5. Строит HTML
  6. Отправляет этот HTML, как ответ браузеру
  7. Браузер загружает HTML и другие ресурсы 
  8. Строит новый DOM
  9. Рендерит этот новый DOM

Что видит клиент?

Интернет изменился

  • Соединение стало быстрее
  • Сервера стали быстрее
  • Браузеры стали быстрее
  • Мы научились кешировать и оптимизировать

Но и ожидания выросли

Для бизнеса каждый клик - потеря клиентов

SPA vs Classic

  • Значительно лучше UX
  • Значительно выше скорость работы
  • Унификация мобильных и браузерных UI
  • Простота разработки
  • Быстрая инициализация
  • Индексация поисковыми роботами
  • Social Sharing
  • Доступность
  • Независим от исполнения JS

А может, лучше так?

  • Значительно лучше UX
  • Значительно выше скорость работы
  • Унификация мобильных и браузерных UI
  • Простота разработки
  • Быстрая инициализация
  • Индексация поисковыми роботами
  • Social Sharing
  • Доступность
  • Независим от исполнения JS

Что делать?

Universal App
=

SPA
+
Server-rendering

Как сделать

Как рендерить на сервере?

React.renderToString(<App {...initialState} />)

Как инициализировать на клиенте?

React.render(<App {...initialState} />, container)

React - не SPA фреймворк

  • Работа с данными
  • Коммуникации с API
  • Роутинг

React - только View

Инфраструктура

frameworks-friendly

React-way

MVC vs Flux

Минусы Facebook Flux

  • Dispatcher как Singleton
  • Вся архитектура на сайд-эффектах
  • Это не фреймворк, а библиотечка Pub/Sub

Чего хотелось бы?

State 

UI 

Pure Function

Какие варианты?

  • Flux + data managing framework 
  • Flux а-ля FRP
  • ...
  • 100500 других flux-библиотек
  • Redux.js

Давайте отвлечемся

Сказочный мир ФП

0. Функции - first-class citizens

1. Чистые функции

2. Иммутабельные данные

Причем здесь вообще ФП?

  • Всегда предсказуемое состояние
     
  • Никак не зависим от окружения
     
  • Контроль над зависимыми событиям
     
  • Высокая отказоустойчивость
     
  • Просто прекрасные дев-тулы

2 + 2 = 4

сервер, браузер... да хоть мобильное приложение

ну, это для тех, кто побывал в колбечном аду

чистые функции не ломаются

ивент-сорсинг, тайм-тревел и остальное счастье

Action-creators

Как чистые функции

  • Отсутствие диспетчера
  • Возвращает Action как плоский объект
function increment(amount) {
    return {
        type: INCREMENT,
        data: {amount}
    }
}

Stores => Reducers

Как чистые функции

function counter(number = 0, action) {
    const {type, data} = action
    return type == INCREMENT ? number + data.amount : number
}
  • не сохраняют состояние
  • не зависят от окружения

Store

Как Immutable object

Current State

Final State

New State

Action

New State

Action

Action

Э, а где сайд-эффекты?

  • API calls
  • Logging
  • Reporting
  • ...

Middleware

Redux flow

Action Creator

Middlewares

Reducers

Store

UI

dispatch

Side-effects

Middleware

  • Централизованные сайд-эффекты
  • Единственное отличие
    - сервера от клиента,
    - прод от дев окружения
  • Единый Code-base!

Что было на сервере

  • Серверный роутинг
  • Серверный шаблонизатор
  • API
  • Статистика
  • Сервисы
  • ...

Клиент стал
 сверхтолстым

Делайте крутые проекты!

Роман Якобчук

http://roma.if.ua

Skype: r.iakobchuk

Email: r.iakobchuk@gmail.com

Universal Apps using React for fw-day

By Roman Iakobchuk

Made with Slides.com

Universal Apps using React for fw-day

  • 2,574

More from Roman Iakobchuk