Modern Frontend

1,638 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,638
On SlideShare
0
From Embeds
0
Number of Embeds
879
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Modern Frontend

  1. 1. Modern Frontend {“author”: “cihad horuzoglu”}
  2. 2. ● 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ş
  3. 3. > node server.js
  4. 4. V8 Engine ● Google tarafından geliştirildi ● Chrome altyapısı kullanıyor ● JavaScript’i native makina koduna çeviriyor ● Hız odaklı ● Açık kaynaklı
  5. 5. Single Thread
  6. 6. Event Loop
  7. 7. Blocking Blocking vs Non-Blocking Non Blocking
  8. 8. Non Blocking Event Diğer diller Node JS
  9. 9. Callback’ler Node.js callbackleri sayesinde işlemler asenkron ve gereksiz beklemeler olmadan çalışır.
  10. 10. 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
  11. 11. 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
  12. 12. Örnek JSON mongo data
  13. 13. Mongo DB Özellikleri 1. Esnek 2. Güçlü 3. Ölçekleme 4. Kullanım kolay 5. JavaScript üzerine inşa edildi
  14. 14. Kolay kullanım Filtreleme, çoğaltma, sıralama ve birleştirme gibi işlemleri kısa kodlar yardımı ile yapabiliyorsunuz
  15. 15. Kimler Kullanıyor
  16. 16. Angular JS Giriş ● Google tarafından geliştiriliyor ● Browser tabanlı MVC framework ● Open source ● SPA ● Angular JS 2.0 Mobile based
  17. 17. Neler sağlıyor? ● Directives ● $scope ● Two way data binding ● Dependecy Injection ● Services ● vs...
  18. 18. Web timeline...
  19. 19. Directives ● Extends HTML
  20. 20. $scope = evriything ● View ile controller’ı birbirine bağlar ● Data binding işlemlerini yapar ● Hiyerarşik bir düzene sahip
  21. 21. 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.
  22. 22. Dependecy Injection ● Bir yazılım mimarisi (design pattern) ● loosely coupled - gevşek bağlılık ilkesi
  23. 23. Services ● Kodun işçi sınıfıdır ● Birbirlerine DI ile bağlıdır
  24. 24. ● 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}
  25. 25. console.log(‘ hadi kodlayalım ’);
  26. 26. Teşekkürler Twitter : @cihadhoruzoglu Website : cihadhoruzoglu.com Kod repo : https://github.com/cihadhoruzoglu/AddressBook

×