Nedir bu React.js dedikleri

© 2015 VNGRS. Tüm hakları açıktır. #vngrsfrontend FRONTEND TechTalk Series
Technopark React.js 9 Temmuz, Perşembe H. Ömer Şensoy Frontend Dev. @ VNGRS Nedir bu dedikleri?

#vngrsfrontend Tanışalım… • H. Ömer Şensoy  End. Mühendisi (Penn State
’08)  Frontend Dev. @ VNGRS (2013 -> …) 2 homer osensoy Twitter Github Frontend Dev? YTÜ Teknopark? Çalışan vs. Öğrenci? React.js bilen? Niyetli? Nasıl duydunuz? Kampüste olan/Dışardan gelen?

#vngrsfrontend Duyuru • 15 Temmuz Çarşamba 12:30 - 13:30  Frontend
Techtalk Series #2:   MapBox ile  İnteraktif Haritalar Oluşturmak  Kayıt: mapboxtalk.eventbrite.com 3

#vngrsfrontend React.js - kim?

#vngrsfrontend React.js - kim? • Facebook ve Instagram 5

#vngrsfrontend React.js - ne? • Render UI + Respond to
Events • Çok hızlı arayüz render eden JS kütüphanesi • Separation of Concerns vs.   Separation of Technologies • Maintain etme kafası alternatiﬂerine göre daha kolay (don’t mutate, rerender) 6

#vngrsfrontend React.js - neden? 7 • Video: Hacker Way: Rethinking
Web App Development at Facebook

#vngrsfrontend React.js - neden? • Frontend’de SPA geliştirmenin en büyük
sıkıntısı bir kere yükledikten sonra data sürekli değişiklik halinde ve UI’ın buna ayak uydurmalı • Eski dünya ne güzeldi… Php, refresh button • Her data değişikliklerini takip etmek yerine sayfası sil baştan yüklesek??? 8 • performans, form ﬁelds, scroll noktası vs.?

#vngrsfrontend React.js - Nasıl? Virtual DOM • Virtual DOM &
Event System • Her veri güncellemesinde React yeni bir sanal DOM yaratır • değişen veriye göre DOM’da ne olmuş (diff) • Gerçek DOM’da bu hale gelmek için yapılması gereken minimum değişiklik ne? • and batch executes all updates • Performans iPhone UIWebViewlarda 60 fps • En büyük zaman kaybı DOM etkileşiminde • SVG, VML ve <canvas> desteği 9

#vngrsfrontend React.js Onboarding Sıkıntıları • ReactJS bir şeyi çok iyi
yapıyor. Gerisi sana kalmış… V in MVC • AngularJS gibi full+full framework değil. (opiniated degil) • React.js ile iyi web uygulaması yapmak için React.js’ten fazlası lazım. 10

#vngrsfrontend React.js Onboarding Sonrası • ReactJS bir şeyi çok iyi
yapıyor. Gerisi sana kalmış… • İstersen AngularJS’in bir parçası olarak kullan (ngReact) • İstersen Modal katmanı olarak Flux mimarisini kullan • İstersen Firebase, Parse vs kullan. • İstersen Routing için Backbone kullan… 11

#vngrsfrontend React.js 101 <html> <head> <title>Selam React</title> </head> <body> <script>
</script> </body> </html> <script src="https://fb.me/react-0.13.3.min.js"></script> React.render(React.createElement('div', null,'Selam'), document.body)

#vngrsfrontend Chrome Extension - React detector

#vngrsfrontend ReactJS   ile Web Uygulamaları (Nasıl?)

#vngrsfrontend Uygulama = Componentlar 15 • Egghead.io - Building a
React.js App: Notetaker Introduction

#vngrsfrontend JSX 16 • Display Logic ve markup birbiriyle o
kadar beraber çalışıyor ki bunları birbirine karıştırmak aslında gerekiyor. • JSX, HTML yazar gibi JavaScript yazabiliyorsunuz. • Kurallar (reserved keywords) • Dev. Env.’tayken JSXTransformer kullanılabilir. • Production’da preprocessing (ör. Gulp/react-tools) • Linting works too

#vngrsfrontend Components 17 var Board = React.createClass({ }) render :
function() { } return ( <div className="board">Not Defterim</div> ); className="board" React.render(<Board />, document.getElementById(‘app')); type=“text/jsx“ var Board = React.createClass({displayName: "Board", render : function() { return ( React.createElement("div", {className: "board"}, "Not Defterim") ); } }) React.render(React.createElement(Board), document.getElementById(‘app’)) type=“text/javascript“

#vngrsfrontend Components var App = React.createClass({ render : function() {
return ( <div> <div className="container-fluid"> <div className="upper-section row"> <Title title={ this.props.data.title } desc={ this.props.data.description } embedLink={ this.props.data.embedLink } /> <Detailstats updateTime={ this.props.data.updateTime } visits={ this.props.data.visits } permission={ this.props.data.permission } publisher={ this.props.data.publisher } source={ this.props.data.source } /> </div> <div className="lower-section"> <Filter /> <Map title={ this.props.data.title } desc={ this.props.data.mapDescription } /> </div> </div> </div> ) } });

