Navigasi dan Routing pada Aplikasi Web Mobile dengan Pendekatan Microfrontend dan Module Federation

Dalam era aplikasi web mobile yang semakin kompleks, Navigasi dan Routing pada Aplikasi Web Mobile tidak lagi hanya tentang menukar halaman sederhana. Tim pengembang kini mencari solusi yang memungkinkan pengisolan fitur, penyebaran independen, dan pengalaman pengguna yang konsisten di berbagai perangkat. Salah satu pendektekan yang gaining traction adalah menggabungkan konsep microfrontend dengan module federation untuk mengatur navigasi dan routing secara modular dan skalabel.

Mengapa Memilih Microfrontend untuk Navigasi dan Routing?

Microfrontend membagi aplikasi menjadi beberapa bagian yang dapat dikembangkan, diuji, dan dijalankan secara independen oleh tim yang berbeda. Pada konteks Navigasi dan Routing pada Aplikasi Web Mobile, ini berarti setiap modul navigasi (misalnya menu bottom, sidebar, atau breadcrumb) dapat dikelola sebagai aplikasi mandiri yang tetap berkomunikasi melalui kontrak yang jelas. Keuntungan utama meliputi:

• Pengisolan kode yang mengurangi risiko konflik dependensi.
• Kemampuan tim untuk menggunakan framework atau library yang berbeda (misalnya React di satu modul, Svelte di modul lain) tanpa menghancurkan integritas navigasi keseluruhan.
• Deploy independen yang mempercepat rilis fitur navigasi baru tanpa memengaruhi bagian lain aplikasi.

Module Federation sebagai Jembatan Antar-Modul

Module Federation, yang awalnya diperkenalkan oleh Webpack 5, memungkinkan satu aplikasi untuk mengimpor modul dari aplikasi lain pada runtime. Dalam skenario Navigasi dan Routing pada Aplikasi Web Mobile, hal ini berfungsi sebagai berikut:

1. Host Application: Aplikasi utama yang menampung shell UI, menangani URL awal, dan menyediakan kontainer untuk modul navigasi.
2. Remote Modules: Setiap modul navigasi (misal @app/bottom-nav, @app/sidebar-menu) dibangun sebagai remote yang mengekspor komponen routing dan logika terkait.
3. Shared Dependencies: Library seperti react-router-dom atau vue-router dapat ditandai sebagai shared agar tidak duplikasi bobot paket.

Dengan pendekatan ini, perubahan pada modul navigasi hanya membutuhkan rebuild modul tersebut, lalu host secara otomatis menambarikannya saat dimuat ulang – tanpa perlu rebuild seluruh aplikasi.

Implementasi Praktis: Langkah‑Langkah Dasar

1. Menyiapkan Host dengan Webpack Module Federation

// webpack.host.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        bottomNav: 'bottomNav@http://localhost:3001/remoteEntry.js',
        sidebar: 'sidebar@http://localhost:3002/remoteEntry.js'
      },
      shared: ['react', 'react-dom', 'react-router-dom']
    })
  ]
};

2. Membuat Remote Modul Navigasi

// webpack.remote.js (misal untuk bottomNav)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  name: 'bottomNav',
  exposed: {
    './BottomNav': './src/components/BottomNav.jsx'
  },
  shared: ['react', 'react-dom', 'react-router-dom']
};

3. Menggunakan Modul dalam Host

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const BottomNav = lazy(() => import('bottomNav/BottomNav'));
const Sidebar = lazy(() => import('sidebar/Sidebar'));

function App() {
  return (
    
      
        
        
        
          <Route path="/" element={} />
          <Route path="/profile" element={} />
        
      
    
  );
}
export default App;

Manajemen State Antar-Modul untuk Navigasi yang Konsisten

Karena setiap modul navigasi mungkin perlu mengetahui rute aktif (misalnya untuk menandai item menu yang aktif), diperlukan mekanisme state sharing yang ringan. Beberapa pilihan yang efektif:

• Custom Event Bus: Menggunakan window.dispatchEvent dan addEventListener untuk mengirimkan objek lokasi antar-modul.
• Microfrontend State Library: seperti single-spa atau qiankun yang menyediakan komunikasi state terkelola.
• URL sebagai Sumber Satu: Setiap modul membaca window.location.pathname langsung, sehingga tidak perlu state eksternal – cukup didengarkan perubahan dengan popstate event.

