Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL ve Relay sunumu

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

Üstün Özgür

December 10, 2015
Tweet

More Decks by Üstün Özgür

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Graph
    Query
    Language
    Çizge
    Sorgu
    Dili

    View full-size slide

  4. Sunucudan veri
    çekmek

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. • 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 full-size slide

  10. Neden URL'e ihtiyaç
    var?

    View full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  18. GraphQL bir sunucu
    değildir

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. Örnek GraphQL
    sunucusu
    JavaScript versiyonu

    View full-size slide

  23. var User = React.createClass({
    render: function () {

    {this.props.user.username}


    }
    });
    ustunozgur
    ReactDOM.render(
    ,
    mountNode)
    Bu veri nasıl gelecek?

    View full-size slide

  24. Relay
    İstemci
    Sunucu

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

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

    View full-size slide

  28. Teşekkürler
    Üstün Özgür
    @ustunozgur
    [email protected]

    View full-size slide