Beykent Üniversitesi .Net Core & WebAssembly
Selamlar,
4 Nisan 2018’de Beykent Üniversitesinde, 2015 yılından beri hayatımızda olan WebAssembly ve Microsoft tarafındaki karşılığı Blazor, hakkında bolca konuştuk. Tabii ki konuşmakla kalmayıp, canlı kodlama yaptık :)
Çok keyifli geçen bu kodlama esansında, blazor ile gelen yenilikleri ve eksiklerini hep beraber gözler önüne serdik. Yazdığımız uygulama, bir alışveriş listesi idi. Dışardan data olarak aşağıda görülen “Shopping.json” dosyası kullanılmıştır.
Shoping.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[ { "Name": "Domates", "Price": "3.5₺", "Quantity": "2 Adet" }, { "Name": "Kıyma", "Price": "45₺", "Quantity": "1kg" }, { "Name": "Soğan", "Price": "3₺", "Quantity": "3 Adet" }, { "Name": "Patates", "Price": "2₺", "Quantity": "2kg" } ] |
İlgili ürünler aşağıdaki gibi listelenmiştir:
|
1 2 3 4 5 6 7 8 9 |
@foreach(var item in _shoppingList) { <li> <input type="checkbox" bind="@item.IsBought"/> <input bind="@item.Name"/> <input bind="@item.Price"/> <input bind="@item.Quantity"/> </li> } |
Ayrıca istenir ise yeni ürün girişi yapılabilmesi için de aşağıdaki inputlar kullanılmıştır:
|
1 2 3 4 |
<input placeholder="Ürün Adı" bind="@_name"/> <input placeholder="Fiyat" bind="@_price"/> <input placeholder="Adet" bind="@_quantity"/> <button onclick="@AddItem">Ürünü Ekle</button> |
İşte Blazor’ın gücü ile tüm backend işlemleri gene aynı sayfa üzerinde aşağıdaki gibi “@functions” tagının altında tanımlanmıştır. Yukarıda kullanılan “_shoppingList” burada doldurulmaktadır. Json dosyasından çekilen datanın Modeli “ShoppingList” olarak tanımlanmış ve yeni bir ürün girişi için “Ürün Ekle” buttonu’u tıklanınca “AddItem()” methodu ve işlevi yine aşağıda tanımlanmıştır. Tüm liste “List<ShoppingList> _shoppingList“‘de tutulmaktadır. İlgili liste, sayfa yüklendiği zaman yani “OnInitAsync()“‘de, “Http.GetJsonAsync()” methodu ile harici json dosyasından aşağıdaki gibi doldurulmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@functions { string _name; string _quantity; string _price; List<ShoppingList> _shoppingList=new List<ShoppingList>(); protected override async Task OnInitAsync() { _shoppingList= await Http.GetJsonAsync<List<ShoppingList>>("/sample-data/shopping.json"); } public void AddItem(){ _shoppingList.Add(new ShoppingList(){Name=_name, Price=_price, Quantity=_quantity}); _name=""; _price=""; _quantity=""; } class ShoppingList { public string Name { get; set; } public string Price { get; set; } public string Quantity { get; set; } public bool IsBought { get; set; } } } |
En güzel yanı da, tüm bu işlemler tek bir sayfa üzerinde yapılması ve browser tarafından, server side tarafa gitmeden derlenilmesidir. Bu da bize büyük bir performans ve hız kazandırmaktadır.
Daha sonra 17.00’de bitmesi gereken semineri sonlandırmayıp, daha önceden yazdığım web üzerinde çalışan ve bir mobile cihaz ile kontrol edilen bir kaç farklı oyun üzerinde
code review yaptık. Burada da gene oyun yazmanın zorlukları ve interaktif bir oyun yazmanın inceliklerine deyindik. Matematik ve haseplamanın özellikle oyun
programlamadaki önemi, mobil cihazların oyun ile etkileşiminin nasıl olabileceği ve son olarak .Net Core, SignalR gibi yeni teknolojilerin hayatımıza katabilecekleri kolaylıklar,
detaylıca incelenmiştir.
Blazor ya da WebAssembly, henüz daha emekleme aşamasındadır. Önü çok açık olan ve Web programcılığını, kökünden değiştirmeye hazırlanan bu yeni teknolojinin tam sürümünün çıkmasını iple çekiyorum. Bütün kodun browser tarafından derlenmesi anında, özellikle uzun kod parçalarında browserların şu anki hallerinden dolayı, bazı performans kayıpları yaşanmaktadır. Ama gelecekte tüm browserlar tarafında olacak bir güncelleme ile bu sorunların üstesinden kolaylıkla gelinebilecektir.
2 saat planlanan ancak 4 saatten fazla süren, ister sorulan sorular, ister ise seminere olan muhteşem katkılarından dolayı tüm katılımcıları kutlar, teker teker teşekkür ederim.
Geldik bir seminerin daha sonuna, yeni bir seminerde görüşmek üzere hepinize hoşçakalın.
Çok iyi, sürükleyici. Ne güzel bir dizi. Farklılığı özlemişiz. Aynı konulardan bıkmıştık. Tüm emeği geçen herkese teşekkürler.
Teşekkürler :)