React.js Web Programlama

1. React.js Web Uygulama Geliştirme www.cihanozhan.com

5. React Tarihçesi • • Facebook ana akış(news) için geliştirildi. Instagram için de kullanıldı. – Instagram ekibi Facebook kodlarını incelerken… JSConf’da tanıdıldı ve açık kaynak hale getirildi. React ile ilgili ilk tepkiler negatifti… – Bilinen yöntem ve best practice’lere aykırı olması vs. Yeniliğe karşı çıkmak! Sonra, yükseliş devri… React Native • • • •

6. React Neden Gerekliydi? • Real-time web uygulamalarının DOM üzerinde sürekli gerekli olmayan veri manipülasyonlarıyla uğraşmak zorunda olması. MVC’nin dar kaldığı kısımlarda daha esnek olabilmek. Büyük çaplı projelerin(Facebook) UI katmanlarının karmaşık hale gelmesi. Two-way data binding modelinin her zaman gerekli olmaması ve bunu değiştirmek. DOM ağacındaki kademeli güncelleme(cascading updates) sebebiyle oluşan yetersiz kullanıcı deneyimi(UX). • • • •

7. React Nedir? • Kullanıcı arayüzleri oluşturmak için geliştirilen JavaScript kütüphanesidir. – Bir Framework değildir. React sadece MVC’nin View katmanına odaklanır. – Model ve Controller katmanlarıyla ilgili bir özellik desteklemez. Açık kaynaklıdır ve Facebook tarafından yönetilir. ES6 ve Babel kullanır. UI’i render eder ve event’leri yanıtlar. Virtual DOM konseptini kullanır. In-Memory veri yapısı cache’i oluşturur, sonucun farklarını numaralandırır ve sonra da tarayıcının DOM’unu verimli şekilde günceller. • • • • •

8. MVC Nedir? • • • MVC bir yazılım tasarım desenidir. ASP.NET MVC, Angular React ya da diğer teknolojilerden bağımsızdır. MVC kullanıcıya açılan sunum/tasarım katmanını uygulamadan ayırır.

9. MVC (Kısa Tarih) • • 1979’da Trygve Reenskaug tarafından sunuldu. MVC tasarım deseni ilk olarak Smalltalk-80 framework’ünde kullanıldı. – Apple(Lisa ve Macintosh) arayüzlerinde kullanıldı.

10. MVC Kullanılan Bazı Teknolojiler • • • • • • • • Microsoft Foundation Classes(MFC) (aka Document/View architecture) Java Swing Qt Toolkit Cocoa GNUstep ASP.NET MVC ASP.NET API (Core, Web etc) React.js (Sadece View)

11. MVC?

12. MVC?

13. MVC?

14. MVC?

15. MVC?

16. MVC’nin Parçaları • Model – Business Layer, Model Logic View – Display Layer, View Logic Controller – Input Control, Control Logic • •

17. Model • • • Model katmanı uygulamanın veri operasyonlarını yönetmekten sorumludur. MVC deseninin veriye en yakın katmanıdır. Model katmanına domain layer da denir.

18. View • • View’in temel görevi veriyi kullanıcıya göstermektir. View katmanı modele bilgi isteği yapar. Elde edilen bilgi view’in sunum katmanı olarak çıktı üretmesini sağlar. MVC genellikle HTML sayfalarından oluşur. •

19. Controller • • Controller kullanıcı etkileşimini ele alan uygulama katmanıdır. Tipik bir controller view’den, kullanıcı veri giriş kontrollerinden ve gönderilen giriş kontrollerinden veri alır ve modele iletir.

20. Bağımlılık Hiyerarşisi • • • • • • MVC tasarım deseninde bir çeşit bağımlılık hiyerarşisi vardır. Model katmanı sadece kendisi hakkında bilgi sahibidir. Model katmanı kaynak kodunun View ya da Controller’a referansı yoktur. View katmanı Model katmanını tanır. Gösterilecek veriyi tanımak için… Ancak View katmanı Controller ile ilgili bilgiye sahip değildir. Controller katmanı hem Model hem de View’i tanır.

