SlideShare a Scribd company logo
1 of 50
Download to read offline
React.js
Web Uygulama Geliştirme
www.cihanozhan.com
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
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).
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.
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.
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ı.
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)
MVC?
MVC?
MVC?
MVC?
MVC?
MVC’nin Parçaları
• Model
– Business Layer, Model Logic
• View
– Display Layer, View Logic
• Controller
– Input Control, Control Logic
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.
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.
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.
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.
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.
React Nedir?
• Angular
– Modules
– Controllers
– Directives
– Scopes
– Templating
– Linking Functions
– Filters
– Dependency Injection
• React
– Component
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ı.
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.
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ümantasyonu berbat değil, ancak müthiş de sayılmaz.
DOM?
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.
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.
DOM ve Virtual DOM
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.
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)
Data Binding Yöntemleri
• Two-Way Data Binding
• One-Way Data Binding
Two-Way Data Binding Nedir?
(Data Binding Yöntemleri)
One-Way Data Binding Nedir?
(Data Binding Yöntemleri)
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.
Declarative Vs. Imperative
Component Nedir?
Component’ler, template’ler değildir
• Bir uygulamanın bağımsız olarak çalışabilmesini sağlayan temel 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.
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
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ı.
React
Kod Yapısı
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.
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.
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.
State
React 16’dan önce
• React 16’dan önce constructor içerisinde tanımlıyorduk.
State
React 16’dan sonra
• React 16’dan sonra constructor içerisinde olma zorunluluğu kalktı.
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.
JSX Olmasaydı?
Ama JSX var…
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.
React.js Web Programlama

More Related Content

What's hot

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
 
Spring Framework Petclinic sample application
Spring Framework Petclinic sample applicationSpring Framework Petclinic sample application
Spring Framework Petclinic sample applicationAntoine Rey
 
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSRafael Casuso Romate
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsVikash Singh
 
Clean architecture with ddd layering in php
Clean architecture with ddd layering in phpClean architecture with ddd layering in php
Clean architecture with ddd layering in phpLeonardo Proietti
 
Node JS Crash Course
Node JS Crash CourseNode JS Crash Course
Node JS Crash CourseHaim Michael
 
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptxGetting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptxIlesh Mistry
 
Security in microservices architectures
Security in microservices architecturesSecurity in microservices architectures
Security in microservices architecturesinovia
 
Docker introduction
Docker introductionDocker introduction
Docker introductionGourav Varma
 
Clean backends with NestJs
Clean backends with NestJsClean backends with NestJs
Clean backends with NestJsAymene Bennour
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 
Java Design Patterns Tutorial | Edureka
Java Design Patterns Tutorial | EdurekaJava Design Patterns Tutorial | Edureka
Java Design Patterns Tutorial | EdurekaEdureka!
 

What's hot (20)

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
 
Spring Framework Petclinic sample application
Spring Framework Petclinic sample applicationSpring Framework Petclinic sample application
Spring Framework Petclinic sample application
 
Asp.net.
Asp.net.Asp.net.
Asp.net.
 
Containers and Docker
Containers and DockerContainers and Docker
Containers and Docker
 
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJS
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Secure coding in C#
Secure coding in C#Secure coding in C#
Secure coding in C#
 
Corejava ratan
Corejava ratanCorejava ratan
Corejava ratan
 
Angular
AngularAngular
Angular
 
Clean architecture with ddd layering in php
Clean architecture with ddd layering in phpClean architecture with ddd layering in php
Clean architecture with ddd layering in php
 
Node JS Crash Course
Node JS Crash CourseNode JS Crash Course
Node JS Crash Course
 
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptxGetting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
 
Security in microservices architectures
Security in microservices architecturesSecurity in microservices architectures
Security in microservices architectures
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
 
Clean backends with NestJs
Clean backends with NestJsClean backends with NestJs
Clean backends with NestJs
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Java Design Patterns Tutorial | Edureka
Java Design Patterns Tutorial | EdurekaJava Design Patterns Tutorial | Edureka
Java Design Patterns Tutorial | Edureka
 

Similar to React.js Web Programlama

Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...
Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...
Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...Erdem Avni Selçuk
 