#vngrsfrontend Props • props bileşene gönderilen parametrelerin toplandığı nesne •
render metodundan erişebiliyoruz. 19 var SelamReact = React.createClass({ render: function () { return <div>Selam {this.props.isim}</div> } }) React.render(<SelamReact isim=“H.Omer”/>, document.body)

#vngrsfrontend States • Komponentin içindeki değişimler state üzerinden izleniyor. •
Değiştiği zaman UI V.DOM’da değişerek  fark render edilir. • Bu state'in ilk değerini vermek için yazmamız gereken bileşen metodu ise getInitialState. • Bunu yaptıktan sonra artık bu state değişkenine render içerisinde erişebiliyoruz. • Datada değişiklik yapmak istersek setState metodunu kullanıyoruz. • Angular digest loop vs. Reactive states 20

#vngrsfrontend States var Sayac = React.createClass({ }) • Üstün Özgür
- Makale, React.js'e Giriş 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>) }

#vngrsfrontend Component Lifecycle 22 http://facebook.github.io/react/index.html

#vngrsfrontend Composed Components • Case: Aynı verinin hem tablo hemde
graﬁkte görüldüğü 2 komponentten oluşan bir ana komponent var. • Birinde seçim yapınca diğeri de değişmeli. 23 Sayaç 1 Sayaç 2 Container

#vngrsfrontend Composed Components 24 Sayaç 1 Container Artır Metodu Azalt
Metodu Çarp Metodu Böl Metodu s: değer1 s: değer2 Sayaç 2 p: değer1 p: değer2 cb: artır cb: azalt

#vngrsfrontend Events & Callbacks 25 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>); } })

#vngrsfrontend Events & Callbacks 26 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>); } });

#vngrsfrontend Özet olarak… • Data ve UI kovalamacası V.DOM ile
çok daha maintainable ve performanslı bir hale geliyor • Data değişiklikleri one-way ve stateler üzerinden yürüyor. • App = Components (Basic, nested vs.) • Değişen data olabildiğince merkezi bir yerde state olarak tutulmalı. • Alt komponentlere prop olarak aktarılmalı. • Alttakiler bunun değiştiğini parente söylemek isterse callbackler ile parenttaki state değişim fonksiyonlarını trigger etmeli. 27

#vngrsfrontend dahası…

#vngrsfrontend React Native • React komponentlerini Native komponentlere map ederek
native uygulama yaratmak 29

#vngrsfrontend React Flux • React uygulamaları daha büyüdükçe, veri yönetimi
için yine Facebook'un duyurduğu Flux kütüphanesi kullanılmakta. 30

#vngrsfrontend Tooling • Chrome Extension, React Detector 31

#vngrsfrontend Tooling • Chrome Extension, React Developer Tools • HTML
DOM yapısına benzer şekilde bileşen ağacının görülmesine, bileşenlerin props ve state değişkenlerinin incelenmesi ve değiştirilmesine olanak vermekte. 32

#vngrsfrontend Referanslar • http://facebook.github.io/react/ • Makale - ReactJS Giriş, Üstün
Özgür  https://github.com/ustun/reactjs-giris • Lynda.com - Up and Running with React.js • PluralSight - React Fundamentals • Egghead.io - Building a React.js App: Notetaker Introduction 33

#vngrsfrontend Kaynaklar • http://facebook.github.io/react/ • https://facebook.github.io/react-native/ • http://facebook.github.io/ﬂux/ • https://github.com/davidchang/ngReact
34

#vngrsfrontend Kaynaklar - Video • Youtube, Pete Hunt: React: Rethinking
best practices  https://www.youtube.com/watch?v=x7cQ3mrcKaY • Üstün Özgür Videolar  https://www.youtube.com/user/ustunozgur/videos • F8 Konferans Videoları - https://developers.facebooklive.com/  Hacker Way: Rethinking Web App Development at Facebook • React.js Conf 28, 29 Ocak 2015  https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr • React Europe 2, 3 Haziran 2015  https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A • Lynda.com - • FrontendMasters - • PluralSight - • Egghead.io - 35

#vngrsfrontend Kaynaklar • Makale - ReactJS Giriş, Üstün Özgür  https://github.com/ustun/reactjs-giris
• Makale, React + Performance = ?  https://aerotwist.com/blog/react-plus-performance-equals-what/ • Makale, Faster AngularJS Rendering (AngularJS and ReactJS)  http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering- angularjs-and-reactjs/ 36

#vngrsfrontend Kaynaklar… Biz

#vngrsfrontend Teşekkürler Github homer https://speakerdeck.com/hosensoy/nedir-bu-react-dot-js-dedikleri osensoy Twitter

Nedir bu React.js dedikleri

Nedir bu React.js dedikleri

Other Decks in Technology

Featured

Transcript