21. Bağımlılık Hiyerarşisi Neden Kullanılır? • • • Temel hedef bağımlılıkları minimize etmektir. View nesnesinin değiştirilmesi Modelin çalışmasını engellemez. Uygulama bir masaüstü uygulamadan bir mobil uygulamaya dönüştürülse bile Model katmanı değiştirilmeden aktarılabilir. Ancak yukarıdaki örnekteki bir değişiklik View ve Controller’ın değişmesini gerektirebilir. •

22. React Nedir? • Angular – Modules – Controllers – Directives – Scopes – Templating – Linking Functions – Filters – Dependency Injection React – Component •

23. React Neden Kullanılır? • • • Kolay okunur(declarative yaklaşım) ve anlaşılır View katmanı. Bileşen temelli/modüler web uygulama geliştirmek. Değeri ya da elemanın kendisinin sayfa üzerinde çok sık değiştirilmesi gerektiğinde... Yani Real-time tarzındaki uygulamalarda… Genel mimariyi anladıktan sonra uygulama geliştirmenin kolay olması. •

24. React Neden Hızlıdır? • • • One-way data binding kullanır. MVC’nin sadece View katmanına odaklanır. Gerçek DOM yerine Virtual DOM kullanır. – KeyValuePair ile in-memory’de veri saklar. DOM güncelleme yavaş, JavaScript ise hızlıdır. Virtual DOM kullanarak gerçek DOM’a toplu güncellemeler iletilerek performans artışı sağlanır. Server-Side Rendering yapabilir. Sayfanın tamamını değil, sadece Virtual DOM’da güncellenen elemanları gerçek DOM’a aktarır. • • • •

25. React’in Dezavantajı yok mu? • • • IE8 ve önceki versiyonlarında çalışmaz. En az ES6 desteği gerekir(babel ile). Ancak en güçlü haliyle ES6 ile kullanılır. Dökümantasyonuberbat değil, ancak müthiş de sayılmaz.

26. DOM?

27. DOM • • • • • • • Sayfadaki tüm HTML elemanlarına(elements) ulaşabilir. Sayfadaki tüm HTML niteliklerine(attributes) ulaşabilir. Sayfadaki tüm CSS stillerine(styles) ulaşabilir. Sayfadaki tüm HTML Element ve Attribute’lerini silebilir. Sayfadaki tüm HTML Element ve HTML Attibute oluşturabilir. Sayfadaki tüm HTML Element ve Attribute’ler ile çalışabilir. Sayfadaki tüm elemanlar için olay(event) oluşturabilir.

28. Virtual DOM Nedir? • • • Virtual DOM, DOM’un yeniden oluşturulması için kullanılır. Sadece state değişimi olduğunde re-render edilir ve gerçek DOM güncellenir. 2 adet Virtual DOM ağacı üzerinde farklar(diff) hesaplanır ve gerekli olan optimum adım bulunarak gerçek DOM’a aktarılır. – Fark Algoritması : 10 değişim içn 10 üzeri 3, yani 10*10*10=1000. React’da ise sadece 10’dur. Virtual DOM üzerindeki her değişiklik hemen aktarılmaz. Repaint, Reflow tek seferde uygulanır. •

29. DOM ve Virtual DOM

30. Her Güncellemede… (Virtual DOM) • • • • React yeni bir Virtual DOM ağaç yapısı oluşturur. Eski Virtual DOM ile farklarını alır. Minimum DOM manipülasyonu için gerekli hesaplamaları yapar ve sıraya koyar. Ve tüm güncellemeleri çalıştırır.

31. Virtual DOM Hızlı! • • • • • Çünkü, gerçek DOM yavaş. Çünkü, minimum DOM operasyonları hesaplanır. Çünkü, optimum DOM performansı için toplu okuma ve yazma yapar. Çünkü, genellikle manuel DOM operasyonlarından daha hızlıdır. Çünkü, otomatik top-level event delegation(with cross-browser HTML5 events)

