Micro Frontends Arsitektur di Blibli.com
Membahas tentang arsitektur micro-frontends yang diimplemetasikan oleh Blibli.com
📜 Pembuka
Microservices mungkin selama beberapa tahun belakangan sudah sangat familiar terdengar bagi para programmer, terutama bagi yang banyak bergelut dengan backend dan arsitektur pada umumnya. Penjelasan konsep sederhana dari microservices ini adalah memecah sebuah service besar (monolith) kedalam service-service yang lebih kecil. Microservices selama ini diyakini lebih baik dibeberapa hal dibandingkan monolith salah satunya dalam hal independensi dan kejelasan tanggung jawab dari masing-masing service. Sayangnya pendekatan microservices ini belum jamak diaplikasikan ke dalam arsitektur frontend.
Pun dengan Blibli.com yang selama bertahun-tahun berpengalaman menangani sebuah aplikasi UI monolith besar dan kompleks. Sedikit saja perubahan terjadi dalam aplikasi UI tersebut maka keseluruhan aplikasi UI ini wajib melakukan ritual deployment yang bisa saja memiliki potensi menyebabkan efek samping terhadap website yang sedang live. Padahal di backend sudah selama bertahun-tahun kita mengadopsi konsep microservice pada aplikasi kita sehingga deployment tidak harus melibatkan keseluruhan service melainkan cukup pada service yang membutuhkan saja.
Pada pertengahan tahun 2017 kemarin kita memiliki kesempatan untuk melakukan rewrite pada beberapa halaman website Blibli.com dan kesempatan ini sekaligus digunakan untuk menata kembali arsitektur frontend agar bisa mengikuti konsep backend kita yakni microservice atau bila diterapkan pada aplikasi UI lebih dikenal dengan Micro-frontends. Pada dasarnya kita ingin mencapai hal yang sama yang sudah dicapai oleh aplikasi backend kita yakni independensi baik pada saat development, deployment sampai pada tahap maintenance.
Jika teman-teman pernah membaca sedikit banyak mengenai micro-frontends di https://micro-frontends.org/ maka bisa memahami kalau konsep yang mereka tawarkan itu agnostic terhadap framework atau tidak terikat kepada salah satu framework, jadi apapun framework yang digunakan bisa tetap bekerja. Namun hal yang kita bangun tidak *segila* itu, kita tidak sedang membuat sistem yang agnostik terhadap framework. Dalam hal ini kita tetap pada pilihan awal kita untuk implementasi framework Vue.js dan kita ingin mengimplementasikan framework ini secara kaffah dan tidak mau mencampuradukkan dengan framework lain. Jadi intinya kita akan memanfaatkan kelebihan Vue.js untuk membuat arsitektur UI kita bisa lebih micro dan terpecah-pecah ke beberapa ownership yang berbeda.
🛠 Arsitektur
Gambar diatas merupakan ilustrasi sederhana dari pemecahan aplikasi UI di Blibli.com kedalam aplikasi yang lebih kecil-kecil. Pemecahan dilakukan dengan memberikan masing-masing tim yang berkaitan dengan bisnis proses halaman tertentu untuk bertanggung jawab terhadap repositori kode yang telah dibuat independen dan tidak perlu bergantung dengan repositori lain. Sementara sebagai orkestrator kita membuat Main Layout yang bertugas menentukan aplikasi mana yang harus dimuat ketika berada di halaman tertentu. Sebagai tambahan, orkestrator ini juga bertugas menangani berbagai proses dan interaksi dengan pengguna yang memang common atau tidak terkait dengan suatu proses bisnis spesifik seperti login, registrasi, dll.
Dari gambar contoh arsitektur diatas, bila diimplementasikan kedalam UI website Blibli.com saat ini maka kurang lebih akan terlihat seperti berikut :
Bisa terlihat bahwa kita meletakkan header, footer dan berbagai hal umum kedalam Main Layout yang juga menjadi orkestrator dari keseluruhan aplikasi UI yang ada. Konten yang dimuat ditengah akan diatur oleh Main Layout yang bisa jadi berasal dari berbagai modul lain yang berbeda-beda dimana pada contoh gambar diatas berasal dari module member.
🚀 Teknologi
Untuk mengimplementasikan arsitektur yang telah dijelaskan diatas tentu kita memanfaatkan berbagai teknologi seperti berikut :
⚡️ NGINX
Micro-frontends memungkinkan kita untuk melakukan deployment ke server yang berbeda-beda dan untuk membuat hal ini menjadi tidak terasa oleh pengguna maka kita memanfaatkan NGINX untuk melakukan reverse proxy dan membuat seolah-olah semua berasal dari satu sumber yang sama. Hal ini juga diperlukan untuk routing berbagai assets dengan pattern yang telah ditentukan agar bisa mengarah pada modul yang tepat. Karena kita menggunakan Single Page Application pada aplikasi micro-frontend ini maka NGINX juga berperan untuk mengembalikan semua halaman yang ditentukan agar mengambil index.html yang selalu sama sehingga routing halaman bisa ditentukan oleh kode frontend.
💚 Multiple Vue.js Instance
Seperti sudah sedikit disinggung diatas bahwa kita akan menggunakan framework Vue.js secara utuh untuk aplikasi UI yang baru ini. Namun dengan konfigurasi standard yang disediakan oleh official template seperti webpack hal ini tidak mungkin dilakukan dikarenakan memang pada kondisi normal Vue.js Apps menggunakan single repository dan single entry script untuk masing-masing aplikasinya.
Kebutuhan kita untuk implementasi micro-frontends ini adalah memungkinkan kita membuat lebih dari satu aplikasi didalam satu halaman url yang masing-masing aplikasi ini berasal dari repositori yang berbeda-beda dan server yang berbeda-beda pula. Untuk melakukan hal ini, kami menggunakan lebih dari satu Vue Instance didalam satu halaman website Blibli.com dimana masing-masing instance berasal dari repositori yang berbeda.
Tentu saja tidak semulus dan semudah itu pada prakteknya untuk mengimplementasikan banyak Vue Instance didalam satu halaman, ada banyak tantangan yang akan ditemui seperti bagaimana orkestrator bisa mengetahui app.js yang di-generate bersama hash yang menempel pada file tersebut, belum lagi harus distribusi route satu sama lain, serta universal vuex store antar repositori sehingga modul dibawah tetap bisa menggunakan vuex store dari orkestrator. Tapi apalah artinya software engineer bila tidak ada tantangan? Makin hebat tantangan yang ada, makin puas pula nanti perasaan kita ketika bisa menaklukan tantangan tersebut 😁.
🙏 Penutup
Semua hal yang dijelaskan diatas mungkin bukanlah best practice dan baik untuk diikuti dan diimplementasikan ke environment Anda, karena setiap environment itu unik dan butuh penanganan yang mungkin berbeda pula. Hal yang kami coba terapkan merupakan hal yang sudah disesuaikan dengan kondisi environment yang ada di Blibli.com.
Masih ada banyak potensi untuk melakukan perbaikan dan pengembangan lagi dari semua hal diatas. Blibli.com selalu berusaha berkembang ke arah yang lebih baik, kami terbuka selalu menerima saran dan kritik dari teman-teman untuk bersama-sama membangun teknologi di Indonesia ke arah lebih baik di masa yang akan datang.
Semua yang dituliskan diatas merupakan hasil buah ide dan kerja sama dari beberapa software engineer di Blibli.com sehingga kredit mengenai semua hal diatas bisa ditujukan secara kolektif kepada mereka semua, penulis dalam hal ini hanya berperan sebagai technical writer dan tidak berperan secara penuh mengenai pengambilan keputusan serta eksekusi dari ide diatas.
Untuk melengkapi tulisan ini saya juga sematkan slide presentasi dari pak Hidayat Febiansyah yang membahas mengenai “Scalable Web Development with Vue.js” dimana juga membahas sedikit mengenai arsitektur frontend di Blibli.com.
https://speakerdeck.com/havban/scalable-web-development-with-spa-and-vue-dot-js
Bila Anda suka dengan tulisan ini, silahkan tekan tombol 👏 dan silahkan baca tulisan lain dari publikasi kami. Kami secara konsisten ingin selalu berbagi berbagai informasi yang dirasa bermanfaat bagi teman-teman. Bila Anda ingin bergabung dengan tim Blibli.com dalam mengembangkan dan memelihara website kami, silahkan klik laman karir blibli.com.
reposted from:
previous post https://medium.com/bliblidotcom-techblog/micro-frontends-arsitektur-di-blibli-com-8eb30b42f5a5 — Irfan Maulana
