GraphQL ve Relay sunumu

Facebook'un GraphQL ve Relay teknolojilerini dun Jstanbul grubunda anlattim ( http://www.meetup.com/jstanbul/ ).

GraphQL Facebook'un istemcilerinin (iPhone, Android, web uygulamalari) sunuculariyla iletisimde kullandigi, REST yontemine alternatif bir sorgulama dili. SQL tarzi sorgulama dillerine benzese de JSON temelli oldugu icin daha esnek.

Ornegin REST'teki /api/user/1?expand=customer&customer_fields=last4&fields=name,surname gibi bir yapi GraphQL'de duzenli bir JSON benzeri yapida sunucuya gonderiliyor:

{user(id:1) {
name
surname
customer {
last4
}
}}

Sunucu tarafinda bu dilden anlayan GraphQL sunuculari ile istek ilgili veri kaynagina (veri tabani olmak zorunda degil) yonlendiriliyor.

Relay ise Facebook'un onyuzdeki React teknolojisiyle yazilmis bilesenlerin gereksinimlerini GraphQL ile belirtmelerini kolaylastiran ve veri alisverisini otomatize etmeye calisan bir teknoloji.

Bu sunumun videosuna su adresten erisebilirsiniz:

Youtube kanalimda ayni zamanda Facebook React, Clojure dili gibi farkli konularda videolar bulunmakta:

https://youtu.be/Abu9c0Ar-5U

Kanalin adresi: http://youtube.com/ustunozgur/videos

Transcript

1. GraphQL ve Relay
   Üstün Özgür
   @ustunozgur
   JStanbul
   10 Aralık 2015
   

   View Slide

2. Facebook Açık Kaynak
   • React
   • Flux
   • GraphQL
   • Relay
   

   View Slide

3. GraphQL
   

   View Slide

4. Graph
   Query
   Language
   Çizge
   Sorgu
   Dili
   

   View Slide

5. Sunucudan veri
   çekmek
   

   View Slide

6. En yaygın yöntem
   • REST
   • 2000
   • GET/POST/PUT/PATCH
   • Kaynak (Resource) URIları
   

   View Slide

7. REST Örnek
   • Naif REST örneği
   • GET /api/user -> {objects: [{id: 1, uri: '/api/user/1'}]}
   • GET /api/user/1 -> {id: 1, name: 'Ustun', customer:
   '/api/customer/3'}
   • GET /api/customer/3 -> {id: 3, cardLast4: 1234}
   

   View Slide

