DevNot İstanbul 2018 – Net Core & WebAssembly

Selamlar,

12 Mayıs 2018 Cumartesi günü İstanbulda Nişantaşı Üniversitesinde DevNot etkinliğine konuşmacı olarak katıldım. Bu seferki içeriğim WebAssembly idi. Kodlama yapılacak makinede, kurulması gereken paketler aşağıdaki gibi tanımlanmıştır.

SETUP :

  • .NET Core 2.1 SDK yüklenir.
  • dotnet new –i Microsoft.AspNetCore.Blazor.Templates
  • dotnet new blazor -o BlazorProjects
  • cd BlazorToDoList
  • dotnet run

 

Webassembly ile hayatımızda nelerin değişeceği, tüm browserlar tarafından nasıl desteklendiği ve eksik gördüğüm yerlerin nasıl geliştirilmesi gerektiği konuları üzerine konuşuldu. Microsoft tarafından WebAssembly üzerine yapılan çalışmanın adı Blazor’dır. Amacı .NET web framework’ünün, bildiğimiz browser üzerinde çalıştırılmasıdır. Kısaca backend’e gerek kalmadan, frontend tarafta yazılan C# kodlarının browser tarafında derlenip çalıştırılmasıdır.

Örnek uygulama olarak live coding şeklinde bir alışveriş listesi yazılmıştır. İlk başta “Shared/NavMenu” altına aşağıdaki Shopping sayfası eklenir. Buradaki önemli nokta ==>”/shopping” tanımlamasıdır. Aslında bir routing  yol tanımlamasıdır. İşlem yapılacak sayfada ilgili keyword’ün tanımlanması gerekmektedir.

“Shopping.cshtml” sayfası üzerinde  ilgili routing tanımlama ‘@page “/shopping”‘ şeklinde yapılmaktadır.

NavMenu:

Bu örnekde, ilgili alışveriş sayfasında alınacak ürünler, lokal bir “json” file’dan çekilerek ekrana basılmıştır. Bunun için “@inject HttpClient Http” ile ilgili kütüphane sayfanın tepesinde tanımlanır.

WebAssembly bir sayfada server side kodlar “@functions{ … }” tanımlaması altında yazılmaktadır. Öncelikle alışveriş yapılacak “ShoppingList” sınıfı aşağıdaki gibi tanımlanmıştır:

Sayfa yüklendiğinde(OnInitAsync()) ilgili alışveriş listesi, asenkron olarak static bir “json” dosyasından aşağıdaki gibi çekilir.

Frontend denilen, alışveriş yaptığımız  ürünlerin listesinin görüneceği Razor sayfa gene aynı yerde “@functions{}” tanımlamasının üstünde, aşağıdaki kodlanır.

  • “_shoopingList” içinde gezilerek ilgili liste ekrana basılır.
  • İlgili listeye yeni bir ürün girilmesi için “<input>” alanlar tanımlanır. Herbir input alana, “bind” ile global tanımlı değişkenler(_name,_quantity,_price) bağlanır.
  • En sona, yeni ürün ekleme amacı ile “@AddItem” methodunu çağıran button eklenir.

AddItem: Aşağıda görüldüğü gibi, ilgili input alanlara bağlı değişkenler “ShoppingList“‘e eklenmiştir. Böylece aynı angular veya react’da olduğu gibi ilgili alışveriş listesi, dinamic olarak ekranda güncelleştirilmiştir.

WebAssembly gerçekten umut vaad eden bir teknoloji. Browserların server-side kodları da derleyip “dll”‘e dönüştürmesi, kendi başına muazzam bir konudur. Ama hız ve performans konuları, halen üzerinde düşünülmesi gereken durumlardandır. Kodun büyümesi durumunda, neler ile karşılaşılabileceği halen tam olarak bilinmemektedir. Browser üzerinde halen TCP socket’in dinlenememesi, ya da “System.Data.SqlClient”‘ın doğrudan browser üzerinden erişiminin mümkün olmaması, çözüm arayan konulardandır. Bunun gibi daha bir çok durum karşımıza çıkacaktır. Kısaca önümüzdeki dönemlerde, browserlar üzerinde çeşitli güncellemelerin gelmesi aşikardır.

Başta Uğur Umutluoğlu ve tüm Devnot ekbine böyle güzel bir etkinliği hazırladıkları ve bana da bu fırsatı verdikleri için hepsine çok teşekkür ederim.

Geldik bir seminerin daha sonuna. Yeni bir seminerde görüşmek üzere hepinize hoşçakalın, esen kalın.

Source Code: http://www.borakasmer.com/projects/WebAssemblyShopping.zip

Source Code2: https://github.com/borakasmer/devnotblazor

Pdf: http://www.borakasmer.com/projects/devnot_blazor.pptx

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. mustafa dedi ki:

    iyiki varsin be ya.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.