webcamp2016:front-end_Роман Якобчук_relay, graphql и остальные радости...
TRANSCRIPT
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