8. REST Örnek
   • Naif REST örneği: en çok veri, en az sorgu
   • GET /api/user-with-card-info ->
   {objects: [
   {id: 1, name: 'Ustun', customer: {id: 3, cardLast: 1234},
   {id: 2, name: 'Mehmet', customer: {id: 4, cardLast: 4567}
   ]}
   

   View Slide

9. REST Örnek
   • Aynı veri, bir field eklendiğinde
   • GET /api/user-with-card-info ->
   {objects: [
   {id: 1, name: 'Ustun', 'surname': 'Ozgur', customer: {id: 3, cardLast: 1234},
   {id: 2, name: 'Mehmet', 'surname': 'Ozturk', customer: {id: 4, cardLast: 4567}
   ]}
   

   View Slide

10. • Sunucu odaklı
    • Birden fazla versiyon var ya da
    bütün her istemci aynı datayı
    alıyor
    Çözüm
    Query Parametresi
    /api/user/1?
    expand=customer&fields=name&fields=surname&fields=tckimlikno
    

    View Slide

11. Neden URL'e ihtiyaç
    var?
    

    View Slide

12. URL sadece paylaşım için bir araç.
    Genelde insanlar arası iletişim için
    Geri kalan her şey için:
    Tek url yeterli!
    

    View Slide

13. Sunucuya iletmek
    istediğimiz veri ne?
    /api/user/1?
    fields=name&fields=surname&fields=tckimlikno&expand=cus
    tomer&customer_fields=son4
    Birinci kullaniciyi bul
    Onun name, surname, tckimlikno alanlari ekle.
    Ayni kullanicinin bagli oldugu customer nesnesini bul
    O customer nesnesinin son4 adlı alanını bul
    Sunucu bizim gönderdiğimiz string'i gerisin geri bu şekilde
    ayrıştırır.
    

    View Slide

14. Doğrudan İstediğimiz Veriyi
    Göndersek?
    user(id:1) {
    name
    surname
    customer {
    last4
    }
    }
    GraphQL
    

    View Slide

15. Giden veri ile dönen veri
    aynı formatta
    user(id:1) {
    name
    surname
    customer {
    last4
    }
    }
    user {
    name: "Ustun",
    surname: "Ozgur"
    customer: {
    last4: 1234
    }
    }
    

    View Slide

16. Sorguda değişiklik yapalım
    user(id:1) {
    name
    surname
    city
    customer {
    last4
    }
    }
    user {
    name: "Ustun",
    surname: "Ozgur"
    city: "Istanbul",
    customer: {
    last4: 1234
    }
    }
    İstemci Odaklı
    Farklı istemciler farklı alanları isteyebilir!
    

    View Slide

17. Örnek GraphQL
    sorguları
    http://graphql-swapi.parseapp.com/
    

    View Slide

18. GraphQL Sunucusu
    Istemci Sunucu
    GraphQL olarak veri isteği
    JSON olarak aynı formatta veri
    1
    2
    {
    user(id:1) {
    name
    }
    }
    {
    user {
    name: "Ustun"
    }
    }
    

    View Slide

19. GraphQL bir sunucu
    değildir
    

    View Slide

20. GraphQL bir sorgulama dilidir.
    Bu dilden anlayan sunucular her dilde
    ve platformda yazılabilir.
    Aynı REST gibi.
    Ama daha iyi.
    

    View Slide

21. Neler sorgulanabilir?
    Her şey.
    Sadece veritabanı tabloları değil.
    REST'teki gibi resourcelar (kaynaklar) vardır; ancak
    bu kaynaklar typed, yani tür bilgisine sahiptir.
    SCHEMA (şema)
    Her şey türlü!
    

    View Slide

22. User(id:Int) {
    name: String,
    surname: String,
    tckimlikno: int
    }
    HavaDurumu(sehir:String) {
    sicaklik: float
    nem: int
    }
    SQL Database
    weather.com API'ı
    LotoNumaraları {
    numaralar: List[Int]
    }
    Rasgele Sayılar
    GraphQL Server
    Kullanıcı
    

    View Slide

23. Örnek GraphQL
    sunucusu
    JavaScript versiyonu
    

    View Slide

24. Relay
    

    View Slide

25. React
    

    View Slide

26. var User = React.createClass({
    render: function () {
    
    {this.props.user.username}
    
    
    }
    });
    ustunozgur
    ReactDOM.render(
    ,
    mountNode)
    Bu veri nasıl gelecek?
    

    View Slide

27. Relay
    İstemci
    Sunucu
    

    View Slide

28. Her React bileşeni ihtiyacı olduğu
    veriyi belirtir
    En tepedeki bileşen bütün
    çocuklarına gereksinimlerini sorar
    ve GraphQL sorgusu yapar.
    Dönen veriyi çocuklara aktarır.
    

    View Slide

29. class Tea extends React.Component {
    render() {
    var {name, steepingTime} = this.props.tea;
    return (
    
    {name} ({steepingTime} min)
    
    );
    }
    }
    Tea = Relay.createContainer(Tea, {
    fragments: {
    tea: () => Relay.QL`
    fragment on Tea {
    name,
    steepingTime,
    }
    `,
    },
    });
    class TeaStore extends React.Component {
    render() {
    return
    {this.props.store.teas.map(
    tea =>
    )}
    ;
    }
    }
    TeaStore = Relay.createContainer(TeaStore, {
    fragments: {
    store: () => Relay.QL`
    fragment on Store {
    teas { ${Tea.getFragment('tea')} },
    }
    `,
    },
    });
    class TeaHomeRoute extends Relay.Route {
    static routeName = 'Home';
    static queries = {
    store: (Component) => Relay.QL`
    query TeaStoreQuery {
    store { ${Component.getFragment('store')} },
    }
    `,
    };
    }
    ReactDOM.render(
    Component={TeaStore}
    route={new TeaHomeRoute()}
    />,
    mountNode
    );
    

    View Slide

30. Relay'in Hedefleri:
    1.Deklaratif
    2.Kolokasyon
    3.Mutasyonlar
    1.Otomatik veri tutarlılığı
    2.Optimistik güncellemeler
    

    View Slide

31. Demo
    

    View Slide

32. Teşekkürler
    Üstün Özgür
    @ustunozgur
    ustun@ustunozgur.com
    

    View Slide