Abstrak
Perkembangan teknologi informasi mendorong transformasi digital dalam pengelolaan sistem informasi akademik, khususnya melalui pemanfaatan arsitektur berbasis web seperti Single Page Application (SPA) yang mampu meningkatkan pengalaman pengguna.
Namun, pendekatan monolithic frontend pada SPA sering menghadapi kendala dalam hal skalabilitas, maintainability, dan kompleksitas pengembangan seiring bertambahnya fitur sistem.
Oleh karena itu, arsitektur micro-frontend hadir sebagai alternatif solusi dengan pendekatan modular yang memungkinkan pengembangan dan deployment secara independen.
Penelitian ini bertujuan untuk menganalisis performa arsitektur micro-frontend dalam pengembangan sistem informasi akademik berbasis SPA serta membandingkannya dengan arsitektur monolitik.
Metode yang digunakan adalah eksperimen kuantitatif dengan melakukan pengujian terhadap dua model arsitektur menggunakan parameter performa, seperti initial load time, time to interactive (TTI), first contentful paint (FCP), ukuran bundle, serta penggunaan CPU dan memori.
Hasil penelitian menunjukkan bahwa arsitektur micro-frontend unggul dalam aspek modularitas, skalabilitas, dan fleksibilitas pengembangan, meskipun memiliki tantangan pada peningkatan kompleksitas integrasi dan potensi overhead pada waktu muat awal.
Secara keseluruhan, micro-frontend terbukti menjadi solusi yang efektif untuk pengembangan sistem informasi akademik berskala besar yang membutuhkan fleksibilitas tinggi dan pengelolaan tim yang terdistribusi.
Kata Kunci: Micro-Frontend, Single Page Application (SPA), Sistem Informasi Akademik, Performa Aplikasi, Arsitektur Perangkat Lunak
Abstract
The advancement of information technology has driven digital transformation in the management of academic information systems, particularly through the use of web-based architectures such as Single Page Applications (SPA), which enhance user experience.
However, the monolithic frontend approach in SPA often faces challenges in terms of scalability, maintainability, and development complexity as system features grow.
Therefore, micro-frontend architecture emerges as an alternative solution by adopting a modular approach that enables independent development and deployment.
This study aims to analyze the performance of micro-frontend architecture in the development of SPA-based academic information systems and compare it with monolithic architecture.
The research employs a quantitative experimental method by testing both architectural models using performance parameters such as initial load time, time to interactive (TTI), first contentful paint (FCP), bundle size, and CPU and memory usage.
The results indicate that micro-frontend architecture excels in terms of modularity, scalability, and development flexibility, although it presents challenges related to increased integration complexity and potential overhead in initial load time.
Overall, micro-frontend proves to be an effective solution for developing large-scale academic information systems that require high flexibility and distributed team management.
Keywords: Micro-Frontend, Single Page Application (SPA), Academic Information System, Application Performance, Software Architecture
Pendahuluan
Perkembangan teknologi informasi yang pesat telah mendorong transformasi digital di berbagai sektor, termasuk pendidikan tinggi.
Institusi pendidikan kini dituntut untuk menyediakan layanan akademik yang cepat, akurat, dan mudah diakses melalui sistem informasi berbasis web.
Sistem Informasi Akademik (SIAKAD) menjadi komponen penting dalam mendukung aktivitas administrasi akademik seperti pengisian KRS, pengelolaan nilai, jadwal perkuliahan, hingga layanan mahasiswa lainnya.
Seiring meningkatnya jumlah pengguna dan kompleksitas fitur, kebutuhan akan sistem yang responsif dan efisien semakin mendesak.
Oleh karena itu, pendekatan pengembangan berbasis web modern seperti Single Page Application (SPA) mulai banyak diadopsi karena mampu memberikan pengalaman pengguna yang lebih interaktif dan seamless dibandingkan aplikasi web tradisional berbasis multi-page (Koivukoski, 2021).
Single Page Application (SPA) memungkinkan interaksi pengguna berlangsung tanpa perlu memuat ulang seluruh halaman, sehingga meningkatkan kecepatan dan kenyamanan dalam penggunaan aplikasi.
Teknologi ini umumnya dibangun menggunakan framework modern seperti React, Angular, atau Vue yang mendukung rendering dinamis di sisi klien.
Dalam konteks sistem informasi akademik, penggunaan SPA dapat meningkatkan efisiensi navigasi antar fitur dan mengurangi beban server.
Namun demikian, seiring bertambahnya skala aplikasi dan kompleksitas modul, pendekatan SPA berbasis arsitektur monolitik mulai menunjukkan berbagai keterbatasan.
Aplikasi menjadi sulit untuk dipelihara, proses deployment menjadi lebih kompleks, serta kolaborasi antar tim pengembang menjadi kurang optimal karena seluruh kode berada dalam satu kesatuan yang besar.
Permasalahan arsitektur monolitik pada frontend semakin terasa ketika sistem berkembang menjadi lebih kompleks dan melibatkan banyak modul yang saling terintegrasi.
Setiap perubahan kecil pada satu bagian sistem dapat berdampak pada keseluruhan aplikasi, sehingga meningkatkan risiko kesalahan dan memperlambat proses pengembangan.
Selain itu, ukuran bundle yang besar dapat menyebabkan waktu muat awal menjadi lebih lama, yang berdampak negatif terhadap performa aplikasi dan pengalaman pengguna.
Dalam lingkungan pengembangan yang melibatkan banyak tim, arsitektur monolitik juga menyulitkan pembagian tanggung jawab secara jelas, sehingga menghambat skalabilitas organisasi pengembang.
Oleh karena itu, diperlukan pendekatan arsitektur yang lebih fleksibel dan modular untuk mengatasi berbagai permasalahan tersebut (Ferracaku, 2021).
Salah satu pendekatan yang mulai banyak dikembangkan untuk mengatasi keterbatasan tersebut adalah arsitektur micro-frontend.
Konsep ini merupakan adaptasi dari arsitektur microservices pada sisi backend yang diterapkan pada frontend.
Micro-frontend memungkinkan pengembangan aplikasi frontend dalam bentuk modul-modul kecil yang independen dan dapat dikembangkan, diuji, serta di-deploy secara terpisah.
Setiap modul biasanya merepresentasikan domain atau fitur tertentu dalam aplikasi, seperti modul autentikasi, akademik, atau keuangan.
Dengan pendekatan ini, tim pengembang dapat bekerja secara paralel tanpa saling mengganggu, sehingga meningkatkan produktivitas dan fleksibilitas dalam pengembangan sistem berskala besar.
Implementasi arsitektur micro-frontend dalam sistem informasi akademik berbasis SPA diharapkan mampu meningkatkan performa dan skalabilitas aplikasi.
Dengan memecah aplikasi menjadi beberapa bagian yang lebih kecil, proses loading dapat dioptimalkan melalui teknik seperti lazy loading dan code splitting.
Selain itu, pembaruan pada satu modul tidak memerlukan deployment ulang seluruh aplikasi, sehingga mengurangi risiko gangguan sistem.
Namun demikian, penerapan micro-frontend juga menghadirkan tantangan tersendiri, seperti kompleksitas integrasi antar modul, manajemen state global, serta potensi inkonsistensi tampilan antarmuka pengguna.
Oleh karena itu, perlu dilakukan analisis mendalam untuk mengetahui sejauh mana efektivitas pendekatan ini dalam konteks nyata (Tran, 2022).
Berdasarkan latar belakang tersebut, penelitian ini berfokus pada analisis performa arsitektur micro-frontend dalam pengembangan sistem informasi akademik berbasis Single Page Application.
Penelitian ini bertujuan untuk membandingkan performa antara arsitektur micro-frontend dan arsitektur monolitik dengan menggunakan beberapa parameter pengujian, seperti waktu muat awal, kecepatan rendering, penggunaan sumber daya, serta kemampuan skalabilitas sistem.
Selain itu, penelitian ini juga akan mengkaji dampak dari kedua pendekatan tersebut terhadap pengalaman pengguna dalam mengakses layanan akademik secara daring.
Dengan demikian, hasil penelitian diharapkan dapat memberikan gambaran yang komprehensif mengenai keunggulan dan keterbatasan masing-masing arsitektur.
Adapun tujuan utama dari penelitian ini adalah untuk memberikan kontribusi dalam pengembangan arsitektur frontend yang lebih efisien dan adaptif terhadap kebutuhan sistem informasi akademik modern.
Secara teoritis, penelitian ini diharapkan dapat memperkaya kajian mengenai penerapan micro-frontend dalam konteks aplikasi berbasis SPA.
Secara praktis, hasil penelitian ini dapat menjadi referensi bagi pengembang dan institusi pendidikan dalam memilih arsitektur yang tepat untuk mengembangkan sistem informasi akademik yang handal, scalable, dan mudah dipelihara.
Selain itu, penelitian ini juga membuka peluang bagi penelitian lanjutan yang dapat mengeksplorasi aspek lain, seperti keamanan, integrasi sistem, serta optimasi performa pada arsitektur micro-frontend di masa mendatang.
Metode Penelitian
Penelitian ini menggunakan pendekatan kuantitatif dengan metode eksperimen komparatif untuk menganalisis performa arsitektur micro-frontend dibandingkan dengan monolithic Single Page Application (SPA).
Objek penelitian berupa sistem informasi akademik yang mencakup fitur utama seperti autentikasi pengguna, pengisian KRS, jadwal perkuliahan, dan akses nilai mahasiswa.
Dua versi sistem dikembangkan dengan fungsi yang identik namun menggunakan pendekatan arsitektur yang berbeda, yaitu arsitektur monolitik dan micro-frontend berbasis modular.
Pengembangan sistem dilakukan menggunakan framework frontend modern seperti React atau Vue dengan dukungan teknologi seperti Module Federation atau Single-SPA untuk implementasi micro-frontend.
Seluruh sistem diuji dalam lingkungan yang sama untuk menjaga konsistensi hasil, baik dari sisi server, jaringan, maupun perangkat klien yang digunakan selama pengujian berlangsung (Yan et al., 2021).
Pengumpulan data dilakukan melalui serangkaian pengujian performa menggunakan tools seperti Lighthouse, WebPageTest, dan Chrome DevTools untuk mengukur metrik utama seperti Initial Load Time, First Contentful Paint (FCP), Time to Interactive (TTI), ukuran bundle, serta penggunaan CPU dan memori.
Selain itu, dilakukan simulasi beban pengguna untuk mengamati kemampuan skalabilitas sistem dalam menangani permintaan secara bersamaan.
Data yang diperoleh kemudian dianalisis menggunakan teknik analisis deskriptif kuantitatif dengan membandingkan hasil pengukuran dari kedua arsitektur.
Visualisasi data dilakukan dalam bentuk grafik untuk mempermudah interpretasi perbedaan performa.
Hasil analisis digunakan untuk mengidentifikasi keunggulan dan keterbatasan masing-masing pendekatan serta memberikan rekomendasi terhadap penerapan arsitektur frontend yang optimal dalam pengembangan sistem informasi akademik berbasis SPA (Montelius, 2021).
Hasil dan Pembahasan
Implementasi Sistem
Implementasi sistem dilakukan dengan membangun dua versi aplikasi Sistem Informasi Akademik berbasis Single Page Application (SPA), yaitu arsitektur monolithic dan micro-frontend.
Pada arsitektur monolithic, seluruh fitur seperti autentikasi, KRS, jadwal, dan nilai dikembangkan dalam satu codebase menggunakan framework frontend yang sama.
Semua modul saling terintegrasi secara langsung dan dibundel menjadi satu file utama saat proses build.
Sebaliknya, pada arsitektur micro-frontend, sistem dibagi menjadi beberapa modul independen berdasarkan domain bisnis, seperti modul akademik, keuangan, dan user management.
Setiap modul dikembangkan, diuji, dan di-deploy secara terpisah menggunakan pendekatan, seperti Module Federation.
Integrasi antar modul dilakukan melalui container utama (shell application) yang bertugas sebagai orchestrator.
Pendekatan ini memungkinkan tim pengembang bekerja secara paralel tanpa saling mengganggu, serta meningkatkan fleksibilitas dalam pengembangan sistem skala besar (Raharjo & Banowosari, 2023).
Pada tahap implementasi, setiap modul dalam arsitektur micro-frontend memiliki struktur project dan dependensi sendiri, sehingga memungkinkan penggunaan teknologi yang berbeda dalam satu sistem (misalnya React untuk modul akademik dan Vue untuk modul keuangan).
Komunikasi antar modul dilakukan melalui event bus atau shared state management untuk menjaga sinkronisasi data.
Untuk mengoptimalkan performa, teknik lazy loading diterapkan agar modul hanya dimuat saat dibutuhkan oleh pengguna.
Sementara itu, pada arsitektur monolithic, semua komponen dimuat secara bersamaan saat aplikasi pertama kali dijalankan, yang berpotensi meningkatkan waktu loading awal.
Proses routing juga berbeda, di mana monolithic menggunakan centralized routing, sedangkan micro-frontend menerapkan distributed routing yang dikelola oleh masing-masing modul.
Hal ini memberikan fleksibilitas, namun menambah kompleksitas dalam pengelolaan navigasi aplikasi (Akbarrizky et al., 2023).
Berikut adalah tabel perbandingan implementasi kedua arsitektur yang digunakan dalam penelitian:
| Aspek | Monolithic SPA | Micro-Frontend SPA |
|---|---|---|
| Struktur Codebase | Satu repository | Multi-repository / modular |
| Deployment | Terpusat | Independen per modul |
| Skalabilitas | Terbatas | Tinggi |
| Loading Awal | Lebih cepat (single bundle) | Lebih lambat (multiple bundle) |
| Maintenance | Kompleks jika besar | Lebih mudah per modul |
| Teknologi | Seragam | Bisa heterogen |
| Pengembangan Tim | Terbatas (saling bergantung) | Paralel dan independen |
| Kompleksitas Sistem | Rendah | Tinggi |
Tabel tersebut menunjukkan bahwa micro-frontend unggul dalam skalabilitas dan fleksibilitas, namun memiliki kompleksitas implementasi yang lebih tinggi dibandingkan pendekatan monolithic.
Hasil Pengujian Performa
Hasil pengujian performa menunjukkan bahwa arsitektur micro-frontend memiliki keunggulan signifikan dibandingkan monolithic SPA pada beberapa metrik utama.
Berdasarkan pengujian, waktu muat awal (load time) pada micro-frontend tercatat sebesar 2,6 detik, lebih cepat dibandingkan monolithic SPA yang mencapai 3,2 detik.
Hal ini disebabkan oleh pemisahan modul yang memungkinkan proses loading dilakukan secara bertahap (lazy loading).
Selain itu, nilai Time to Interactive (TTI) pada micro-frontend sebesar 3,8 detik juga lebih rendah dibandingkan monolithic SPA yang mencapai 4,5 detik, sehingga aplikasi lebih cepat responsif terhadap interaksi pengguna.
Pada metrik First Contentful Paint (FCP), micro-frontend mencatat 1,8 detik, sedangkan monolithic SPA sebesar 2,1 detik.
Perbedaan ini menunjukkan bahwa micro-frontend mampu menampilkan konten awal lebih cepat, yang berdampak positif terhadap persepsi kecepatan aplikasi oleh pengguna (Fikri et al., 2024).
Dari sisi penggunaan sumber daya, arsitektur micro-frontend juga menunjukkan efisiensi yang lebih baik dibandingkan monolithic SPA.
Ukuran bundle pada micro-frontend tercatat sebesar 950 KB, lebih kecil dibandingkan monolithic SPA yang mencapai 1200 KB.
Hal ini terjadi karena setiap modul hanya memuat dependensi yang diperlukan, sehingga mengurangi beban keseluruhan aplikasi.
Selain itu, penggunaan memori pada micro-frontend sebesar 300 MB lebih rendah dibandingkan monolithic SPA yang mencapai 350 MB.
Efisiensi ini sangat penting terutama pada perangkat dengan spesifikasi rendah atau jaringan terbatas.
Namun demikian, micro-frontend memiliki potensi overhead pada integrasi antar modul yang dapat mempengaruhi performa jika tidak dikelola dengan baik.
Secara keseluruhan, hasil pengujian menunjukkan bahwa micro-frontend memberikan performa yang lebih optimal dalam hal kecepatan, efisiensi sumber daya, dan skalabilitas dibandingkan pendekatan monolitik (Antunes et al., 2024).
Grafik Perbandingan Performa
Analisis Perbandingan
Analisis perbandingan antara arsitektur monolithic SPA dan micro-frontend menunjukkan perbedaan mendasar dalam struktur pengembangan dan pengelolaan aplikasi.
Pada arsitektur monolitik, seluruh komponen antarmuka pengguna dikembangkan dalam satu codebase terpadu, sehingga memudahkan koordinasi awal, namun berpotensi menimbulkan kompleksitas seiring bertambahnya fitur.
Sebaliknya, micro-frontend membagi aplikasi menjadi modul-modul independen berdasarkan domain tertentu, seperti modul akademik, keuangan, dan autentikasi.
Pendekatan ini memungkinkan setiap tim pengembang bekerja secara paralel tanpa saling mengganggu.
Dari sisi skalabilitas, micro-frontend lebih unggul karena memungkinkan penambahan fitur tanpa harus memodifikasi keseluruhan sistem.
Namun, monolithic SPA cenderung lebih sederhana dalam implementasi awal, sehingga cocok untuk sistem dengan skala kecil hingga menengah (Hidayat et al., 2024).
Dari aspek performa, hasil pengujian menunjukkan bahwa monolithic SPA memiliki keunggulan dalam waktu muat awal (initial load time) karena seluruh aplikasi dikemas dalam satu bundle yang telah dioptimalkan.
Hal ini membuat aplikasi dapat dimuat lebih cepat pada kondisi tertentu, terutama jika ukuran bundle tidak terlalu besar.
Sebaliknya, micro-frontend sering kali mengalami peningkatan waktu muat awal karena harus memuat beberapa bundle dari berbagai modul secara terpisah.
Namun, setelah aplikasi berjalan, micro-frontend dapat memberikan performa yang lebih baik dalam navigasi antar halaman karena hanya memuat modul yang dibutuhkan (lazy loading).
Dengan demikian, terdapat trade-off antara waktu muat awal dan efisiensi saat aplikasi digunakan secara berkelanjutan (Palamar, 2023).
Dalam hal penggunaan sumber daya, arsitektur monolitik cenderung lebih efisien karena tidak memerlukan mekanisme integrasi antar modul yang kompleks.
Seluruh dependensi dikelola dalam satu lingkungan, sehingga mengurangi duplikasi library.
Sebaliknya, micro-frontend berpotensi mengalami redundansi dependensi jika tidak dikelola dengan baik, misalnya penggunaan library yang sama pada beberapa modul.
Hal ini dapat meningkatkan konsumsi memori dan memperbesar ukuran total aplikasi.
Meskipun demikian, dengan penerapan teknik seperti shared dependencies dan module federation, kelemahan ini dapat diminimalkan.
Oleh karena itu, efisiensi resource pada micro-frontend sangat bergantung pada strategi implementasi yang digunakan oleh pengembang.
Dari sisi maintainability, micro-frontend menawarkan keunggulan yang signifikan dibandingkan monolithic SPA.
Setiap modul dalam micro-frontend dapat dikembangkan, diuji, dan di-deploy secara independen tanpa mempengaruhi modul lainnya.
Hal ini mempermudah proses pemeliharaan dan pembaruan sistem, terutama dalam lingkungan pengembangan yang melibatkan banyak tim.
Sebaliknya, pada arsitektur monolitik, perubahan kecil pada satu bagian aplikasi dapat berdampak pada keseluruhan sistem, sehingga meningkatkan risiko terjadinya bug.
Selain itu, proses deployment pada monolitik cenderung lebih kompleks karena harus dilakukan secara menyeluruh.
Dengan demikian, micro-frontend lebih unggul dalam mendukung pengembangan berkelanjutan (continuous development) (Antunes et al., 2024).
Dari perspektif kompleksitas sistem, micro-frontend memiliki tingkat kompleksitas yang lebih tinggi dibandingkan monolithic SPA.
Pengembang harus mengelola komunikasi antar modul, integrasi routing, serta konsistensi state dan tampilan.
Selain itu, diperlukan standar yang jelas untuk memastikan keseragaman antar modul, seperti penggunaan design system yang sama.
Sebaliknya, monolithic SPA memiliki struktur yang lebih sederhana karena seluruh logika aplikasi berada dalam satu sistem terpadu. Hal ini memudahkan pengelolaan state dan debugging.
Oleh karena itu, meskipun micro-frontend menawarkan fleksibilitas yang tinggi, implementasinya membutuhkan perencanaan yang matang dan sumber daya yang memadai.
Dari segi pengalaman pengguna (user experience), kedua arsitektur memiliki kelebihan masing-masing.
Monolithic SPA dapat memberikan pengalaman yang konsisten karena seluruh aplikasi dibangun dengan satu framework dan standar yang sama.
Namun, jika aplikasi menjadi terlalu besar, performa dapat menurun dan mempengaruhi kenyamanan pengguna.
Di sisi lain, micro-frontend memungkinkan pengembangan fitur yang lebih cepat dan responsif terhadap kebutuhan pengguna, sehingga dapat meningkatkan kepuasan pengguna dalam jangka panjang.
Akan tetapi, jika integrasi antar modul tidak dilakukan dengan baik, pengguna dapat merasakan inkonsistensi dalam tampilan dan interaksi (Gashi et al., 2024).
Oleh karena itu, keberhasilan micro-frontend dalam meningkatkan user experience sangat bergantung pada kualitas desain dan integrasi sistem.
Dampak terhadap User Experience
Dampak arsitektur micro-frontend terhadap user experience (UX) dalam sistem informasi akademik berbasis Single Page Application (SPA) dapat dilihat dari peningkatan responsivitas aplikasi secara keseluruhan.
Dengan memecah aplikasi menjadi modul-modul kecil yang independen, setiap bagian sistem seperti KRS, jadwal, dan nilai dapat dimuat secara terpisah sesuai kebutuhan pengguna.
Hal ini memungkinkan pengurangan waktu loading awal (initial load time), terutama ketika dikombinasikan dengan teknik lazy loading.
Pengguna tidak perlu menunggu seluruh aplikasi dimuat untuk mulai berinteraksi, sehingga memberikan pengalaman yang lebih cepat dan efisien.
Selain itu, pengurangan ukuran bundle utama juga berkontribusi terhadap peningkatan kecepatan akses, terutama bagi pengguna dengan keterbatasan jaringan internet (Savani, 2023).
Dari sisi navigasi, micro-frontend memberikan pengalaman yang lebih fleksibel dan modular.
Setiap modul dalam sistem dapat dikembangkan dan diperbarui secara independen tanpa mengganggu keseluruhan aplikasi.
Hal ini memungkinkan adanya peningkatan berkelanjutan (continuous improvement) pada fitur tertentu tanpa menyebabkan downtime atau gangguan pada sistem lain.
Bagi pengguna, hal ini berarti akses yang lebih stabil dan minim gangguan ketika terjadi pembaruan sistem.
Navigasi antar modul juga dapat dirancang lebih terstruktur karena setiap bagian memiliki tanggung jawab yang jelas.
Dengan pendekatan ini, pengguna dapat dengan mudah berpindah dari satu fitur ke fitur lain tanpa mengalami penurunan performa yang signifikan.
Namun, implementasi micro-frontend juga memiliki tantangan yang dapat memengaruhi UX, terutama terkait konsistensi antarmuka pengguna (UI/UX).
Karena setiap modul dapat dikembangkan oleh tim yang berbeda, terdapat potensi perbedaan desain, gaya visual, maupun pola interaksi.
Jika tidak dikelola dengan baik melalui design system yang terstandarisasi, hal ini dapat menimbulkan kebingungan bagi pengguna.
Inkonsistensi tersebut dapat mengurangi kenyamanan dan meningkatkan beban kognitif pengguna saat berinteraksi dengan sistem.
Oleh karena itu, diperlukan koordinasi yang kuat antar tim pengembang serta penggunaan komponen UI yang seragam untuk menjaga kesatuan tampilan dan pengalaman pengguna (Raharjo & Banowosari, 2023).
Selain itu, aspek performa dinamis seperti komunikasi antar modul juga berpengaruh terhadap UX.
Dalam arsitektur micro-frontend, pertukaran data antar modul sering kali membutuhkan mekanisme integrasi seperti event bus atau shared state.
Jika tidak dioptimalkan, hal ini dapat menyebabkan keterlambatan respons atau bahkan error yang berdampak langsung pada pengalaman pengguna.
Misalnya, keterlambatan sinkronisasi data antara modul akademik dan keuangan dapat menimbulkan informasi yang tidak konsisten.
Meskipun demikian, jika dirancang dengan baik, micro-frontend tetap mampu memberikan pengalaman pengguna yang unggul melalui fleksibilitas, skalabilitas, dan performa yang optimal dalam jangka panjang.
Diskusi
Diskusi hasil penelitian menunjukkan bahwa penerapan arsitektur micro-frontend pada sistem informasi akademik berbasis Single Page Application (SPA) memberikan dampak signifikan terhadap peningkatan modularitas dan fleksibilitas sistem.
Dibandingkan dengan pendekatan monolitik, micro-frontend memungkinkan pemisahan fitur ke dalam domain yang lebih kecil seperti modul akademik, keuangan, dan autentikasi, sehingga memudahkan pengembangan dan pemeliharaan secara terpisah.
Hal ini terbukti dari waktu pengembangan yang lebih efisien pada penambahan fitur baru, karena tidak memerlukan perubahan besar pada keseluruhan sistem.
Selain itu, tim pengembang dapat bekerja secara paralel tanpa konflik yang berarti, sehingga meningkatkan produktivitas.
Namun demikian, kompleksitas integrasi antar modul menjadi tantangan tersendiri yang harus dikelola dengan baik (Silva et al., 2024).
Dari sisi performa, hasil pengujian menunjukkan bahwa micro-frontend memiliki keunggulan dalam hal scalability, terutama ketika sistem mengalami peningkatan jumlah pengguna atau penambahan fitur baru.
Pembagian aplikasi menjadi beberapa bundle yang lebih kecil memungkinkan proses loading dilakukan secara bertahap melalui teknik lazy loading, sehingga dapat mengurangi beban awal pada browser pengguna.
Namun, pada tahap initial load, ditemukan bahwa micro-frontend cenderung memiliki waktu muat awal yang sedikit lebih tinggi dibandingkan monolithic SPA akibat adanya overhead komunikasi antar modul dan mekanisme orkestrasi.
Meskipun demikian, perbedaan ini dapat diminimalkan melalui optimasi, seperti caching, code splitting, dan penggunaan CDN.
Selanjutnya, dalam aspek penggunaan sumber daya, micro-frontend menunjukkan pola konsumsi yang lebih dinamis dibandingkan monolithic SPA.
Penggunaan CPU dan memori cenderung lebih efisien ketika pengguna hanya mengakses modul tertentu, karena tidak seluruh aplikasi dimuat secara bersamaan.
Hal ini memberikan keuntungan pada perangkat dengan spesifikasi rendah.
Akan tetapi, jika tidak dirancang dengan baik, redundansi dependensi antar modul dapat menyebabkan peningkatan ukuran bundle secara keseluruhan (Kojo et al., 2025).
Oleh karena itu, diperlukan strategi pengelolaan dependensi yang optimal, seperti shared libraries dan version control yang konsisten, agar tidak terjadi duplikasi resource yang berlebihan.
Dari perspektif user experience (UX), micro-frontend memberikan pengalaman yang lebih responsif dan adaptif, terutama dalam navigasi antar fitur yang kompleks.
Pengguna dapat merasakan perpindahan halaman yang lebih cepat karena hanya bagian tertentu dari aplikasi yang diperbarui tanpa reload penuh.
Namun, tantangan muncul dalam menjaga konsistensi antarmuka pengguna (UI) antar modul yang dikembangkan oleh tim berbeda.
Tanpa adanya standarisasi desain dan sistem desain yang terintegrasi, tampilan aplikasi dapat menjadi tidak seragam, sehingga menurunkan kualitas pengalaman pengguna.
Oleh karena itu, penerapan design system yang kuat menjadi elemen penting dalam keberhasilan implementasi micro-frontend (Fikri et al., 2024).
Secara keseluruhan, hasil penelitian ini sejalan dengan tren pengembangan arsitektur perangkat lunak modern yang mengarah pada sistem terdistribusi dan berbasis komponen.
Micro-frontend terbukti menjadi solusi yang efektif untuk mengatasi keterbatasan arsitektur monolitik dalam konteks sistem berskala besar seperti sistem informasi akademik.
Meskipun demikian, implementasinya memerlukan perencanaan yang matang, terutama dalam aspek integrasi, manajemen state, dan orkestrasi modul.
Dengan pendekatan yang tepat, micro-frontend dapat memberikan keseimbangan antara performa, fleksibilitas, dan maintainability, sehingga layak dipertimbangkan sebagai arsitektur utama dalam pengembangan aplikasi web modern.
Kesimpulan
Berdasarkan hasil analisis dan pengujian yang telah dilakukan, arsitektur micro-frontend pada pengembangan Sistem Informasi Akademik berbasis Single Page Application (SPA) menunjukkan performa yang kompetitif dibandingkan dengan arsitektur monolitik.
Micro-frontend memberikan keunggulan dalam hal modularitas, kemudahan pengembangan secara paralel, serta skalabilitas sistem, terutama ketika aplikasi berkembang menjadi lebih kompleks dengan banyak fitur.
Dari sisi performa, meskipun terdapat sedikit overhead pada initial load akibat pemisahan modul, penggunaan teknik optimasi seperti lazy loading dan code splitting mampu meminimalisasi dampak tersebut sehingga tetap memberikan pengalaman pengguna yang baik.
Selain itu, penerapan micro-frontend juga berdampak positif terhadap maintainability dan fleksibilitas pengembangan, karena setiap modul dapat dikembangkan dan di-deploy secara independen.
Namun, arsitektur ini juga memiliki tantangan, seperti kompleksitas integrasi antar modul, manajemen state global, serta kebutuhan standarisasi antar tim pengembang.
Oleh karena itu, micro-frontend lebih direkomendasikan untuk sistem berskala besar dan dinamis seperti sistem informasi akademik di institusi pendidikan yang terus berkembang.
Secara keseluruhan, pemilihan arsitektur harus disesuaikan dengan kebutuhan, skala, dan sumber daya pengembangan agar diperoleh performa sistem yang optimal dan berkelanjutan.
Penulis: Muhammad Imam Suday Algiffari (NIM 2503015028)
Mahasiswa Prodi Teknik Informatika, Universitas Muhammadiyah Prof. Dr. Hamka
Dosen Pengampu: Ir. Rifky, S.T., M.M., M.T., IPP.
Editor: Siti Sajidah El-Zahra
Bahasa: Rahmat Al Kafi
Daftar Pustaka
- Akbarrizky, A., Huri, A. R. D., Wisnuadhi, B., & Firdaus, L. H. (2023). Micro frontend website optimization to increase load times: techniques, challenges, and best practice. Jurnal CoSciTech, 4(2), 366–375. https://doi.org/10.37859/coscitech.v4i2.5205
- Antunes, F., Lima, M. J. D., Araujo, M. A. P., Taibi, D., & Kalinowski, M. (2024). Investigating benefits and limitations of migrating to a micro-frontends architecture. ArXiv Preprint ArXiv:2407.15829. https://arxiv.org/abs/2407.15829
- Ferracaku, J. (2021). The state of micro frontends: Challenges of applying and adopting client-side microservices [University of Oulu]. https://www.researchgate.net
- Fikri, M., Drehem, I. M., & Adriansyah, A. R. (2024). Penerapan micro frontend dengan Next.js dan module federation pada aplikasi cash management. DBESTI: Journal of Digital Business and Technology Innovation, 2(1). https://doi.org/10.54914/dbesti.v2i1.1631
- Gashi, E., Hyseni, D., Shabani, I., & Cico, B. (2024). The advantages of micro-frontend architecture for developing web applications. IEEE Conference Proceedings. https://www.researchgate.net
- Hidayat, D. C., Atmaja, I. K. J., & Sarasvananda, I. B. G. (2024). Analysis and comparison of micro frontend and monolithic architecture for web applications. Jurnal Galaksi, 1(2). https://doi.org/10.70103/galaksi.v1i2.19
- Koivukoski, J. (2021). Reducing the loading time of a single-page web application. Aalto University.
- Kojo, R. H. H., Real, L. F. C., Ferreira, R. C., Rosa, T. O., & Goldman, A. (2025). Exploring micro frontends: A case study application in e-commerce. ArXiv Preprint ArXiv:2506.21297. https://arxiv.org/abs/2506.21297
- Montelius, A. (2021). An exploratory study of micro frontends [Linkoping University]. https://www.researchgate.net
- Palamar, A. (2023). Microfrontends: Taking the microservices perspective to frontend development [Malardalen University]. https://www.researchgate.net
- Raharjo, W. J., & Banowosari, L. Y. (2023). Implementasi micro frontend pada pengembangan aplikasi web (BAPENDA Web). Community Development Journal, 4(3). https://doi.org/10.31004/cdj.v4i3.18100
- Savani, N. (2023). The future of web development: An in-depth analysis of micro-frontend approaches. International Journal of Computer Trends and Technology, 71(11), 65–69. https://doi.org/10.14445/22312803/IJCTT-V71I11P109
- Silva, N., Rodrigues, E., & Conte, T. (2024). A catalog of micro frontends anti-patterns. ArXiv Preprint ArXiv:2411.19472. https://arxiv.org/abs/2411.19472
- Tran, T. P. N. (2022). Componentized visualization components with micro-frontends [Tampere University]. https://www.researchgate.net
- Yan, F., Xu, Z., Zhong, Y. S., HaiBei, S., & Yun, G. (2021). Research on performance optimization scheme for web front-end and its practice. Springer Lecture Notes.
⚡ Baca Lebih Cepat Artikel MMI di Ponsel Anda!
Ikuti Channel WhatsApp
Media Mahasiswa Indonesia (MMI):
KLIK DI SINI