İleri Seviye T-SQL Programlama - Chapter 19
İleri Seviye T-SQL Programlama - Chapter 19İleri Seviye T-SQL Programlama - Chapter 19
İleri Seviye T-SQL Programlama - Chapter 19Cihan Özhan
 
Angular Web Programlama
Angular Web ProgramlamaAngular Web Programlama
Angular Web ProgramlamaCihan Özhan
 
Solarwinds SAM ve Patch Manager
Solarwinds SAM ve Patch ManagerSolarwinds SAM ve Patch Manager
Solarwinds SAM ve Patch ManagerKavi International
 
React Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus DemirpolatReact Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus Demirpolatkloia
 
Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?Omer Buyukoglu
 
Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır?
Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır? Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır?
Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır? Mustafa AKIN
 
C sharp-indir
C sharp-indirC sharp-indir
C sharp-indirsersld30
 
Kurumsal Yazılım Geliştirme ve Visual Studio 2008
Kurumsal Yazılım Geliştirme ve Visual Studio 2008Kurumsal Yazılım Geliştirme ve Visual Studio 2008
Kurumsal Yazılım Geliştirme ve Visual Studio 2008mtcakmak
 
6.Oracle Day2009 Engin Senel V2
6.Oracle Day2009 Engin Senel V26.Oracle Day2009 Engin Senel V2
6.Oracle Day2009 Engin Senel V2Ermando
 

Similar to React.js Web Programlama (20)

MongoDB ve C# Driver'ı
MongoDB ve C# Driver'ıMongoDB ve C# Driver'ı
MongoDB ve C# Driver'ı
 
React
React React
React
 
12factor apps
12factor apps12factor apps
12factor apps
 
Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...
Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...
Erdem Avni SELÇUK 22 Nisan 2015 Çözümpark & Gediz Üniversitesi İzmir MVC Work...
 
React Temel Konular
React Temel KonularReact Temel Konular
React Temel Konular
 
Modern Frontend
Modern FrontendModern Frontend
Modern Frontend
 
İleri Seviye T-SQL Programlama - Chapter 19
İleri Seviye T-SQL Programlama - Chapter 19İleri Seviye T-SQL Programlama - Chapter 19
İleri Seviye T-SQL Programlama - Chapter 19
 
Angular Web Programlama
Angular Web ProgramlamaAngular Web Programlama
Angular Web Programlama
 
Web development
Web developmentWeb development
Web development
 
JavaScript Sunumu
JavaScript SunumuJavaScript Sunumu
JavaScript Sunumu
 
Php veritabani
Php veritabaniPhp veritabani
Php veritabani
 
Solarwinds SAM ve Patch Manager
Solarwinds SAM ve Patch ManagerSolarwinds SAM ve Patch Manager
Solarwinds SAM ve Patch Manager
 
ASP.NET Core 1.0
ASP.NET Core 1.0ASP.NET Core 1.0
ASP.NET Core 1.0
 
React Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus DemirpolatReact Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus Demirpolat
 
Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?
 
Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır?
Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır? Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır?
Docker Nedir, Ne İşe Yarar, Nasıl Kullanılmalıdır?
 
C sharp-indir
C sharp-indirC sharp-indir
C sharp-indir
 
Kurumsal Yazılım Geliştirme ve Visual Studio 2008
Kurumsal Yazılım Geliştirme ve Visual Studio 2008Kurumsal Yazılım Geliştirme ve Visual Studio 2008
Kurumsal Yazılım Geliştirme ve Visual Studio 2008
 
MongoDB Overview
MongoDB OverviewMongoDB Overview
MongoDB Overview
 
6.Oracle Day2009 Engin Senel V2
6.Oracle Day2009 Engin Senel V26.Oracle Day2009 Engin Senel V2
6.Oracle Day2009 Engin Senel V2
 

More from Cihan Özhan

MongoDB - NoSQL Overview
MongoDB - NoSQL OverviewMongoDB - NoSQL Overview
MongoDB - NoSQL OverviewCihan Özhan
 
MongoDB - JSON'a Genel Bakış
MongoDB - JSON'a Genel BakışMongoDB - JSON'a Genel Bakış
MongoDB - JSON'a Genel BakışCihan Özhan
 
