Modern Frontend
-
Upload
cihad-horuzoglu -
Category
Technology
-
view
361 -
download
5
description
Transcript of Modern Frontend
![Page 1: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/1.jpg)
Modern
Frontend
{“author”: “cihad horuzoglu”}
![Page 2: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/2.jpg)
![Page 3: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/3.jpg)
● 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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/4.jpg)
> node server.js
![Page 5: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/6.jpg)
Single Thread
![Page 7: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/7.jpg)
Event Loop
![Page 8: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/8.jpg)
![Page 9: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/9.jpg)
![Page 10: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/10.jpg)
Blocking
Blocking vs Non-Blocking
Non Blocking
![Page 11: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/11.jpg)
Non Blocking Event
Diğer diller
Node JS
![Page 12: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/12.jpg)
Callback’ler
Node.js callbackleri sayesinde işlemler asenkron ve
gereksiz beklemeler olmadan çalışır.
![Page 13: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/14.jpg)
![Page 15: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/16.jpg)
Örnek JSON mongo data
![Page 17: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/18.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/19.jpg)
Kimler Kullanıyor
![Page 20: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/20.jpg)
![Page 21: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/21.jpg)
![Page 22: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/22.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/23.jpg)
Neler sağlıyor?
● Directives
● $scope
● Two way data binding
● Dependecy Injection
● Services
● vs...
![Page 24: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/24.jpg)
Web timeline...
![Page 25: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/25.jpg)
Directives
● Extends HTML
![Page 26: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/26.jpg)
$scope = evriything
● View ile controller’ı birbirine bağlar
● Data binding işlemlerini yapar
● Hiyerarşik bir düzene sahip
![Page 27: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/27.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/28.jpg)
Dependecy Injection
● Bir yazılım mimarisi (design pattern)
● loosely coupled - gevşek bağlılık ilkesi
![Page 29: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/29.jpg)
Services
● Kodun işçi sınıfıdır
● Birbirlerine DI ile bağlıdır
![Page 30: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/30.jpg)
● 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](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/31.jpg)
console.log(‘ hadi kodlayalım ’);
![Page 32: Modern Frontend](https://reader034.fdocuments.net/reader034/viewer/2022052310/5484fca6b47959f60c8b4d43/html5/thumbnails/32.jpg)
Teşekkürler
Kod repo: https://github.com/cihadhoruzoglu/AddressBook