SlideShare a Scribd company logo
1 of 32
Download to read offline
Modern
Frontend
{“author”: “cihad horuzoglu”}
● Server Side JavaScript
● V8 Engine
● Single thread
● Event Loop
● Non-Blocking I/O
● Ruby, Python ve Perl’den daha hızlı
● Çoğu kodu C ile yazıldı
● Client side’da yazılan çoğu kod nodejs sayesinde server
side’da da kullanılabiliyor
Node.js Giriş
> node server.js
V8 Engine
● Google tarafından geliştirildi
● Chrome altyapısı kullanıyor
● JavaScript’i native makina koduna çeviriyor
● Hız odaklı
● Açık kaynaklı
Single Thread
Event Loop
Blocking
Blocking vs Non-Blocking
Non Blocking
Non Blocking Event
Diğer diller
Node JS
Callback’ler
Node.js callbackleri sayesinde işlemler asenkron ve
gereksiz beklemeler olmadan çalışır.
npm nedir?
● ‘node packaged modules’ açılımı
● node ile birlikte geliyor
● modül repositorysi
● kolay bir şekilde modülünüzü paylaşabilirsiniz
● local yada global olarak modül kurabilyorsunuz
● npmjs.org repo adresi
Mongo DB Genel Bakış
● JSON objeleri ile veri saklama
● Document Oriented Data Base
(NoSQL)
● key / value mantığı ile çalışır
● key’ler stringdir
● value’lar number, string, array
yada object olabilir
Örnek JSON mongo data
Mongo DB Özellikleri
1. Esnek
2. Güçlü
3. Ölçekleme
4. Kullanım kolay
5. JavaScript üzerine inşa edildi
Kolay kullanım
Filtreleme, çoğaltma,
sıralama ve
birleştirme gibi
işlemleri kısa kodlar
yardımı ile
yapabiliyorsunuz
Kimler Kullanıyor
Angular JS Giriş
● Google tarafından geliştiriliyor
● Browser tabanlı MVC framework
● Open source
● SPA
● Angular JS 2.0 Mobile based
Neler sağlıyor?
● Directives
● $scope
● Two way data binding
● Dependecy Injection
● Services
● vs...
Web timeline...
Directives
● Extends HTML
$scope = evriything
● View ile controller’ı birbirine bağlar
● Data binding işlemlerini yapar
● Hiyerarşik bir düzene sahip
Two Way Data Binding
Model ve View arasında her bir değişimi izleyip,
iki katman arasında veri eşitleme sağlıyor.
Dependecy Injection
● Bir yazılım mimarisi (design pattern)
● loosely coupled - gevşek bağlılık ilkesi
Services
● Kodun işçi sınıfıdır
● Birbirlerine DI ile bağlıdır
● Client-server iletişim mimarisi
● HTTP protokolüne paralel olarak geliştirildi
● Lightweight
● JSON, XML, CSV formatlarını destekliyor
REST - (REpresentational State Transfer)
Create - (POST)
Read - (GET)
Update - (PUT)
Delete - (DELETE)
domain.com/api/user/1
domain.com/weatherForecast/{state}/{city}
console.log(‘ hadi kodlayalım ’);
Teşekkürler
Twitter : @cihadhoruzoglu
Website : cihadhoruzoglu.com
Kod repo : https://github.com/cihadhoruzoglu/AddressBook

More Related Content

What's hot

AspNet MVC ile metin resim sifreleme (Steganography)
AspNet MVC ile metin resim sifreleme (Steganography)AspNet MVC ile metin resim sifreleme (Steganography)
AspNet MVC ile metin resim sifreleme (Steganography)Engin Polat
 
Modern Web Uygulama Geliştirme
Modern Web Uygulama GeliştirmeModern Web Uygulama Geliştirme
Modern Web Uygulama Geliştirmeİbrahim ATAY
 
JavaScript ile Taş Kırmak
JavaScript ile Taş KırmakJavaScript ile Taş Kırmak
JavaScript ile Taş Kırmakİbrahim ATAY
 
ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)İbrahim ATAY
 