Pendekatan terakhir sering kali cukup untuk Navigasi dan Routing pada Aplikasi Web Mobile karena URL sendiri menjadi sumber kebenaran tunggal.

Optimasi Performa dan Pengalaman Pengguna

Microfrontend dapat menambah overhead jaringan jika tidak diatur dengan baik. Untuk memastikan performa optimal:

• Gunakan prefetch atau preload pada remote entry selama idle time.
• Manfaatkan HTTP/2 atau HTTP/3 untuk multiplexing banyak request kecil.
• Implementasikan caching agresif pada remote entry melalui service worker (stale‑while‑revalidate).
• Pastikan shared dependencies benar‑benar bersama untuk menghindari duplikasi kode yang menambah ukuran bundle.

Contoh Kasus: Aplikasi Web Mobile untuk Tim Survey Lapangan

Sebuah tim survey menggunakan aplikasi web mobile yang terdiri dari tiga modul utama: peta interaktif, form input data, dan panel navigasi bawah. Dengan module federation:

1. Modul peta di tim GIS menggunakan OpenLayers dan menampilkan lapisan data.
2. Modul form menggunakan React Hook Form untuk validasi kompleks.
3. Modul navigasi bawah (bottom nav) hanya berisi tiga ikon yang masing‑masing mengarah ke halaman peta, form, dan riwayat.
4. Semua modul berbagi react-router-dom sebagai dependensi shared, sehingga perubahan URL di satu modul langsung terlihat oleh yang lain.
5. Deploy dilakukan secara independen: ketika tim GIS memperbaiki performa peta, hanya modul peta yang di‑build ulang dan di‑deploy, tanpa memengaruhi form atau navigasi.

Hasilnya: waktu pertama muat turun dari 3,2 detik menjadi 1,8 detik, dan tim dapat merilis update navigasi setiap dua minggu tanpa perlu koordinasi rilis seluruh aplikasi.

Best Practices dan Pitfalls yang Perlu Diperhatikan

• Jaga konsistensi UI/UX dengan design system atau CSS variabel yang di‑share sebagai asset remote.
• Hindari membuat terlalu banyak remote yang sangat kecil; overhead HTTP dapat menambah latensi.
• Pastikan versi shared dependencies kompatibel antar‑remote untuk mencegah runtime error.
• Monitoring: gunakan alat seperti Web Vitals dan log error terpusat untuk menangkap masalah yang muncul setelah federasi.

Kesimpulan

Pendekatan microfrontend berserta module federation menawarkan solusi yang kuat untuk mengatur Navigasi dan Routing pada Aplikasi Web Mobile dengan cara yang modular, dapat diskalakan, dan mudah dipelihara. Dengan memisahkan tanggungguna navigasi ke dalam remotes yang independen, tim dapat bekerja lebih cepat, mengurangi risiko konflik, dan memberikan pengalaman pengguna yang konsisten dan responsif di berbagai perangkat. Untuk proyek web mobile yang bertumbuh pesat, mengadopsi pola ini bukan lagi sekadar pilihan, namun menjadi strategi yang penting untuk keberhasilan jangka panjang.

FAQ

Apakah module federation hanya bekerja dengan Webpack 5?

Ya, module federation merupakan fitur resmi Webpack 5. Namun ada implementasi serupa untuk Vite melalui plugin vite-plugin-federation yang dapat digunakan jika tim lebih menyukai Vite sebagai build tool.

Bagaimana menangani otentikasi di antar‑modul?

Satu cara efisien adalah menyimpan token otentikasi di localStorage atau sessionStorage dan membacanya dari setiap modul. Untuk logika yang lebih kompleks, bisa menggunakan microfrontend state library yang menyediakan konteks auth yang ter‑share.

Apakah pendekatan ini menambah kompleksitas debugging?

Pada awalnya mungkin terasa lebih banyak karena ada banyak remote, namun dengan alat seperti module-federation/devtools dan source map yang ter‑gabung, debugging tetap dapat dilakukan secara menyeluruh seperti aplikasi monolitik.