Kita tentu sudah kenal Razor. Sekarang diperkenalkan Blazor yang merupakan web UI framework berbasis C#, Razor dan HTML yang berjalan di atas browser via WebAssembly. Nah, apa pula itu WebAssembly? Menurut beberapa cerita yang kami dengar, WebAssembly memungkinkan binary code berjalan di atas web browser. Jadi secara sederhana WebAssembly adalah “mesin” di dalam web browser. Nah sekarang sudah jelas, kenapa C# bisa jalan langsung di sisi client atau browser kan? Itu semua karena WebAssembly (dibaca: wasem). Detail tentang ini mungkin bisa dibaca di sini https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6. (di posting berikutnya, akan kami bahas lagi secara detail tentang WebAssembly ini).
Tujuan besar Blazor adalah ingin menjalankan kode .NET pada browser. Jadi ingat dulu kala ada Java Appret … eh Java Applet yang berjalan pada web browser yang telah memasang java applet pluging. Atau Macromedia/Adobe Flash yang juga berjalan pada web browser, asal telah terpasang flash plugin. Nah di sini yang menjadi “plugin” agar Blazor dapat berjalan di web browser adalah WebAssembly. WebAssembly dibangun oleh consensus oleh “pengembang” 4 web browser besar yaitu FireFox, Chrome, Safari dan MS Edge.
{Blazor}
Kembali ke Blazor. Untuk mengenal apa itu Blazor maka kita akan langsung praktek menggunakan Blazor. Untuk menggunakan ini perlu mempersiapkan tool berikut ini:
- .NET Core 2.1 (https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-preview1)
- Visual Studio 2017 (15.7) (https://www.visualstudio.com/vs/preview)
- Ekstensi ASP.NET Core Blazor Language Service (https://go.microsoft.com/fwlink/?linkid=870389)
{Visual Studio 2017 versi 15.7 Preview}
Blazor saat ini hanya tersedia untuk VS2017 versi preview. Saat ini versi stabil VS2017 adalah versi 15.6.2 (kalau tidak salah hehe). Maka untuk mengecap rasanya Blazor ini terlebih dahulu kami menginstall VS2017 versi 15.7 Preview.
{ASP.NET Core Blazor Language Service}
Installasi ASP.NET Core Blazor Language Service. Ingat ekstensi ini tidak dapat diinstall pada VS2017 yang stabil saat ini, hanya dapat diinstall pada VS2017 terbaru (yang statusnya masih preview).
Hasilnya adalah kita dapat melihat tempate baru pada project web ASP.NET Core, yaitu seperti gambar di bawah ini.
Saat website dijalankan akan ada permintaan ijin menggunakan node.js seperti terlihat pada gambar di bawah ini.
{Code Blazor}
Berikut ini contoh code Blazor pada file *.cshtml.
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick(IncrementCount)>Click me</button>
@functions {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
Contoh kode di atas adalah contoh kode untuk increment angka ketika tombol di klik, seperti pada gambar di bawah ini. Pada kode di atas dapat dilihat fungsi IncrementCount() tidak ditulis dengan bahasa JavaScript, tetapi ditulis dengan bahasa C#.
Contoh kedua adalah kode berikut ini.
@page "/fetchdata"
@inject HttpClient Http
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading…</em></p>
}
else
{
<table class=‘table’>
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@functions {
WeatherForecast[] forecasts;
protected override async Task OnInitAsync()
{
forecasts = await Http.GetJsonAsync<WeatherForecast[]>(“/sample-data/weather.json”);
}
class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF { get; set; }
public string Summary { get; set; }
}
}
Pada contoh di atas, dapat dilihat ditulis class dan method yang ditulis dengan C#.
Sekian dulu posting tentang Blazor ini, masih banyak pertanyaan dan ketidakjelasan. Semoga pada posting berikutnya akan kami kupas tuntas tentang Blazor ini.
