Bagikan melalui

Membuat UI komposit berdasarkan layanan mikro

Petunjuk / Saran

Konten ini adalah kutipan dari eBook, Arsitektur Layanan Mikro .NET untuk Aplikasi .NET Kontainer, tersedia di .NET Docs atau sebagai PDF gratis yang dapat diunduh yang dapat dibaca secara offline.

Unduh PDF

Arsitektur Layanan Mikro .NET untuk Aplikasi .NET Dalam Kontainer: gambar kecil sampul eBook.

Arsitektur layanan mikro sering dimulai dengan data dan logika penanganan sisi server, tetapi, dalam banyak kasus, UI masih ditangani sebagai monolit. Namun, pendekatan yang lebih canggih, yang disebut micro frontends, adalah merancang antarmuka pengguna (UI) aplikasi Anda dengan menggunakan layanan mikro juga. Itu berarti memiliki UI komposit yang diproduksi oleh layanan mikro, alih-alih memiliki layanan mikro di server dan hanya aplikasi klien monolitik yang mengonsumsi layanan mikro. Dengan pendekatan ini, layanan mikro yang Anda bangun dapat lengkap dengan representasi logika dan visual.

Gambar 4-20 menunjukkan pendekatan yang lebih sederhana hanya mengkonsumsi layanan mikro dari aplikasi klien monolitik. Tentu saja, Anda dapat memiliki layanan MVC ASP.NET di antara memproduksi HTML dan JavaScript. Gambar adalah penyederhanaan yang menyoroti bahwa Anda memiliki UI klien tunggal (monolitik) yang menggunakan layanan mikro, yang hanya berfokus pada logika dan data dan bukan pada bentuk UI (HTML dan JavaScript).

Diagram aplikasi UI monolitik yang terhubung ke layanan mikro.

Gambar 4-20. Aplikasi UI monolitik yang mengkonsumsi layanan mikro back-end

Sebaliknya, UI komposit justru dihasilkan dan disusun oleh layanan mikro itu sendiri. Beberapa layanan mikro mendorong bentuk visual area tertentu dari UI. Perbedaan utamanya adalah Anda memiliki komponen UI klien (kelas TypeScript, misalnya) berdasarkan templat, dan ViewModel data-shaping-UI untuk templat tersebut berasal dari setiap layanan mikro.

Pada waktu mulai aplikasi klien, masing-masing komponen UI klien (kelas TypeScript, misalnya) mendaftarkan dirinya dengan layanan mikro infrastruktur yang mampu menyediakan ViewModels untuk skenario tertentu. Jika layanan mikro mengubah bentuk, UI juga berubah.

Gambar 4-21 menunjukkan versi pendekatan antarmuka pengguna komposit ini. Pendekatan ini disederhanakan karena Anda mungkin memiliki layanan mikro lain yang menggabungkan bagian granular yang didasarkan pada teknik yang berbeda. Ini tergantung pada apakah Anda membangun pendekatan web tradisional (ASP.NET MVC) atau SPA (Aplikasi Halaman Tunggal).

Diagram UI komposit yang terdiri dari banyak model tampilan.

Gambar 4-21. Contoh aplikasi UI komposit yang dibentuk oleh layanan mikro back-end

Masing-masing layanan mikro komposisi UI tersebut akan mirip dengan API Gateway kecil. Tetapi dalam hal ini, masing-masing bertanggung jawab atas area UI kecil.

Pendekatan antarmuka pengguna komposit yang didorong oleh layanan mikro bisa lebih menantang atau kurang, tergantung pada teknologi UI apa yang Anda gunakan. Misalnya, Anda tidak akan menggunakan teknik yang sama untuk membangun aplikasi web tradisional yang Anda gunakan untuk membangun SPA atau untuk aplikasi seluler asli (yang bisa lebih menantang untuk pendekatan ini).

Aplikasi sampel eShopOnContainers menggunakan pendekatan UI monolitik karena beberapa alasan. Pertama, ini adalah pengantar layanan mikro dan kontainer. UI komposit lebih canggih tetapi juga membutuhkan kompleksitas lebih lanjut saat merancang dan mengembangkan UI. Kedua, eShopOnContainers juga menyediakan aplikasi seluler asli berdasarkan Xamarin (tidak didukung per Mei 2024), yang akan membuatnya lebih kompleks di sisi C# klien.

Namun, kami mendorong Anda untuk menggunakan referensi berikut untuk mempelajari lebih lanjut tentang antarmuka pengguna komposit berdasarkan layanan mikro.

Sumber daya tambahan

SebelumnyaBerikutnya