Micro Frontend untuk Pengembangan Web dengan Firebase Multi Site Hosting

Halo Firebase dan Web developers!

Dalam tutorial ini, kita akan mengeksplorasi konsep micro frontend, manfaatnya, dan cara mengimplementasikannya dalam proyek. Kita juga akan membahas penggunaan single-page applications (SPA) dan progressive web apps (PWA) untuk meningkatkan performa dan keandalan arsitektur micro frontend. Selain itu, kita akan memperkenalkan Firebase sebagai alat yang kuat untuk meningkatkan keandalan data dan mengoptimalkan rendering. Mari kita mulai!

Pendahuluan Micro frontend adalah pendekatan arsitektur yang memungkinkan pengembangan aplikasi web skala besar dengan memecahnya menjadi bagian-bagian yang lebih kecil, mandiri, dan dapat digunakan kembali. Dalam tutorial ini, kita akan mengeksplorasi konsep micro frontend, manfaatnya, dan cara mengimplementasikannya. Kita juga akan membahas kasus penggunaan platform e-commerce dan menunjukkan bagaimana micro frontend dapat meningkatkan proses pengembangannya.

Memahami Micro Frontend Micro frontend adalah perpanjangan dari pola arsitektur microservices, diterapkan pada lapisan frontend aplikasi. Mereka memungkinkan tim bekerja secara independen pada bagian-bagian yang berbeda dari antarmuka pengguna, memungkinkan pengembangan yang lebih cepat dan skalabilitas. Konsep kunci dari micro frontend meliputi:

• Monolithic Frontend: Dalam pengembangan web tradisional, frontend sering kali merupakan aplikasi monolitik di mana semua fitur terikat erat. Ini dapat menyebabkan pengembangan yang lebih lambat, waktu pengujian yang lebih lama, dan peningkatan kompleksitas.
• Micro Frontends: Dengan micro frontend, frontend dibagi menjadi unit-unit yang lebih kecil dan mandiri yang dapat dikembangkan dan diterapkan secara independen. Setiap micro frontend memiliki tanggung jawabnya sendiri dan dapat dibangun menggunakan teknologi atau framework yang berbeda.

Manfaat Arsitektur Micro Frontend

• Skalabilitas dan pengembangan lebih cepat: Micro frontend dapat diskalakan secara individual berdasarkan permintaan, memungkinkan pemanfaatan sumber daya yang lebih baik dan peningkatan performa. Ini juga memungkinkan pembaruan bertahap dan mengurangi risiko perubahan tunggal yang mempengaruhi seluruh aplikasi.
• Fleksibilitas dalam menggunakan berbagai framework: Micro frontend yang berbeda dapat dikembangkan menggunakan teknologi atau framework yang berbeda yang paling sesuai dengan kebutuhan mereka. Fleksibilitas ini memungkinkan tim memilih alat dan teknologi yang tepat untuk kebutuhan spesifik mereka.
• Independensi dan isolasi komponen: Micro frontend memungkinkan beberapa tim bekerja secara independen pada bagian-bagian berbeda dari aplikasi. Ini mengurangi ketergantungan dan memungkinkan siklus pengembangan dan penerapan yang lebih cepat.
• Peningkatan kemampuan pengujian dan otomatisasi: Dengan arsitektur micro frontend, tim yang berbeda dapat bekerja secara mandiri pada micro frontend mereka masing-masing, membuat pengembangan lebih efisien. Kolaborasi antar tim dapat difasilitasi melalui antarmuka dan kontrak yang terdefinisi dengan baik.
• Reusability dan maintainability: Micro frontend mendorong penggunaan kembali komponen dan layanan di seluruh aplikasi. Elemen UI, gaya, dan fungsi umum dapat dibagikan, mengurangi duplikasi dan meningkatkan maintainability.
• Stabilitas dan keandalan dalam proyek skala besar: Arsitektur micro frontend memungkinkan migrasi bertahap dari frontend monolitik ke arsitektur yang lebih modular dan skalabel. Fungsi yang ada dapat diganti atau direfaktor secara bertahap, mengurangi risiko dan kompleksitas yang terkait dengan penulisan ulang skala besar.

Implementasi

Memisahkan UI Rendering Berbicara tentang micro frontend, kita akan membahas cara memisahkan UI agar pengguna dapat merender dari sisi mereka.

Asumsikan kita memiliki 2 micro frontend:

1. Navbar micro frontend
2. Content micro frontend

Biasanya tanpa SPA, katakanlah kita merender 2 micro frontend yang dibangun menggunakan situs web asli dengan file HTML, kita pasti akan memuat 2 micro frontend ini dua kali ketika ada perubahan data dari database karena kita perlu menyegarkan halaman.

