Arsitektur Aplikasi Frontend Enterprise

• Semakin besar codebase = semakin sulit dipahami dan dimodifikasi

• Solusinya? Jaga agar codebase tetap kecil.

• Pisahkan codebase per domain & micro frontend to rescue!

• Kebutuhan seperti pengaturan relasi dependensi library & pengecekan dependensi di dalam monorepo diselesaikan dengan mengadopsi Nx

• Pisahkan kode menjadi application dan library

• Application berperan untuk injeksi dependensi dan konfigurasi

• Sebagian besar fungsionalitas diimplementasikan di library

  • Di library tidak hanya ditulis design system, internasionalisasi, dan modul pihak ketiga yang dapat digunakan secara umum, tetapi juga kode yang tidak digunakan ulang seperti hero banner halaman utama, halaman detail produk, dan riwayat pesanan.

Library Feature

• Pada dasarnya, semua komponen yang digunakan dalam satu halaman ditulis di library Feature dengan nama yang sama

  • contoh) semua komponen untuk halaman SignInPage pada domain account ditulis di library account/feature-sign-in

• Komponen yang dibagikan oleh dua atau lebih halaman dalam domain yang sama dipisahkan menjadi feature tersendiri di dalam domain tersebut

  • contoh) jika komponen KakaoLoginButton digunakan bersama di SignInPage dan SignUpPage pada domain account, maka komponen tersebut ditulis di library account/feature-social-login

• Komponen yang dibagikan oleh halaman-halaman dari domain yang berbeda dipisahkan menjadi feature tersendiri di dalam domain bersama

  • contoh) komponen GlobalNavigation yang dibagikan oleh HomePage pada domain landing dan LecturePage pada domain classroom ditulis di library shared/feature-navigation

Library Shell

• Menggabungkan komponen dari library Feature dan UI untuk membuat halaman

  • contoh) komponen SignInPage adalah komponen dari library account/shell-kr-web. Di dalamnya juga ada SignUpPage, PhoneVerificationPage, dan lain-lain.

• Library Shell adalah entry point untuk domain tertentu yang disediakan ke application

• Dapat menyediakan entry point yang berbeda untuk tiap application

  • misalnya..

  • Komponen yang digunakan di HomePage ditulis di library landing/feature-home.

  • Namun, meskipun sama-sama HomePage, susunannya akan berbeda tergantung apakah itu HomePage untuk situs AS, situs Jepang, atau situs Korea.

  • Karena itu, bisa dibuat library shell untuk masing-masing application yang mengakses domain landing. (shell-us-web, shell-jp-web, shell-kr-web)

Library Provider

• Library yang mengelola state yang dibagikan oleh dua atau lebih library Feature

  • contoh) shared/provider-auth-state yang mengelola status login

Library UI

• Kumpulan komponen presentational yang dibagikan oleh dua atau lebih library.

Library Utility

• Semua modul yang tidak termasuk dalam empat kategori di atas

• Harus menyediakan fungsi yang cukup independen sehingga dapat diuji dan dideploy tanpa terkait dengan model domain Class101.

  • contoh) shared/utils-apollo-client, shared/utils-i18n

Application

• Hanya bertugas menangani konfigurasi dan manajemen dependensi = hampir tidak ada kode di application