Jangan Menambah Beban!
Setelah kami berhasil mengidentifikasi beberapa ancaman pada artikel sebelumnya (Sebuah Perahu Kecil di Tengah Ancaman Badai), langkah pertama yang kami lakukan adalah tidak menambah beban pada aplikasi web yang sudah berjalan. Hal ini dilakukan supaya:
- Existing code tidak bertambah banyak.
- Mencegah adanya bug-bug baru.
- Tidak menurunkan performa aplikasi web yang sudah berjalan.
- Mengurangi aktivitas pada repository (tempat penyimpanan project) yang ada.
Munculnya Harapan Baru
Pastinya kalian sudah tahu ketiga arsitektur web dibawah ini.
- The Monolith — Arsitektur pertama yang pastinya semua orang pernah membuatnya, ya semua service frontend, backend dan proses ke database menjadi satu.
- Front & Back — Arsitektur ini mulai memisahkan antara UI dan core system yang terhubung ke database.
- Microservices — Arsitektur ini mulai membagi service backend menjadi beberapa service sesuai dengan fiturnya.
Nah, saat ini kami menggunakan arsitektur yang ke-3, Microservices dengan Monolith Frontend. Kurang lebih seperti ini gambarannya:
Mari kita fokus di area yang kita bahas dari awal (frontend). Seperti yang dijelaskan sebelumnya, karena kami tidak ingin menambah beban terhadap aplikasi web yang sudah berjalan maka setiap ada fitur baru, saya dan tim ingin membuatnya secara terpisah.
Kenapa kami ingin membuatnya secara terpisah?
- Kami ingin mempunyai Frontend/UI yang sesuai dengan suatu permasalahan. Misalnya Frontend Catalog hanya untuk melihat daftar produk yang tersedia, melihat detail dari suatu produk, dan semua interaksi yang berkaitan dengan produk, Frontend Payment hanya untuk melihat opsi pembayaran yang ada serta memproses pembayaran yang dilakukan oleh user.
- Kami ingin Frontend/UI yang dibuat bisa mandiri, baik secara development, testing, deployment, dan maintenance.
- Kami ingin Frontend/UI yang dapat ditingkatkan kapasibilitasnya secepat mungkin ketika sudah tidak sanggup memikul beban yang ada.
- Kami ingin mengakhiri perdebatan mengenai framework/library apa yang akan digunakan, masing-masing frontend dapat menggunakan react/vue/angular/dll.
Dengan apa yang kami inginkan diatas, semoga menjadi sebuah harapan baru bagi kami.
Awal Pertemuan
Mungkin secara tidak sadar apa yang sudah kita bahas sebelumnya adalah awal pertemuan kita dengan yang namanya Micro-Frontend.
Jika dari bagan diatas frontend dikerjakan oleh masing-masing tim, tetapi karena kami hanya 1 tim dengan resource yang terbatas, kami menjadikan setiap individu sebagai maintaner atau penanggung jawab sekaligus manjadi seorang contributor di berbagai fitur.
Untuk menampilkan masing-masing fitur menjadi satu-kesatuan, kita perlu mempunyai suatu host atau perantara yang menjadi wadah untuk micro-frontend yang sudah dibuat. Kurang lebih seperti dibawah ini flow yang ingin kami buat:
Ada beberapa point yang perlu diperhatikan:
- Setiap host/container memiliki public url domain.
- Setiap micro-frontend dapat digabungkan ke micro-frontend lainnya atau bisa langsung ditampilkan ke aplikasi web utama.
- Setiap micro-frontend dapat melakukan request ke Core API (untuk membagi beban di setiap proses).
Ya, kami sudah menentukan untuk menggunakan arsitektur micro-frontend atas masalah yang kami hadapi sebelumnya. Lalu bagaimana kami memulainya? dan apa saja yang perlu dipersiapkan? saya akan bahas di artikel selanjutnya.
Terimakasih sudah membaca