32. Data Binding Yöntemleri • • Two-Way Data Binding One-Way Data Binding

33. Two-Way Data Binding Nedir? (Data Binding Yöntemleri)

34. One-Way Data Binding Nedir? (Data Binding Yöntemleri)

35. React Sözdizimi • • React basit ve anlaşılır kod yapısına sahiptir. İki tür kodlama yaklaşımı var: – Imperative – Declarative React Declarative kod yaklaşımını benimser ve kullanır. •

36. Declarative Vs. Imperative

37. Component Nedir? Component’ler, template’ler değildir • • Bir uygulamanın bağımsız olarak çalışabilmesini sağlayantemel yapıdır. Komponentler Idempotent fonksiyonlardır. – Çıktısı değişmeyen, her seferinde aynı çıktıyı üreten fonksiyonlara denir. Kullanıcı arayüzünü(UI) server-side render edilmiş bir uygulama gibi tanımlamayı sağlar. İç İçe(ChildComponent) oluşturulabilir. • •

38. Kurulum • Node.js Kurulumu (https://nodejs.org/en/) – npm install –g create-react-app – create-react-app --version – create-react-app todolist – cd todolist – code . – npm start

39. Demo (Component) • • • Örnek proje oluşturma. Yeni bir komponent oluşturup ilgili projeye eklemek ve çalıştırmak. Komponent’ler de değişken kullanımı.

40. React Kod Yapısı

41. React… • node_modules – npm install komutuyla yüklenen paket kütüphaneler bulunmaktadır. – Npm modülleri kontrol ederken package.json dosyasını kontrol eder ve belirtilen versiyonlara göre ilgili modülleri indirip node_modules klasörüne indirir. ES6(EcmaScript6) – Javascript’in 2015 yılında belirlenen yeni standartlarını temsil eder. – ES6'nın an itibari ile çoğu tarayıcı tarafından standart olarak kabul edilmediği için, production için kullanılması biraz sorun yaratabiliyor. Bu tip durumlarda transpile eden bir ek kütüphane kullanılması gerekiyor. Babel.js ile ES6 kodlarını compile edebiliyoruz. WebPack – Bir modül paketleyicisidir. Script, Style, Resim dosyalarınızı tek bir bundle altında toplar. – Tam olarak bir Task Manager(Grunt, Glup) olmasa da bir Task Manager’dan beklenen temel şeyleri karşılar. Javascript, CSS, png, less, sass vb. tüm dosyaları statik bir hale getirir ve tek çatı altında toplar. • •

42. Props (Stateless Data) • • • Render maliyetlerini azaltmak için geliştirilmiş Property nesnelerine denir. Değişmeyecek, yani sabit veriler için kullanılır. Komponentler arası veri aktarımı için kullanılan declerative nesnelerdir.

43. State (Stateless Data) • • • Props’un aksine, State’ler değişen veriler için kullanılır. Verinin her değişiminde, o bileşen yeniden render edilir. this.state komutuyla erişilir ve this.setState ile tanımlanırlar. – setState ile veri değiştirilir. Bu sayede her veri değişiminde render metodu çağrılır.

44. State React 16’dan önce • React 16’dan önce constructor içerisinde tanımlıyorduk.

45. State React 16’dan sonra • React 16’dan sonra constructor içerisinde olma zorunluluğu kalktı.

46. JSX Nedir? • • • JSX -> (Transpilers) -> JS XML’den miras alan sözdizime sahiptir. Yani XML kuralları geçerlidir. HTML üretmek için component’ler içerisine yazılır.

47. JSX Olmasaydı?

48. Ama JSX var…

49. JSX Kuralları • • • • Açılan eleman mutlaka kapatılmalıdır. Alt elemanlar tek bir eleman içinde sarmalanmalıdır. JSX elemanları kendi içlerinde HTML Attribute barındırabilir. İstisnalar – JS’deki class yerine JSX’de className kullanılmalıdır. – JS’deki for yerine JSX’de htmlFor kullanılmalıdır.