Fatih Boy

Asp.Net Core ekibi üyeleri bir süredir sessiz sedasız bir projeye devam etmekte; ASP.Net JavaScriptServices. Asp.Net JavaScriptServices; Asp.Net Core geliştiricileri için  .Net uygulamaları ile JavaScript uygulamaları arasındaki geçişi transparan yapmayı hedefleyen bir dizi teknoloji olarak özetlenebilir. Bu makalemle ilk adımlarımızı atacağımız Asp.Net Javascript Services, bize aşağıdaki yetenekleri sunmaktadır;

• Çalışma zamanında .Net uygulamalarınızdan NPM paketlerini çağırabilme,
• Tek-Sayfa Uygulama (Single-Page Application, SPA) bileşenlerinin sunucu üzerinde önceden yorumlanması,
• Webpack geliştirici ara-katmanı,
• Canlı modül değişimi (Hot Module Replacement, HRM),
• Sunucu ve istemci tarafı yönlendirme entegrasyonu,
• Sunucu ve istemci tarafı doğrulama entegrasyonu,
• Knockout uygulamaları için geç yükleme (Lazy Loading),
• Angular 2 uygulamaları için “Cache Priming”

Sıfırdan başladığınız bir projede bu hizmetleri hızlıca kullanmaya başlayabilmeniz için ekip aynı zamanda bir de Yeoman şablonu geliştirmiş durumda. Örneklerimizi sıfırdan bir proje üzerinde göreceğimiz için Yeoman Generator’ünü kurmakta fayda var;

npm install -g yo generator-aspnetcore-spa

Örnek projemizi koyacağımız bir klasör oluşturalım;

mkdir enterprisecoding-sample

Daha sonra bu klasör içerisinde kurulumunu az önce yaptığımız aspnetcore-spa generator’ünü çalıştıralım;

cd enterprisecoding-sample
yo aspnetcore-spa

Örnek olarak bir Angular 2 uygulaması oluşturalım. Framework seçimi ve proje adını verdikten sonra Yeoman generator bizim için gerekli modülleri hazırlayacaktır.

Yeoman’ın işini bitirmesi ardından aşağıdaki komutla örnek uygulamamızı çalıştırarak herşeyin yolunda gittiğini teyit edebilirsiniz;

dotnet run

Uygulamamız çalışmaya başlayacaktır. http://localhost:5000 adresinden ziyaret edebilirsiniz.

Şimdi sıra Asp.Net Javascript Services’i deneyimlemeye.

Öncelikle Yeoman şablonunun bizim için oluşturduğu kod içerisinde biraz gezinelim;

Oluşturulan proje hiyerarşisine dikkat edecek olursanız, alışık olduğumuz asp.net projelerinden farklı olarak node_modules klasörünün de olduğunu göreceksiniz.

Uygulama kodları arasında HomeController.cs ve Index.cshtml’i inceleyecek olursanız, uygulamanın standard bir Angular 2 uygulaması olduğunu göreceksiniz. SampleDataController sınıfını inceleyecek olursanız rastgele şekilde hava durumu verisi üreten bir rest servisi olduğunu görebilirsiniz;

Yukarıdaki bilgiler ışığında, şablondan oluşturulan uygulamanın tam anlamıyla javascript üzerinde çalıştığına ikna olduğunuzu umuyorum.

Şimdi, sıra işleri biraz ilginç hale getirmekte. Bu uygulamanın standart bir uygulama olduğunu varsayalım. Bu durumda tarayıcıdan javascript’i kapattığınızda ne olmasını beklersiniz?

Normal şartlarda, olması gereken Angular 2 üzerinde geliştirilen uygulamanın javascript’ler disable olduğu için hiç bir şekilde çalışmaması gerekir. Öte yandan, tarayıcınızı tazeleyerek uygulamada gezinmeye devam ettiğinizde sayfaların sorunsuz şekilde açıldığını, hatta Fetch data linki ile açılan hava durumu sayfasının her defasında rastgele veriler üretmeye devam ettiğini göreceksiniz…

Yeoman Angular 2 şablonu varsayılan olarak, yukarıda sıraladığım özelliklerden tek-sayfa uygulama (Single-Page Application, SPA) bileşenlerinin sunucu üzerinde önceden yorumlanması aktif olarak proje oluşturması sırada açılacaktır. Dolayısıyla tarayıcı tarafında son kullanıcı javascript’leri kapattığında bu durum Asp.Net JavascriptServices tarafından tespit edilecek ve javascriptleri yorumlama işi istemci yerine sunucuda gerçekleştirilecektir.