React.js'e Giriş

Facebook'un arayüz geliştirme kütüphanesi React.js ile ilgili JavaScriptAnkara grubunda yaptığım sunum

Transcript

1. JavaScript Ankara javascriptankara.org Üstün Özgür @ustunozgur ustunozgur.com
2. React.js Kullanıcı Arayüzü Kütüphanesi
3. Tarihçe JSConf Mayıs 2013 Açık Kaynak
5. http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/
10. Arayüz Geliştirmedeki Zorluklar Verinin zaman içerisinde değiştiği büyük uygulamaları basit ve hızlı bir şekilde geliştirmek
11. Sunucu tabanlı arayüzler Veritabanı Taslak HTML f(veri) = html t=t0
12. JavaScript • 10 gün içinde geliştirildi - Eich • "C giysili Lisp" - Crockford • Çok esnek, fonksiyonel ve nesne yönelimli • CoffeeScript, ES6, underscore...
13. Daha Yeni Arayüz Daha Yeni Veri İstemci tabanlı arayüzler f(veri) ≠ html t0 t1 t2 Yeni Arayüz Yeni Veri Arayüz ve Veri Zaman
14. 10 kişi Çevrimiçi 11 kişi Çevrimiçi Tek Veri Değişimi İki Görüntü Değişimi Örnek: Chat $('#insanlar').append(htmlYeniKisi)   $('#sayi').text($('#sayi').text  +  1)
15. Görüntüyü sürekli yeniden oluşturalım re-render
16. Daha Yeni Arayüz Yeni Arayüz Daha Yeni Veri Yeni Veriden Yeni Görüntü f(veri) = html t0 t1 t2 Yeni Veri Arayüz Zaman Veri
17. Sanal DOM (Virtual DOM)
18. Temel Felsefe Kullanıcı arayüzün arkasındaki veri yapısına ve değişikliklerine odaklanmalı ve bu verinin nasıl görüntüleneceğini yalnızca bir kez tanımlamalı
19. Bileşenler Components
23. Basit Bir Bileşen: MerhabaDunya
24. Basit Bir Bileşen: MerhabaDunya var  MerhabaDunya  =  React.createClass({      render:  function  ()  {          return  <div>Merhaba  Dünya</div>;      }   }) React.createElement("div",  null,  "Merhaba  Dünya") JSX
25. Sayfaya Monte Etmek React.render(<MerhabaDunya/>,  document.body) Monte edileceği yer Monte edilecek bileşen
26. Karmaşık Bir Bileşen: Selamlama
27. Karmaşık Bir Bileşen: Selamlama var  Selamlama  =  React.createClass({      render:  function  ()  {          return  (              <div>                  <MerhabaDunya/>                  <MerhabaDunya/>              </div>)        }   })
28. Parametreli Bileşenler
29. Parametreli Bileşenler Çocuk Bileşen Merhaba Ustun isim=Ustun Çocuk Bileşen Merhaba Ozgur isim=Ozgur Çocuk Bileşen Merhaba Ali isim=Ali Ana (Tepe) Bileşen
30. props kullanan MerhabaDunya var  MerhabaDunya  =  React.createClass({      render:  function  ()  {          return  <div>Merhaba  {this.props.isim}</div>      }   }) JSX React.createElement("div",  null,                "Merhaba",this.props.isim)
31. var  Selamlama  =  React.createClass({          render:  function  ()  {              return  <div>                    <MerhabaDunya  isim="Üstün"/>                    <MerhabaDunya  isim="Özgür"/>                </div>            }   })
32. Değişen Veri: state
33. Değişen Veri: state
34. var Sayac = React.createClass({ getInitialState: function () { return {sayac: 0}; }, render: function () { <div>Sayaca {this.state.sayac} kez tıkladınız</div> } })
35. var Sayac = React.createClass({ getInitialState: function () { return {sayac: 0}; }, render: function () { return (<div> Sayaca {this.state.sayac} kez tıkladınız <button>Sayaç</button> </div>); } })
36. var Sayac = React.createClass({ getInitialState: function () { return {sayac: 0}; }, artir: function () { // Buraya ne yazmalıyız? }, render: function () { return ( <div> Sayaca {this.state.sayac} kez tıkladınız <button onClick={this.artir}>Sayaç</button> </div>; } })
37. var Sayac = React.createClass({ getInitialState: function () { return {sayac: 0}; }, artir: function () { var suAnkiSayac = this.state.sayac; this.setState({sayac: suAnkiSayac + 1}); }, render: function () { return ( <div> Sayaca {this.state.sayac} kez tıkladınız <button onClick={this.artir}>Sayaç</button> </div>) } }) setState!
38. Bütün state (veri) değişimleri açık seçik • AngularJS'te veri değişimi • Digest loop • Büyük uygulamalarda yavaşlık • Uygulamanın nasıl çalıştığının zor anlaşılması
39. İleri ve geri sayan sayaç
40. İleri ve geri sayan sayaç
41. Kaynak veri vs. İşlenmiş veri • Tek sayaç değeri: tek bir state değişkeni • İki görüntü değeri: işlenmiş veri • render'da state değişkeni ile hesapla
42. var Sayac = React.createClass({ getInitialState: function () { return {sayac: 0}; }, artir: function () { var suAnkiSayac = this.state.sayac; this.setState({sayac: suAnkiSayac + 1}); }, render: function () { return ( <div> Sayaca {this.state.sayac} kez tıkladınız. {10 - this.state.sayac} kez daha tıklamalısınız. <button onClick={this.artir}>Sayaç</button> </div> ); } Tek değişiklik
43. Ana Bileşen-Çocuk Bileşen Haberleşmesi Çocuk Bileşen Sayı: 5 sayi=5 Ana (Tepe) Bileşen sayiyiArtir sayi=6 Sayi=6 Click state sayı=5 props sayı=5 props sayı=6 state sayı=6
44. Örnek: Çift Sayaç
45. Örnek: Çift Sayaç
46. State'i Nerede Tutalım? • Ana bileşende mi? • Çocuk bileşende mi?
47. 10 kişi Çevrimiçi Örnek: Chat Sayı Bileşeni İnsan Listesi Bileşeni Chat Bileşeni
48. Sayaç 1: 3 kez tıkladın Sayaç 2: 5 kez tıkladın Sayaçlar state: sayac1: 0 sayac2: 5 props: sayac: 0 props: sayac: 5
49. var Sayac = React.createClass({ render: function () { return ( <div> Sayaca {this.props.sayac} kez tıkladınız. {10 - this.props.sayac} kez daha tıklamalısınız. <button onClick={this.props.artir}>Sayaç </button> </div>); } }) var Sayaclar = React.createClass({ getInitialState: function () { return {sayac1: 3, sayac2: 5}; }, sayac1Artir: function () { this.setState({sayac1: this.state.sayac1 + 1, sayac2: this.state.sayac2 - 1}); }, sayac2Artir: function () { this.setState({sayac1: this.state.sayac1 - 1, sayac2: this.state.sayac2 + 1}); }, render: function () { return ( <div> <Sayac sayac={this.state.sayac1} artir={this.sayac1Artir}/> <Sayac sayac={this.state.sayac2} artir={this.sayac2Artir}/> </div>); } })
50. var Sayaclar = React.createClass({ getInitialState: function () { return {sayac1: 3, sayac2: 5}; }, sayac1Artir: function () { this.setState({sayac1: this.state.sayac1 + 1, sayac2: this.state.sayac2 - 1}); }, sayac2Artir: function () { this.setState({sayac1: this.state.sayac1 - 1, sayac2: this.state.sayac2 + 1}); }, render: function () { return ( <div> <Sayac sayac={this.state.sayac1} artir={this.sayac1Artir}/> <Sayac sayac={this.state.sayac2} artir={this.sayac2Artir}/> </div>); } })
51. Diğer Önemli Konular • React Native ile iPhone ve Android uygulamaları • node.js ile sunucu tabanlı çalıştırma • Geliştirme esnasında Chrome eklentisi DevTools • Büyük uygulamalar için Facebook'un Flux kütüphanesi
52. Sonuç • Bütün veri değişiklikleri açık seçik • Uygulamalar bileşenlere ayrılmış durumda • Veri-görüntü senkronizasyon için sürekli yeniden görüntü oluşturma - Sanal DOM