modern frontend

32
Modern Frontend {“author”: “cihad horuzoglu”}

Upload: cihad-horuzoglu

Post on 05-Dec-2014

359 views

Category:

Technology


5 download

DESCRIPTION

Node.js, Mongo DB ve Angular JS hakkında bilgiler ve birbirleri ile REST API üzerinden iletişimleri.

TRANSCRIPT

Page 1: Modern Frontend

Modern

Frontend

{“author”: “cihad horuzoglu”}

Page 2: Modern Frontend
Page 3: Modern Frontend

● 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ş

Page 4: Modern Frontend

> node server.js

Page 5: Modern Frontend

V8 Engine

● Google tarafından geliştirildi

● Chrome altyapısı kullanıyor

● JavaScript’i native makina koduna çeviriyor

● Hız odaklı

● Açık kaynaklı

Page 6: Modern Frontend

Single Thread

Page 7: Modern Frontend

Event Loop

Page 8: Modern Frontend
Page 9: Modern Frontend
Page 10: Modern Frontend

Blocking

Blocking vs Non-Blocking

Non Blocking

Page 11: Modern Frontend

Non Blocking Event

Diğer diller

Node JS

Page 12: Modern Frontend

Callback’ler

Node.js callbackleri sayesinde işlemler asenkron ve

gereksiz beklemeler olmadan çalışır.

Page 13: Modern Frontend

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

Page 14: Modern Frontend
Page 15: Modern Frontend

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

Page 16: Modern Frontend

Örnek JSON mongo data

Page 17: Modern Frontend

Mongo DB Özellikleri

1. Esnek

2. Güçlü

3. Ölçekleme

4. Kullanım kolay

5. JavaScript üzerine inşa edildi

Page 18: Modern Frontend

Kolay kullanım

Filtreleme,

çoğaltma, sıralama

ve birleştirme gibi

işlemleri kısa kodlar

yardımı ile

yapabiliyorsunuz

Page 19: Modern Frontend

Kimler Kullanıyor

Page 20: Modern Frontend
Page 21: Modern Frontend
Page 22: Modern Frontend

Angular JS Giriş

● Google tarafından geliştiriliyor

● Browser tabanlı MVC framework

● Open source

● SPA

● Angular JS 2.0 Mobile based

Page 23: Modern Frontend

Neler sağlıyor?

● Directives

● $scope

● Two way data binding

● Dependecy Injection

● Services

● vs...

Page 24: Modern Frontend

Web timeline...

Page 25: Modern Frontend

Directives

● Extends HTML

Page 26: Modern Frontend

$scope = evriything

● View ile controller’ı birbirine bağlar

● Data binding işlemlerini yapar

● Hiyerarşik bir düzene sahip

Page 27: Modern Frontend

Two Way Data Binding semiallahulimenhamideh.

Model ve View arasında her bir değişimi

izleyip, iki katman arasında veri eşitleme

sağlıyor.

Page 28: Modern Frontend

Dependecy Injection

● Bir yazılım mimarisi (design pattern)

● loosely coupled - gevşek bağlılık ilkesi

Page 29: Modern Frontend

Services

● Kodun işçi sınıfıdır

● Birbirlerine DI ile bağlıdır

Page 30: Modern Frontend

● 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}

Page 31: Modern Frontend

console.log(‘ hadi kodlayalım ’);

Page 32: Modern Frontend

Teşekkürler

Kod repo: https://github.com/cihadhoruzoglu/AddressBook