jQuery ile ASP.NET Uygulamaları Geliştirme
jQuery ile ASP.NET Uygulamaları GeliştirmejQuery ile ASP.NET Uygulamaları Geliştirme
jQuery ile ASP.NET Uygulamaları Geliştirmeİbrahim ATAY
 
React Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus DemirpolatReact Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus Demirpolatkloia
 
TensorflowJS - Devnot Summit 2019
TensorflowJS - Devnot Summit 2019TensorflowJS - Devnot Summit 2019
TensorflowJS - Devnot Summit 2019Yavuz Kömeçoğlu
 
Tartışıyoruz #1: Server Side vs Client Side
Tartışıyoruz #1: Server Side vs Client SideTartışıyoruz #1: Server Side vs Client Side
Tartışıyoruz #1: Server Side vs Client SideIbrahim Ersoy
 
Node js part 2 shared
Node js part 2 sharedNode js part 2 shared
Node js part 2 sharedEngin Yelgen
 
Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri Ömer ÖZKAN
 
Php ile Büyük Proje Yapmak
Php ile Büyük Proje YapmakPhp ile Büyük Proje Yapmak
Php ile Büyük Proje YapmakHüseyin Mert
 
Ölçeklenebilir Portal Mimarisi
Ölçeklenebilir Portal MimarisiÖlçeklenebilir Portal Mimarisi
Ölçeklenebilir Portal MimarisiHüseyin Mert
 
Gradle ile Proje Insası
Gradle ile Proje InsasıGradle ile Proje Insası
Gradle ile Proje InsasıÖmer ÖZKAN
 
Node js part 1 shared
Node js part 1 sharedNode js part 1 shared
Node js part 1 sharedEngin Yelgen
 
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)İbrahim ATAY
 
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013Hüseyin Mert
 
ESOGU The Code Day Workshop
ESOGU The Code Day WorkshopESOGU The Code Day Workshop
ESOGU The Code Day WorkshopBurak TUNGUT
 

What's hot (20)

AspNet MVC ile metin resim sifreleme (Steganography)
AspNet MVC ile metin resim sifreleme (Steganography)AspNet MVC ile metin resim sifreleme (Steganography)
AspNet MVC ile metin resim sifreleme (Steganography)
 
ASPNET Web API
ASPNET Web APIASPNET Web API
ASPNET Web API
 
Modern Web Uygulama Geliştirme
Modern Web Uygulama GeliştirmeModern Web Uygulama Geliştirme
Modern Web Uygulama Geliştirme
 
JavaScript ile Taş Kırmak
JavaScript ile Taş KırmakJavaScript ile Taş Kırmak
JavaScript ile Taş Kırmak
 
ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)
 
jQuery ile ASP.NET Uygulamaları Geliştirme
jQuery ile ASP.NET Uygulamaları GeliştirmejQuery ile ASP.NET Uygulamaları Geliştirme
jQuery ile ASP.NET Uygulamaları Geliştirme
 
React Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus DemirpolatReact Bootcamp Day 1 - Yunus Demirpolat
React Bootcamp Day 1 - Yunus Demirpolat
 
TensorflowJS - Devnot Summit 2019
TensorflowJS - Devnot Summit 2019TensorflowJS - Devnot Summit 2019
TensorflowJS - Devnot Summit 2019
 
Projeler
ProjelerProjeler
Projeler
 
Tartışıyoruz #1: Server Side vs Client Side
Tartışıyoruz #1: Server Side vs Client SideTartışıyoruz #1: Server Side vs Client Side
Tartışıyoruz #1: Server Side vs Client Side
 
Node js part 2 shared
Node js part 2 sharedNode js part 2 shared
Node js part 2 shared
 
Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri Kurumsal Java & Web Teknolojileri
Kurumsal Java & Web Teknolojileri
 
Php ile Büyük Proje Yapmak
Php ile Büyük Proje YapmakPhp ile Büyük Proje Yapmak
Php ile Büyük Proje Yapmak
 
Ölçeklenebilir Portal Mimarisi
Ölçeklenebilir Portal MimarisiÖlçeklenebilir Portal Mimarisi
Ölçeklenebilir Portal Mimarisi
 
