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

Modern Frontend

Dec 05, 2014

Download

Technology

Node.js, Mongo DB ve Angular JS hakkında bilgiler ve birbirleri ile REST API üzerinden iletişimleri.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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