AI and Machine Learning - Today’s Implementation Realities
AI and Machine Learning - Today’s Implementation RealitiesAI and Machine Learning - Today’s Implementation Realities
AI and Machine Learning - Today’s Implementation RealitiesCihan Özhan
 
Mobil Uygulama Güvenliği (Mobile Security)
Mobil Uygulama Güvenliği (Mobile Security)Mobil Uygulama Güvenliği (Mobile Security)
Mobil Uygulama Güvenliği (Mobile Security)Cihan Özhan
 
Blockchain : Decentralized Application Development (Turkish)
Blockchain : Decentralized Application Development (Turkish)Blockchain : Decentralized Application Development (Turkish)
Blockchain : Decentralized Application Development (Turkish)Cihan Özhan
 
Go Book - Fonksiyonlar, Metotlar, Arayüzler ve Yapılar
Go Book - Fonksiyonlar, Metotlar, Arayüzler ve YapılarGo Book - Fonksiyonlar, Metotlar, Arayüzler ve Yapılar
Go Book - Fonksiyonlar, Metotlar, Arayüzler ve YapılarCihan Özhan
 
Golang Book - Go Programlama Dili Temelleri
Golang Book - Go Programlama Dili TemelleriGolang Book - Go Programlama Dili Temelleri
Golang Book - Go Programlama Dili TemelleriCihan Özhan
 
Golang Book - Genel Bakış
Golang Book - Genel BakışGolang Book - Genel Bakış
Golang Book - Genel BakışCihan Özhan
 
Golang Book - Giriş
Golang Book - GirişGolang Book - Giriş
Golang Book - GirişCihan Özhan
 
MLaaS - Presenting & Scaling Machine Learning Models as Microservices
MLaaS - Presenting & Scaling Machine Learning Models as MicroservicesMLaaS - Presenting & Scaling Machine Learning Models as Microservices
MLaaS - Presenting & Scaling Machine Learning Models as MicroservicesCihan Özhan
 
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...Cihan Özhan
 
Endüstriyel Yapay Zeka ve Otonom Sistemler
Endüstriyel Yapay Zeka ve Otonom SistemlerEndüstriyel Yapay Zeka ve Otonom Sistemler
Endüstriyel Yapay Zeka ve Otonom SistemlerCihan Özhan
 
AI Security : Machine Learning, Deep Learning and Computer Vision Security
AI Security : Machine Learning, Deep Learning and Computer Vision SecurityAI Security : Machine Learning, Deep Learning and Computer Vision Security
AI Security : Machine Learning, Deep Learning and Computer Vision SecurityCihan Özhan
 
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...Cihan Özhan
 
Python Programlama Dili
Python Programlama DiliPython Programlama Dili
Python Programlama DiliCihan Özhan
 
İleri Seviye T-SQL Programlama - Chapter 21
İleri Seviye T-SQL Programlama - Chapter 21İleri Seviye T-SQL Programlama - Chapter 21
İleri Seviye T-SQL Programlama - Chapter 21Cihan Özhan
 
İleri Seviye T-SQL Programlama - Chapter 20
İleri Seviye T-SQL Programlama - Chapter 20İleri Seviye T-SQL Programlama - Chapter 20
İleri Seviye T-SQL Programlama - Chapter 20Cihan Özhan
 
İleri Seviye T-SQL Programlama - Chapter 18
İleri Seviye T-SQL Programlama - Chapter 18İleri Seviye T-SQL Programlama - Chapter 18
İleri Seviye T-SQL Programlama - Chapter 18Cihan Özhan
 
İleri Seviye T-SQL Programlama - Chapter 17
İleri Seviye T-SQL Programlama - Chapter 17İleri Seviye T-SQL Programlama - Chapter 17
İleri Seviye T-SQL Programlama - Chapter 17Cihan Özhan
 
İleri Seviye T-SQL Programlama - Chapter 16
İleri Seviye T-SQL Programlama - Chapter 16İleri Seviye T-SQL Programlama - Chapter 16
İleri Seviye T-SQL Programlama - Chapter 16Cihan Özhan
 

More from Cihan Özhan (20)

MongoDB - NoSQL Overview
MongoDB - NoSQL OverviewMongoDB - NoSQL Overview
MongoDB - NoSQL Overview
 
