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:
|
1 2 3 4 5 |
<li class="nav-item px-3"> <NavLink class="nav-link" href="/shopping"> <span class="oi oi-list-rich" aria-hidden="true"></span> Shopping List </NavLink> </li> |
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:
|
1 2 3 4 5 6 7 |
class ShoppingList { public string Name { get; set;} public string Quantity { get; set; } public string Price { get; set;} public bool IsBought { get; set; } } |
Sayfa yüklendiğinde(OnInitAsync()) ilgili alışveriş listesi, asenkron olarak static bir “json” dosyasından aşağıdaki gibi çekilir.
|
1 2 3 4 5 |
List<ShoppingList> _shoopingList=new List<ShoppingList>(); protected override async Task OnInitAsync() { _shoopingList= await Http.GetJsonAsync<List<ShoppingList>>("/sample-data/shopping.json"); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@page "/shopping" @inject HttpClient Http <h2>Alınacak Ürün Sayısı @_shoopingList.Where(urn=>!urn.IsBought).Count()</h2> <ul> @foreach(var item in _shoopingList) { <li> <input type="checkbox" bind="@item.IsBought"/> <input bind="@item.Name"/> <input bind="@item.Quantity"/> <input bind="@item.Price"/> </li> } <input placeholder="Ürünün Adı" bind="@_name"/> <input placeholder="Miktarı" bind="@_quantity"/> <input placeholder="Fiyat" bind="@_price"/> <button onclick="@AddItem">Listeye Ekle</button> </ul> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
string _name; string _quantity; string _price; public void AddItem() { if(!String.IsNullOrWhiteSpace(_name) && !String.IsNullOrWhiteSpace(_quantity) && !String.IsNullOrWhiteSpace(_price)){ _shoopingList.Add(new ShoppingList(){ Name=_name, Quantity=_quantity, Price=_price}); _name=""; _price=""; _quantity=""; } } |
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
iyiki varsin be ya.
Eyvallah :) Siz de iyiki varsınız!