Belajar membuat micro-frontend

4 min readMay 25, 2023

“Gaya arsitektur di mana aplikasi frontend yang dapat dikirim secara independen disusun menjadi keseluruhan yang lebih besar”

Apa arti dari semua ini?

Aplikasi web semakin kompleks. Banyak organisasi berjuang untuk mempertahankan basis kode frontend monolith dan untuk menskalakan proses pengembangan frontend mereka di beberapa tim.

Mikro frontend hanyalah salah satu pendekatan untuk mengelola kerumitan itu, dengan membagi produk menjadi aplikasi yang lebih kecil dan lebih sederhana, yang dapat dikirimkan ke production oleh tim mandiri dan otonom.

Pola tersebut telah didokumentasikan di ThoughtWorks Tech Radar sejak akhir 2016, dan terus berpindah dari Assess ke Trial dan akhirnya Adopt pada 2019.

Assess — Saya harus membaca tentang teknologi ini untuk mengetahui apakah ini layak digunakan.
Trial— Ada cukup banyak alasan meyakinkan bahwa saya harus melampaui pemahaman “Hello World” tentang teknologi ini.
Adopt — Saya telah menggunakan teknologi ini cukup untuk merekomendasikannya dengan percaya diri untuk kasus penggunaan yang sesuai.

Pelajari lebih dalam.

Pengembangan frontend yang baik itu sulit. Menskalakan pengembangan frontend agar banyak tim dapat bekerja secara bersamaan pada produk yang besar dan kompleks bahkan lebih sulit. Dalam artikel ini, saya akan menjelaskan tren terkini untuk memecah monolith frontend menjadi banyak bagian yang lebih kecil dan lebih mudah diatur, dan bagaimana arsitektur ini dapat meningkatkan efektivitas dan efisiensi tim yang mengerjakan kode frontend. Selain berbicara tentang berbagai manfaat dan biaya, saya akan membahas beberapa opsi implementasi yang tersedia, dan saya akan menyelami lebih dalam contoh aplikasi lengkap yang mendemonstrasikan teknik tersebut.

Dalam beberapa tahun terakhir, layanan mikro telah meledak popularitasnya, dengan banyak organisasi menggunakan gaya arsitektur ini untuk menghindari keterbatasan backend monolitik yang besar. Meskipun banyak yang telah ditulis tentang gaya membangun perangkat lunak sisi server ini, banyak perusahaan terus berjuang dengan basis kode frontend monolitik.

Mungkin Anda ingin membuat aplikasi web yang progresif atau responsif, tetapi tidak dapat menemukan tempat yang mudah untuk mulai mengintegrasikan fitur ini ke dalam kode yang ada. Mungkin Anda ingin mulai menggunakan fitur bahasa JavaScript baru (atau salah satu dari sekian banyak bahasa yang dapat dikompilasi ke JavaScript), tetapi Anda tidak dapat memasukkan alat build yang diperlukan ke dalam proses build yang ada. Atau mungkin Anda hanya ingin menskalakan pengembangan Anda sehingga beberapa tim dapat mengerjakan satu produk secara bersamaan, tetapi penggabungan dan kerumitan dalam monolit yang ada berarti bahwa setiap orang saling menginjak kaki. Ini semua adalah masalah nyata yang semuanya dapat berdampak negatif pada kemampuan Anda untuk memberikan pengalaman berkualitas tinggi secara efisien kepada pelanggan Anda.

Akhir-akhir ini saya melihat semakin banyak perhatian diberikan pada keseluruhan arsitektur dan struktur organisasi yang diperlukan untuk pengembangan web modern yang kompleks. Secara khusus, saya melihat pola muncul untuk menguraikan monolit frontend menjadi potongan yang lebih kecil dan sederhana yang dapat dikembangkan, diuji, dan diterapkan secara mandiri, sambil tetap tampil kepada pelanggan sebagai satu produk kohesif. saya menyebut teknik ini micro frontends , yang saya definisikan sebagai:

“Gaya arsitektur di mana aplikasi frontend yang dapat dikirim secara independen disusun menjadi keseluruhan yang lebih besar”

Beberapa manfaat utama yang saya lihat dari antarmuka mikro adalah:

Basis kode yang lebih kecil, lebih kohesif, dan dapat dipelihara
Organisasi yang lebih terukur dengan tim yang terpisah dan otonom
Kemampuan untuk memutakhirkan, memperbarui, atau bahkan menulis ulang bagian frontend dengan cara yang lebih bertahap daripada sebelumnya

Bukan kebetulan bahwa keuntungan utama ini adalah beberapa hal yang sama yang dapat diberikan oleh layanan mikro.

Tentu saja, tidak ada makan siang gratis dalam hal arsitektur perangkat lunak — semuanya ada biayanya. Beberapa implementasi micro frontend dapat menyebabkan duplikasi dependensi, meningkatkan jumlah byte yang harus diunduh oleh pengguna saya. Selain itu, peningkatan dramatis dalam otonomi tim dapat menyebabkan fragmentasi dalam cara kerja tim Anda. Meskipun demikian, saya percaya bahwa risiko ini dapat dikelola, dan bahwa manfaat mikro frontend seringkali lebih besar daripada biayanya.

Artikel di atas adalah hasil terjemahan bahasa Indonesia dari website https://microfrontends.com dan https://martinfowler.com/articles/micro-frontends.html

Artikel ini ditulis hanya untuk edukasi. Untuk informasi yang lebih detail silahkan kunjungi website https://martinfowler.com/articles/micro-frontends.html