Tag Archives: Blazor

[Seri Tutorial Blazor] Pengenalan Blazor Server Side

Posted on by
Reply

Pada blog sebelumnya kita sudah membahas apa itu Blazor, dan kita juga sudah tahu bahwa blazor memiliki 2 arsitektur yg berbeda yaitu Blazor Server dan Blazor Client.

Pada artikel kali ini kita akan membahas arsitektur dari Blazor Server dan membuat aplikasi Blazor Server baru.

Arsitektur Blazor Server

Aplikasi Blazor Server berjalan pada backend ASP.NET Core dan dapat diakses menggunakan browser. Aplikasi ASP.NET Core dapat dihosting sendiri atau berjalan di IIS. Di sisi client, browser apa pun dapat digunakan untuk mengakses aplikasi web. Blazor Server menggunakan file JavaScript yang berukuran kecil untuk menjalankan dan HTML dan CSS untuk menampilkan antarmuka penggunanya. Berbeda dengan Blazor Client, Blazor Server tidak menggunakan WebAssembly.

Di sisi server, aplikasi Blazor berisi kode .NET dan menangani salinan Dokumen Objek Model (DOM) untuk setiap client. Kita bisa memanggil .NET API kita tanpa pulang pergi jaringan tambahan, dan kita bisa langsung mengakses kode bisnis logic dari antarmuka pengguna tanpa harus membuat backend API terlebih dahulu.

Jika pengguna berinteraksi dengan aplikasi, Blazor akan mengirim event ke server menggunakan koneksi SignalR WebSocket yang persisten. Server akan mengembalikan DOM yang sudah diupdate untuk dirender di client.

Setiap interaksi memicu komunikasi jaringan antara client dan server. Berbeda dengan javacript framework yang memproses interaksi user di client, maka Blazor Server melakukannya di sisi server-side.

Membuat Project Blazor Server

Untuk membuat project Blazor anda dapat menggunakan editor Visual Studio Community 2019 atau Visual Studio Code. Berikut adalah tautan untuk mengunduh .NET SDK dan IDE yang akan digunakan.

Pada tutorial kali ini kita akan menggunakan VS 2019 Community untuk membuat project Blazor Server yang baru

1. Pada Visual Studio 2019 pilih create new Project

image

2. Kemudian pilih Blazor App, masukan BlazorAppSample sebagai nama project

image

3. Kemudian pilih Blazor Server, dan pilih .NET Core 3.1

image

4. Pada solution explorer dapat dilihat struktur project yang sudah dibuat adalah sebagai berikut:

image

5. Tekan tombol F5 untuk menjalankan aplikasinya.

image

Struktur Project dan File Folder

Jika dilihat pada Solution Explorer terdapat beberapa macam folder yang sudah dibuatkan ketika kita menggunakan template yang disediakan oleh VS 2019.

  • Program.cs adalah entry point ketika aplikasi kita dijalankan. Ketika app dijalankan maka akan menjalankan web host instance.
  • Folder Page digunakan untuk menyimpan razor comopent (file yang berekstensi .razor).
  • Static files: semua file yang ada di dalam folder wwwroot. Folder ini digunakan untuk menyimpan semua static files spt css, image, dll
  • Configuration: ada pada file appSettings.json sama seperti konfigurasi pada ASP.NET Core.
  • Folder Data: berisi file yang berhubungan dengan pengaksesan database
  • Folder Shared: berisi komponen tambahan yang dapat digunakan kembali pada komponen lain.
Advertisement

[Seri Tutorial Blazor] Pengenalan Blazor

Posted on by
Reply

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