WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React

RevJet

• Десятки сложных SPA

• 3 API

• Задача: построить дешборды для менеджмента

Мой прекрасный велосипед

• Доставать данные в минимальное количество запросов

• На клиенте живут тысячи сущностей

• Получать все, что необходимо для страницы

• Не запрашивать больше, чем нужно

Reusable Components

• А давайте сделаем 4 проекта с такими компонентами!

• Ээээ… Нет

Решение?

• Relay + GraphQL

2015 для React community

• Redux

• Hot-loader

• Flow (late 2014)

• React Native(iOS, Android)

• Множество других Flux-библиотек

• Несколько Breaking changes в React-router

• Огромное количество изменений в экосистеме и API

• GraphQL

• Relay

Hello World с Relay

• Currency Trading App

• Очевидная структура

• ETA ~ 2-3 недели

• Не тут-то было

Relay – очередой Flux?

• Unidirectional dataflow для React

• Не управляет состоянием – его задача data-fetching

• Data-fetching в стиле React

Декларативный Fetch

• Декларативно описать вид

• Декларативно описать поведение

• Декларативно описать нужные данные

Меняем мышление

• Представьте, что каждый компонент сам запрашивает данные

Component

Server

Композиция

Компоненты

Как это работает

first_namelast_name

pricecurrency

dealer: namefirst_namelast_name

pictureemail

emailpicture

first_namepicture

notifications

One merged query

А в нагрузку

• Клиентское кеширование

• Пагинация

• Optimistic updates

• Reusable components

• Получить все что нужно, но не более того

А что на бэкенде?

• REST

• JSON API

• Велосипеды

• GraphQL

GraphQL

• В лучших традициях PHP ~ SQL на клиенте J

Давайте смиримся

Очень

Толстый

Клиент

Очень тонкий сервер

Оченьмного

сервисов

Зачем QL на клиенте

• Latency – основной bottle-neck

• REST-а уже не хватает, мы пишем сложные приложения

• Хочется агрегировать сторонние сервисы на сервере

• Не хочется поддерживать сотни custom endpoints

• Нужен унифицированный API для очень разных клиентов

Что нас ждет

• Batch operations

• Defer

• Stream

• Live queries

• Subscriptions

GraphQL без Relay?

• Redux

• Minimalistic Relay

Apollo Stack(http://www.apollostack.com/)

Назад к реальности

• Очень слабо документировано

• Очень сырая реализация

• Много ограничений

• Мало примеров за пределами Hello world

• Очень высокий порог входа

• Не известно, взлетит ли

• Нужно сначала продать GraphQL

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

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

Email: r.iakobchuk@gmail.com

Skype: r.iakobchuk