mvc
mvcmvc
mvc
 
Gradle ile Proje Insası
Gradle ile Proje InsasıGradle ile Proje Insası
Gradle ile Proje Insası
 
Node js part 1 shared
Node js part 1 sharedNode js part 1 shared
Node js part 1 shared
 
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
 
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
Büyük Kamu Projelerinde PHP Kullanımı @ Phpİst 2013
 
ESOGU The Code Day Workshop
ESOGU The Code Day WorkshopESOGU The Code Day Workshop
ESOGU The Code Day Workshop
 

Viewers also liked

Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkCihad Horuzoğlu
 
Angular workflow with gulp.js
Angular workflow with gulp.jsAngular workflow with gulp.js
Angular workflow with gulp.jsCihad Horuzoğlu
 
Native vs. Hybrid Applications
Native vs. Hybrid ApplicationsNative vs. Hybrid Applications
Native vs. Hybrid ApplicationsCihad Horuzoğlu
 
Ee 303 part i
Ee 303   part iEe 303   part i
Ee 303 part iaswqaswq
 
Michael Wall: Maiden Speech Powerpoint
Michael Wall: Maiden Speech PowerpointMichael Wall: Maiden Speech Powerpoint
Michael Wall: Maiden Speech PowerpointMichael Wall
 
Project: Germany
Project: GermanyProject: Germany
Project: Germanykasas99
 
Appaja presentation indo
Appaja presentation indoAppaja presentation indo
Appaja presentation indoAppaja
 
MHP Xfit Trainer
MHP Xfit TrainerMHP Xfit Trainer
MHP Xfit TrainerLuis Green
 
Storm thorgerson
Storm thorgersonStorm thorgerson
Storm thorgersonimicki
 
Presentation1
Presentation1Presentation1
Presentation1Cindy Lee
 
ffvgggggggggggggggggggggggggggggggggggggg
ffvggggggggggggggggggggggggggggggggggggggffvgggggggggggggggggggggggggggggggggggggg
ffvggggggggggggggggggggggggggggggggggggggMiguel Sepulveda
 
Double page annotations
Double page annotationsDouble page annotations
Double page annotationsvishalpanwar12
 

Viewers also liked (19)

Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
Angular workflow with gulp.js
Angular workflow with gulp.jsAngular workflow with gulp.js
Angular workflow with gulp.js
 
Native vs. Hybrid Applications
Native vs. Hybrid ApplicationsNative vs. Hybrid Applications
Native vs. Hybrid Applications
 
Evaluation question 1
Evaluation question 1Evaluation question 1
Evaluation question 1
 
Ee 303 part i
Ee 303   part iEe 303   part i
Ee 303 part i
 
E-Course Presentation
E-Course PresentationE-Course Presentation
E-Course Presentation
 
Evaluation question 4
Evaluation question 4Evaluation question 4
Evaluation question 4
 
Michael Wall: Maiden Speech Powerpoint
Michael Wall: Maiden Speech PowerpointMichael Wall: Maiden Speech Powerpoint
Michael Wall: Maiden Speech Powerpoint
 
Project: Germany
Project: GermanyProject: Germany
Project: Germany
 
United kingdom
United kingdomUnited kingdom
United kingdom
 
Appaja presentation indo
Appaja presentation indoAppaja presentation indo
Appaja presentation indo
 
Mini Red Pinstripe by RimPro-Tec
Mini Red Pinstripe by RimPro-TecMini Red Pinstripe by RimPro-Tec
Mini Red Pinstripe by RimPro-Tec
 
MHP Xfit Trainer
MHP Xfit TrainerMHP Xfit Trainer
MHP Xfit Trainer
 
Storm thorgerson
Storm thorgersonStorm thorgerson
Storm thorgerson
 
Evaluation question 4
Evaluation question 4Evaluation question 4
Evaluation question 4
 
Presentation1
Presentation1Presentation1
Presentation1
 
Rimpro-tec Top Gear Live
Rimpro-tec Top Gear Live Rimpro-tec Top Gear Live
Rimpro-tec Top Gear Live
 
