Download - WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React
![Page 1: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/1.jpg)
![Page 2: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/2.jpg)
RevJet
• Десятки сложных SPA
• 3 API
• Задача: построить дешборды для менеджмента
![Page 3: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/3.jpg)
Мой прекрасный велосипед
• Доставать данные в минимальное количество запросов
• На клиенте живут тысячи сущностей
• Получать все, что необходимо для страницы
• Не запрашивать больше, чем нужно
![Page 4: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/4.jpg)
Reusable Components
• А давайте сделаем 4 проекта с такими компонентами!
• Ээээ… Нет
![Page 5: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/5.jpg)
Решение?
• Relay + GraphQL
![Page 6: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/6.jpg)
2015 для React community
• Redux
• Hot-loader
• Flow (late 2014)
• React Native(iOS, Android)
• Множество других Flux-библиотек
• Несколько Breaking changes в React-router
• Огромное количество изменений в экосистеме и API
• GraphQL
• Relay
![Page 7: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/7.jpg)
Hello World с Relay
• Currency Trading App
• Очевидная структура
• ETA ~ 2-3 недели
• Не тут-то было
![Page 8: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/8.jpg)
Relay – очередой Flux?
• Unidirectional dataflow для React
• Не управляет состоянием – его задача data-fetching
• Data-fetching в стиле React
![Page 9: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/9.jpg)
Декларативный Fetch
• Декларативно описать вид
• Декларативно описать поведение
• Декларативно описать нужные данные
![Page 10: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/10.jpg)
Меняем мышление
• Представьте, что каждый компонент сам запрашивает данные
Component
Server
![Page 11: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/11.jpg)
Композиция
Компоненты
![Page 12: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/12.jpg)
Как это работает
first_namelast_name
pricecurrency
dealer: namefirst_namelast_name
pictureemail
emailpicture
first_namepicture
notifications
One merged query
![Page 13: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/13.jpg)
А в нагрузку
• Клиентское кеширование
• Пагинация
• Optimistic updates
• Reusable components
• Получить все что нужно, но не более того
![Page 14: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/14.jpg)
А что на бэкенде?
• REST
• JSON API
• Велосипеды
• GraphQL
![Page 15: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/15.jpg)
GraphQL
• В лучших традициях PHP ~ SQL на клиенте J
![Page 16: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/16.jpg)
Давайте смиримся
Очень
Толстый
Клиент
Очень тонкий сервер
Оченьмного
сервисов
![Page 17: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/17.jpg)
Зачем QL на клиенте
• Latency – основной bottle-neck
• REST-а уже не хватает, мы пишем сложные приложения
• Хочется агрегировать сторонние сервисы на сервере
• Не хочется поддерживать сотни custom endpoints
• Нужен унифицированный API для очень разных клиентов
![Page 18: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/18.jpg)
Что нас ждет
• Batch operations
• Defer
• Stream
• Live queries
• Subscriptions
![Page 19: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/19.jpg)
GraphQL без Relay?
• Redux
• Minimalistic Relay
Apollo Stack(http://www.apollostack.com/)
![Page 20: WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости современного React](https://reader031.vdocuments.site/reader031/viewer/2022030123/58a3ff931a28ab64528b5eff/html5/thumbnails/20.jpg)
Назад к реальности
• Очень слабо документировано
• Очень сырая реализация
• Много ограничений
• Мало примеров за пределами Hello world
• Очень высокий порог входа
• Не известно, взлетит ли
• Нужно сначала продать GraphQL