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
   

   View Slide

2. React.js
   Kullanıcı Arayüzü Kütüphanesi
   

   View Slide

3. Tarihçe
   JSConf Mayıs 2013
   Açık Kaynak
   

   View Slide

4. View Slide

5. http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

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
    

    View Slide

11. Sunucu tabanlı arayüzler
    Veritabanı Taslak HTML
    f(veri) = html
    t=t0
    
    

    View Slide

12. JavaScript
    • 10 gün içinde geliştirildi - Eich
    • "C giysili Lisp" - Crockford
    • Çok esnek, fonksiyonel ve nesne yönelimli
    • CoffeeScript, ES6, underscore...
    

    View Slide

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
    
    

    View Slide

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)
    

    View Slide

15. Görüntüyü sürekli
    yeniden oluşturalım
    re-render
    

    View Slide

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
    

    View Slide

17. Sanal DOM (Virtual DOM)
    

    View Slide

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ı
    

    View Slide

19. Bileşenler
    Components
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. Basit Bir Bileşen:
    MerhabaDunya
    

    View Slide

24. Basit Bir Bileşen:
    MerhabaDunya
    var  MerhabaDunya  =  React.createClass({  
       render:  function  ()  {  
           return  Merhaba  Dünya;  
       }  
    })
    React.createElement("div",  null,  "Merhaba  Dünya")
    JSX
    

    View Slide

25. Sayfaya Monte Etmek
    React.render(,  document.body)
    Monte edileceği yer
    Monte edilecek bileşen
    

    View Slide

26. Karmaşık Bir Bileşen:
    Selamlama
    

    View Slide

27. Karmaşık Bir Bileşen:
    Selamlama
    var  Selamlama  =  React.createClass({  
       render:  function  ()  {  
           return  (  
                 
                     
                     
               )  
         }  
    })
    

    View Slide

28. Parametreli Bileşenler
    

    View Slide

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
    

    View Slide

30. props kullanan
    MerhabaDunya
    var  MerhabaDunya  =  React.createClass({  
       render:  function  ()  {  
           return  Merhaba  {this.props.isim}  
       }  
    })
    JSX
    React.createElement("div",  null,    
               "Merhaba",this.props.isim)
    

    View Slide

31. var  Selamlama  =  React.createClass({  
           render:  function  ()  {  
               return    
                       
                       
                   
             }  
    })
    

    View Slide

32. Değişen Veri: state
    

    View Slide

33. Değişen Veri: state
    

    View Slide

34. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    render: function () {
    Sayaca {this.state.sayac} kez tıkladınız
    }
    })
    

    View Slide

35. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    render: function () {
    return (
    Sayaca {this.state.sayac} kez tıkladınız
    Sayaç
    );
    }
    })
    

    View Slide

36. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    artir: function () {
    // Buraya ne yazmalıyız?
    },
    render: function () {
    return (
    
    Sayaca {this.state.sayac} kez tıkladınız
    Sayaç
    ;
    }
    })
    

    View Slide

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 (
    
    Sayaca {this.state.sayac} kez tıkladınız
    Sayaç
    )
    }
    })
    setState!
    

    View Slide

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ı
    

    View Slide

39. İleri ve geri sayan sayaç
    

    View Slide

40. İleri ve geri sayan sayaç
    

    View Slide

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
    

    View Slide

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 (
    
    Sayaca {this.state.sayac} kez tıkladınız.
    {10 - this.state.sayac} kez daha tıklamalısınız.
    Sayaç
    
    );
    }
    Tek değişiklik
    

    View Slide

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
    

    View Slide

44. Örnek: Çift Sayaç
    

    View Slide

45. Örnek: Çift Sayaç
    

    View Slide

46. State'i Nerede Tutalım?
    • Ana bileşende mi?
    • Çocuk bileşende mi?
    

    View Slide

47. 10 kişi Çevrimiçi
    Örnek: Chat
    Sayı Bileşeni
    İnsan Listesi
    Bileşeni
    Chat Bileşeni
    

    View Slide

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
    

    View Slide

49. var Sayac = React.createClass({
    render: function () {
    return (
    
    Sayaca {this.props.sayac} kez tıkladınız.
    {10 - this.props.sayac} kez daha
    tıklamalısınız.
    Sayaç
    
    );
    }
    })
    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 (
    
    
    
    );
    }
    })
    

    View Slide

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 (
    
    
    
    );
    }
    })
    

    View Slide

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
    

    View Slide

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
    

    View Slide