ffvgggggggggggggggggggggggggggggggggggggg
ffvggggggggggggggggggggggggggggggggggggggffvgggggggggggggggggggggggggggggggggggggg
ffvgggggggggggggggggggggggggggggggggggggg
 
Double page annotations
Double page annotationsDouble page annotations
Double page annotations
 

Similar to Modern Frontend

AngularJS sunumu
AngularJS sunumuAngularJS sunumu
AngularJS sunumuokanozeren
 
React.js Web Programlama
React.js Web ProgramlamaReact.js Web Programlama
React.js Web ProgramlamaCihan Özhan
 
Angular Web Programlama
Angular Web ProgramlamaAngular Web Programlama
Angular Web ProgramlamaCihan Özhan
 
Mongodb Ödev- İnternet programcılığı- IP2-Vize 2
Mongodb Ödev- İnternet programcılığı- IP2-Vize 2Mongodb Ödev- İnternet programcılığı- IP2-Vize 2
Mongodb Ödev- İnternet programcılığı- IP2-Vize 2gulindasdan
 
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo GameJstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo GameEmrah Ayanoglu
 
Spring application framework
Spring application frameworkSpring application framework
Spring application frameworkKenan Sevindik
 
cloud adoption strategy
cloud adoption strategy cloud adoption strategy
cloud adoption strategy Özgür Uğur
 
Mobil Pentest Eğitim Dökümanı
Mobil Pentest Eğitim DökümanıMobil Pentest Eğitim Dökümanı
Mobil Pentest Eğitim DökümanıAhmet Gürel
 
Node.js'e Hızlı Bir Bakış
Node.js'e Hızlı Bir BakışNode.js'e Hızlı Bir Bakış
Node.js'e Hızlı Bir BakışMustafa Dağdelen
 
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
 

Similar to Modern Frontend (20)

AngularJS sunumu
AngularJS sunumuAngularJS sunumu
AngularJS sunumu
 
React.js Web Programlama
React.js Web ProgramlamaReact.js Web Programlama
React.js Web Programlama
 
Angular Web Programlama
Angular Web ProgramlamaAngular Web Programlama
Angular Web Programlama
 
MongoDB ve C# Driver'ı
MongoDB ve C# Driver'ıMongoDB ve C# Driver'ı
MongoDB ve C# Driver'ı
 
NodeJS Nedir
NodeJS NedirNodeJS Nedir
NodeJS Nedir
 
Node js giriş (intro)
Node js giriş (intro)Node js giriş (intro)
Node js giriş (intro)
 
12factor apps
12factor apps12factor apps
12factor apps
 
Mongodb Ödev- İnternet programcılığı- IP2-Vize 2
Mongodb Ödev- İnternet programcılığı- IP2-Vize 2Mongodb Ödev- İnternet programcılığı- IP2-Vize 2
Mongodb Ödev- İnternet programcılığı- IP2-Vize 2
 
Mongo sunum
Mongo sunumMongo sunum
Mongo sunum
 
Web development
Web developmentWeb development
Web development
 
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo GameJstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
Jstanbul, Node.js based Socket.IO, Express and HTML5 based Bingo Game
 
Spring application framework
Spring application frameworkSpring application framework
Spring application framework
 
Uni stay 2017-2018
Uni stay 2017-2018 Uni stay 2017-2018
Uni stay 2017-2018
 
cloud adoption strategy
cloud adoption strategy cloud adoption strategy
cloud adoption strategy
 
Mobil Pentest Eğitim Dökümanı
Mobil Pentest Eğitim DökümanıMobil Pentest Eğitim Dökümanı
Mobil Pentest Eğitim Dökümanı
 
JavaScript Sunumu
JavaScript SunumuJavaScript Sunumu
JavaScript Sunumu
 
Node.js'e Hızlı Bir Bakış
Node.js'e Hızlı Bir BakışNode.js'e Hızlı Bir Bakış
Node.js'e Hızlı Bir Bakış
 
Nginx sunu 2014
Nginx sunu 2014Nginx sunu 2014
Nginx sunu 2014
 
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
 
React native 101
React native 101React native 101
React native 101
 

Modern Frontend