Merhaba arkadaşlar, ASP.NET MVC eğitimlerinin ardından sizlere NodeJS ile ilgili eğitimler vermeye başlamak istedim. Bu bağlamda sizlere önce bir basit MVC uygulaması hazırladım. Sonrasındaki derslerde NodeJs ile ilgili hangi yerlere işaret ettiğini öğreniyor olacağız. Eğitimlerin sonuna geldiğimizde MVC ve NodeJS ile uygulama geliştirme ve yayınlama ile ilgili konuları işliyor olacağız. Eğitim'de belirtilen HTML Kaynağı aşağıdadır. Uygulamanın tamamını bu linkten indirebilirsiniz. [TodoApp.zip (12,46 kb)]
<html>
<head>
<title>Simple Todo App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body class="container">
<div>
<br />
</div>
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="Todo ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Add Todo</button>
</span>
</div>
<h4>Todo List</h4>
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
</div>
</body>
</html>
Web sitenizin hızını arttırabilmek için yapabileceğimiz çok şey ama basitçe aklıma gelenleri hızlıca yazıp uzatmadan kapatcam konuyu.
- JS, Css dosyalarınızı sıkıştırın ve tek dosya halinde getirin. Örnek 30 adet js ve css dosyanız var. Bunları 15 js, 15 css düşünün. Sunucunuza ayrı ayrı 30 çağrı atılmasındansa tek dosya olacak şekilde ScriptFiles.js ve StyleFiles.css olarak iki çağrı atacaktır. Dosya boyutlarınız büyüyecektir fakat bu sorunuda StaticFile Caching ile çözebilirsiniz. Bu konu ile ilgili araştırma yapacağınız anahtar kelime grupları şöyle; Bundle And Minification ayrıca bu link içerisinde anlatılanları eksiksiz yapın derin çok faydalı oluyor. Ayrıca Javascript dosyalarınızı kesinlikle body'nin sonuna koyun head içerisinde olduğunda sayfa açılma beklemesini etkiyor.
- Server Gücü, İnternet Hızı ve Server Region Seçimi; Bu konuda da Amazon Web Server(AWS) kullandığımız için en ucuz server olan OREGON Serverlarını tercih ettim fakat Türkiye'deki bir sunucu 1 kb dosyayı 10-30ms civarında getirebilirken ABD(Oregon) sunucusu 230ms ve üzerinde cevap veriyordu.
- Web Sitenizi klasik mantıktan kurtarın en azından Yönetim Paneli için söyleyebileceklerim şu yönde;
Her sayfa açılışında en az 1-2 MB scriptiniz ve yönetim panelini kullanan kişiler size küfür ediyorlar :) Çok yavaş diye. Burada çözüm ilk açılışta Scriptler yüklendikten sonra sayfa geçişlerini Ajax ile Bir div içerisinde gerçekleştiriyor olmak. bu bize ne kadar diye düşünelim.
2 MB Script, 400kb Style, Sayfanın normal açılma hızı 500ms olsun. 1mbps internet hızı olan birisi server iyi durumdaysa bunu 3-5 saniyede indirebilecek ve düşünün kü bir rapor sayfası Sayfa açılma hızı 2-3 saniye üzerine çıkmaya başladıkça üzerinde birde 3-5 saniye binecek. Eğer dediğim şekilde bir yöntem tercih edersiniz. sayfa geçiş hızınız 500ms olacak. 5 saniye yerine... Konu ile ilgili AngularJS Routing veya SammyJS önerebilirim. Bence performans için ve maliyetleri düşürmek için önemli büyük bir bandwith bu sayede ortadan kalkıyor.
Bu konu ile ilgili aklıma gelenler şimdilik bu kadar sorularınız olursa müsait olduğum zamanlar yazarım onlarıda...