MongoDB - JSON'a Genel Bakış
MongoDB - JSON'a Genel BakışMongoDB - JSON'a Genel Bakış
MongoDB - JSON'a Genel Bakış
 
AI and Machine Learning - Today’s Implementation Realities
AI and Machine Learning - Today’s Implementation RealitiesAI and Machine Learning - Today’s Implementation Realities
AI and Machine Learning - Today’s Implementation Realities
 
Mobil Uygulama Güvenliği (Mobile Security)
Mobil Uygulama Güvenliği (Mobile Security)Mobil Uygulama Güvenliği (Mobile Security)
Mobil Uygulama Güvenliği (Mobile Security)
 
Blockchain : Decentralized Application Development (Turkish)
Blockchain : Decentralized Application Development (Turkish)Blockchain : Decentralized Application Development (Turkish)
Blockchain : Decentralized Application Development (Turkish)
 
Go Book - Fonksiyonlar, Metotlar, Arayüzler ve Yapılar
Go Book - Fonksiyonlar, Metotlar, Arayüzler ve YapılarGo Book - Fonksiyonlar, Metotlar, Arayüzler ve Yapılar
Go Book - Fonksiyonlar, Metotlar, Arayüzler ve Yapılar
 
Golang Book - Go Programlama Dili Temelleri
Golang Book - Go Programlama Dili TemelleriGolang Book - Go Programlama Dili Temelleri
Golang Book - Go Programlama Dili Temelleri
 
Golang Book - Genel Bakış
Golang Book - Genel BakışGolang Book - Genel Bakış
Golang Book - Genel Bakış
 
Golang Book - Giriş
Golang Book - GirişGolang Book - Giriş
Golang Book - Giriş
 
MLaaS - Presenting & Scaling Machine Learning Models as Microservices
MLaaS - Presenting & Scaling Machine Learning Models as MicroservicesMLaaS - Presenting & Scaling Machine Learning Models as Microservices
MLaaS - Presenting & Scaling Machine Learning Models as Microservices
 
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
 
Endüstriyel Yapay Zeka ve Otonom Sistemler
Endüstriyel Yapay Zeka ve Otonom SistemlerEndüstriyel Yapay Zeka ve Otonom Sistemler
Endüstriyel Yapay Zeka ve Otonom Sistemler
 
AI Security : Machine Learning, Deep Learning and Computer Vision Security
AI Security : Machine Learning, Deep Learning and Computer Vision SecurityAI Security : Machine Learning, Deep Learning and Computer Vision Security
AI Security : Machine Learning, Deep Learning and Computer Vision Security
 
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
Yapay Zeka Güvenliği : Machine Learning & Deep Learning & Computer Vision Sec...
 
Python Programlama Dili
Python Programlama DiliPython Programlama Dili
Python Programlama Dili
 
İleri Seviye T-SQL Programlama - Chapter 21
İleri Seviye T-SQL Programlama - Chapter 21İleri Seviye T-SQL Programlama - Chapter 21
İleri Seviye T-SQL Programlama - Chapter 21
 
İleri Seviye T-SQL Programlama - Chapter 20
İleri Seviye T-SQL Programlama - Chapter 20İleri Seviye T-SQL Programlama - Chapter 20
İleri Seviye T-SQL Programlama - Chapter 20
 
İleri Seviye T-SQL Programlama - Chapter 18
İleri Seviye T-SQL Programlama - Chapter 18İleri Seviye T-SQL Programlama - Chapter 18
İleri Seviye T-SQL Programlama - Chapter 18
 
İleri Seviye T-SQL Programlama - Chapter 17
İleri Seviye T-SQL Programlama - Chapter 17İleri Seviye T-SQL Programlama - Chapter 17
İleri Seviye T-SQL Programlama - Chapter 17
 
İleri Seviye T-SQL Programlama - Chapter 16
İleri Seviye T-SQL Programlama - Chapter 16İleri Seviye T-SQL Programlama - Chapter 16
İleri Seviye T-SQL Programlama - Chapter 16
 

React.js Web Programlama

  • 2.
  • 3.
  • 4.
  • 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ümantasyonu berbat 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.
  • 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.
  • 37. Component Nedir? Component’ler, template’ler değildir • Bir uygulamanın bağımsız olarak çalışabilmesini sağlayan temel 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ı.
  • 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.
  • 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.