Karena micro frontend akan mengambil dan merender frontend dari banyak server, ini mungkin menggandakan biaya dan penggunaan juga!

Jadi, apa yang bisa kita lakukan untuk meminimalkan penggunaan dan biaya ini?

Memanfaatkan Single-Page Applications (SPA) Untuk lebih mengoptimalkan, kita bisa menggunakan SPA!

Kita akan mengurangi jumlah halaman yang akan dimuat atau dirender, karena SPA hanya menyegarkan komponen yang benar-benar perlu disegarkan atau dirender ulang jika ada data atau status yang berubah, dan membiarkan komponen lainnya tetap seperti itu.

Alur Data Single Page Application (SPA) Berbicara tentang optimalisasi, kita bisa melakukan lebih banyak peningkatan! Kita juga bisa mengimplementasikan PWA!

Meningkatkan Performa dengan Progressive Web Apps (PWA) Dengan PWA kita bisa memiliki instance Service Worker yang dapat mengelola jaringan dan sumber daya yang kita butuhkan untuk situs web kita!

Singkatnya, PWA menyediakan:

• Mode Offline untuk Situs Web
• Caching aset dan halaman
• Push Notification
• Instalasi ke perangkat kita

Biasanya jika kita hanya mengimplementasikan SPA, kita bisa memiliki 3 kali pemuatan/rendering.

Namun jika kita mengimplementasikan SPA dan PWA, kita akan mengurangi penggunaan/biaya hingga 50%! dari 4 kali menjadi 2 kali pemuatan/rendering!

Yang juga sama dengan tidak menggunakan micro frontend, dengan kata lain kita bisa menghilangkan aspek penggunaan atau biaya, yang membuat micro frontend menjadi solusi yang baik!

Firebase untuk Keandalan Data dan Optimasi Rendering Ya, web kita sudah sangat dioptimalkan! tapi bagaimana dengan datanya?

Firebase Sekarang jika kita berbicara tentang data, kita akan berbicara tentang Backend, artinya kita berbicara tentang Firebase!

Mengapa kita harus menggunakan Firebase dalam kasus ini? pertama-tama mari kita bicarakan masalahnya.

Apa yang harus kita gunakan untuk memiliki aliran data yang andal?

Kita bisa menggunakan Firebase Cloud Firestore atau Firebase Realtime Database!

Meningkatkan Keandalan Data Dengan Cloud Firestore kita bisa memiliki Operasi Dukungan Offline! yang berarti kita masih bisa melakukan operasi database saat offline, setidaknya tidak mempengaruhi alur pengguna kita. perubahan yang dilakukan selama offline akan diterapkan ke Cloud Firestore setelah koneksi kembali online!

Secara teknis data akan dimasukkan ke dalam cache atau penyimpanan dan setelah data online lagi, data akan disimpan ke Firebase dan diproses secara asinkron tanpa mempengaruhi perjalanan pengguna.

Dengan ini:

• Firebase dapat meningkatkan keandalan pengambilan dan penyimpanan data.
• Firebase Realtime Database atau Firestore dapat memiliki sinkronisasi data yang mulus antara database dan data offline di penyimpanan kita.

Di mana kita harus menerapkan situs web micro frontend modern kita dengan mudah?

Dengan demikian, sebagai langkah terakhir kita untuk mewujudkan ini ke produksi adalah Deployment!

Kita bisa menerapkan micro frontend kita menggunakan Multi Site Hosting, dengan Multi Site Hosting kita bisa menerapkan beberapa situs web dalam 1 Proyek Firebase! Yang mana yang kita butuhkan untuk Arsitektur micro frontend kita!

Penerapan Micro frontend ke Firebase

1. Buat situs baru di Firebase Console

2. Whitelist Host Container Micro frontend Agar micro frontend dapat diambil ke browser melalui Host Container (situs web yang kita ekspos langsung ke pengguna), kita perlu whitelist itu di firebase.json.

3. Binding Target Penerapan Setelah itu, untuk menerapkan, kita perlu mengikat target dengan micro frontend yang relevan.

Kita bisa mengikat alias target penerapan dengan situs yang baru saja kita buat di konsol, menggunakan:

firebase target:apply hosting <alias_target_name> <firebase_site_name>
firebase target:apply hosting mf-codelabs mf-codelabs-indonesia-firebase

Setelah itu kita bisa langsung menjalankan “firebase deploy” untuk menerapkan micro frontend kita ke Firebase!

Sekarang kita bisa memeriksa micro frontend yang diterapkan di browser https://mf-indonesia-firebase.web.app.

Jika kita memeriksanya di konsol pengembang Chrome, kita akan melihat bahwa bagian tertentu dimuat dari domain lain!

