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
2. Facebook Açık Kaynak • React • Flux • GraphQL • Relay
3. GraphQL
4. Graph Query Language Çizge Sorgu Dili
5. Sunucudan veri çekmek
6. En yaygın yöntem • REST • 2000 • GET/POST/PUT/PATCH • Kaynak (Resource) URIları
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}
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} ]}
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} ]}
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
11. Neden URL'e ihtiyaç var?
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!
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.
14. Doğrudan İstediğimiz Veriyi Göndersek? user(id:1) { name surname customer { last4 } } GraphQL
15. Giden veri ile dönen veri aynı formatta user(id:1) { name surname customer { last4 } } user { name: "Ustun", surname: "Ozgur" customer: { last4: 1234 } }
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!
17. Örnek GraphQL sorguları http://graphql-swapi.parseapp.com/
18. GraphQL Sunucusu Istemci Sunucu GraphQL olarak veri isteği JSON olarak aynı formatta veri 1 2 { user(id:1) { name } } { user { name: "Ustun" } }
19. GraphQL bir sunucu değildir
20. GraphQL bir sorgulama dilidir. Bu dilden anlayan sunucular her dilde ve platformda yazılabilir. Aynı REST gibi. Ama daha iyi.
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ü!
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ı
23. Örnek GraphQL sunucusu JavaScript versiyonu
24. Relay
25. React
26. var User = React.createClass({ render: function () { <div> {this.props.user.username} <img src={this.props.user.avatar.url}/> </div> } }); ustunozgur ReactDOM.render( <User user={{username: 'ustunozgur', avatar: {url: 'http://....'}}/>, mountNode) Bu veri nasıl gelecek?
27. Relay İstemci Sunucu
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.
29. class Tea extends React.Component { render() { var {name, steepingTime} = this.props.tea; return ( <li key={name}> {name} (<em>{steepingTime} min</em>) </li> ); } } Tea = Relay.createContainer(Tea, { fragments: { tea: () => Relay.QL` fragment on Tea { name, steepingTime, } `, }, }); class TeaStore extends React.Component { render() { return <ul> {this.props.store.teas.map( tea => <Tea tea={tea} /> )} </ul>; } } 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( <Relay.RootContainer Component={TeaStore} route={new TeaHomeRoute()} />, mountNode );
30. Relay'in Hedefleri: 1.Deklaratif 2.Kolokasyon 3.Mutasyonlar 1.Otomatik veri tutarlılığı 2.Optimistik güncellemeler
31. Demo
32. Teşekkürler Üstün Özgür @ustunozgur ustun@ustunozgur.com