[Seri Tutorial Blazor] Pengenalan Blazor

Blazor adalah client-side web UI framework yang mirip dengan Javascript front-end framework seperti Angular,React, atau Vue. Sama seperti Javascript, Blazor dapat dijalankan pada langsung pada browser via WebAssembly. Blazor juga tidak membutihkan plugin apapun pada browser.

Aplikasi Blazor terdiri dari komponen yang dibangun menggunakan bahasa C#, HTML, Razor, dan CSS. Blazor menangani interaksi pengguna dan merender UI yang sudah diupdate. Blazor tidak berbasis pada request-reply model. Interaksi pengguna ditangani sebagai event yang tidak dalam konteks Http Request seperti pada web pada umumnya.

Blazor terdapat pada bundle instalasi .NET Core SDK 3.1. Blazor sendiri memiliki fitur sebagai berikut:

  • Forms dan Validation
  • Dependency Injection
  • Client-side routing
  • Layouts
  • In-browser debugging
  • Javascript interopt

Blazor sendiri banyak memiliki kesamaan dengan teknologi microsoft sebelumnya yaitu ASP.NET Web Form, kedua framework mempunyai programming model yang mirip yaitu component-based, event-driven, dan stateful UI. Yang membedakan secara arsitektur adalah Web Form hanya berjalan pada sisi server saja, sedangkan Blazor dapat berjalan di sisi client (browser).

Blazor memiliki dua mode runtime yang berbeda, Blazor sisi server dan Blazor sisi client, juga dikenal sebagai Blazor WebAssembly. Kedua mode tersebut berjalan di semua browser web modern, termasuk browser web di ponsel.

Arsitektur Blazor Server Side

image

Server-side Blazor merender komponen Razor di server dan memperbarui halaman web menggunakan koneksi SignalR. Framework Blazor mengirimkan event dari web browser, seperti klik tombol dan gerakan mouse, ke server. Blazor runtime akan mengecek perubahan pada komponen di server dan mengirimkan perubahannya ke halaman web pada browser.


Blazor Client-side (WebAssembly)

Client-side Blazor terdiri dari kode yang sama dengan Blazor sisi server. Namun komponennya berjalan seluruhnya di browser web menggunakan teknologi yang dikenal sebagai WebAssembly.

image

Perbedaan utama dalam aplikasi Blazor yang dibuat di sisi server versus Blazor sisi klien adalah bahwa aplikasi Blazor sisi klien perlu melakukan web call (biasanya mengakses API di sisi server) untuk mengakses data server, sedangkan aplikasi Blazor sisi server dapat mengabaikan langkah ini, karena semua kodenya dijalankan di server (mirip aplikasi server side biasa).

Salah satu cara untuk memahami Blazor adalah bahwa Blazor adalah framework untuk membuat halaman web SPA (Single Page Application) interaktif yang menyediakan dua pilihan arsitektur (sisi klien dan sisi server) menggunakan teknologi Razor yang ditulis dengan bahasa C#.

Pada blog selanjutnya akan dibahas bagaimana cara membuat aplikasi Blazor Server Side untuk pertama kali