[Seri Tutorial Blazor] Pengenalan Blazor Server Side

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.

.NET Conf 2019

Pada tanggal 15 November 2019 telah dilangsungkan acara Seminar & Workshop .NET Conf yang bertempat di Gedung Perpustakaan Fakultas Teknik Universitas Gadjah Mada. Acara ini diselenggarakan oleh MIC UGM Yogyakarta.

NET Conf merupakan sebuah agenda tahunan yang diselenggarakan oleh komunitas developer .NET di seluruh dunia. Di Indonesia pada tahun ini, salah satunya di selenggarakan di kota Yogyakarta, lebih tepatnya di Perpustakaan Fakultas Teknik UGM pada 15 Oktober 2019. Acara ini diikuti oleh 42 peserta dengan latar belakang yang berbeda, seperti profesional dan mahasiswa dari beberapa universitas di Kota Yogyakarta. Kegiatan ini diisi oleh tiga pembicara, yakni Ridi Ferdiana – Microsoft MVP, Erick Kurniawan – Microsoft MVP, dan Nindi Kusuma Ningrum – Chief Project Officer dari OkeSayur. Para pembicara memberikan beberapa insight menarik bagi para peserta, seperti bagaimana meningkatkan produktivitas .NET dengan Visual Studio, DevOps for .NET Developer, Mengembangkan aplikasi Full-stack C# Web Apps dengan Blazor di .NET Core 3.0, Machine Learning for .NET, dan sebagainya.

Pada kesempatan ini saya membahas topik tentang apa yang baru pada Xamarin Forms dan Visual Studio 2019. Adapun topik yang dibahas pada seminar ini adalah:

  • Introduction to Xamarin Forms and Visual Studio 2019
  • Using Xamarin Shell
  • Xamarin Essentials
  • XAML Hot Reload
  • Xamarin Forms with ASP.NET Core Backend on Azure Apps
  • etc

3

6

6

Untuk materi dari seminar .NET Conf ini bisa didownload pada tautan berikut ini.