Sebagai bonus dari saya, saya memiliki micro frontend-generator CLI untuk kalian, sehingga kalian dapat menghasilkan micro frontend kalian dalam waktu singkat! jangan ragu untuk melihat video bagaimana saya bisa membuatnya, berikut adalah url npm yang saya publish!

https://www.npmjs.com/package/microfrontend-generator

Micro Frontends dalam Praktik: Contoh Kasus Penggunaan Sebagai contoh kasus, ada platform e-commerce. Tujuannya adalah untuk mengimplementasikan micro frontend guna meningkatkan skalabilitas, kecepatan pengembangan, dan keandalan. Arsitekturnya terdiri dari frontend monolitik dan beberapa microservices untuk aspek berbeda dari platform.

Mulai dengan Frontend Monolitik: Awalnya, situs web memiliki frontend monolitik di mana semua fitur terikat erat. Ini menyebabkan waktu pengujian yang lama dan pengembangan yang lebih lambat.

Mengidentifikasi Batas Micro Frontend: Menganalisis komponen frontend dan mengidentifikasi area yang dapat dibagi menjadi micro frontend terpisah. Dalam kasus ini, kita bisa memiliki micro frontend untuk navbar, dashboard, dan daftar produk.

Migrasi, Memisahkan Frontend: Merefactorkan frontend monolitik menjadi micro frontend terpisah, memastikan setiap micro frontend memiliki tanggung jawabnya sendiri dan dapat dikembangkan secara independen.

Setelah peningkatan, pengembangan bisa lebih mudah, waktu pengujian lebih cepat, dan penerapan bisa independen antara frontend!

Peningkatan dan Penguatan Mengimplementasikan Single-Page Application (SPA): Memanfaatkan pendekatan single-page application untuk setiap micro frontend guna menyediakan pengalaman pengguna yang mulus tanpa memuat ulang halaman penuh. Ini bisa dicapai dengan menggunakan framework seperti React atau Angular.

Memanfaatkan Progressive Web Apps (PWA): Meningkatkan micro frontend dengan fitur Progressive Web App untuk memungkinkan kemampuan offline dan memberikan pengalaman yang lebih mirip aplikasi native. PWA bisa diinstal di perangkat pengguna dan memberikan akses cepat dan andal ke platform, bahkan dalam skenario konektivitas rendah.

Ringkasan Pengembangan micro frontend adalah pendekatan yang kuat untuk menangani proyek web skala besar. Dengan merangkul modularitas dan menerapkan teknik seperti SPA dan PWA, pengembang dapat meningkatkan skalabilitas, merampingkan pengembangan, dan meningkatkan pengalaman pengguna. Menggabungkan praktik ini dengan platform seperti Firebase lebih memastikan keandalan data, menjadikan micro frontend solusi menarik untuk pengembangan web dalam skala besar.

3 Pilar Kelebihan

• Single Page Applications (SPA): Micro frontend bisa lebih dioptimalkan melalui penggunaan SPA. SPA memungkinkan rendering konten dinamis tanpa menyegarkan seluruh halaman. Dengan mengimplementasikan SPA, pengembang dapat meningkatkan optimasi lalu lintas dan pengalaman pengguna.
• Progressive Web Apps (PWA): PWA menyediakan lapisan tambahan untuk mengoptimalkan micro frontend. Mereka menawarkan pengalaman aplikasi yang lebih native kepada pengguna dan memungkinkan kemampuan offline. Dengan PWA, pengembang dapat mengurangi lalu lintas dan memastikan situs web tetap dapat diakses bahkan dalam situasi konektivitas rendah atau tidak ada.
• Firebase untuk Keandalan Data: Sementara pengembangan micro frontend dan SPA meningkatkan pengalaman front-end, keandalan data tetap krusial. Pembicaraan singkat menyebutkan penggunaan Firebase, platform backend, untuk meningkatkan keandalan data dan optimasi rendering.

Kompatibilitas WebXR? Apakah kamu penasaran bagaimana kita bisa mengimplementasikannya untuk XR? Akan datang segera!

Kesimpulan Dalam tutorial ini, kita telah mengeksplorasi konsep micro frontend dan manfaatnya dalam pengembangan web. Kita membahas implementasi micro frontend menggunakan SPA dan PWA untuk meningkatkan performa dan mengurangi beban server. Selain itu, kita memperkenalkan Firebase sebagai alat yang kuat untuk meningkatkan keandalan data dan mengoptimalkan rendering. Dengan pengetahuan ini, kamu siap mengimplementasikan arsitektur micro frontend dan menciptakan aplikasi web yang efisien dan skalabel.

Terima kasih dan sampai jumpa di artikel berikutnya!