Monorepo Frontend: Manajemen Workspace Lerna dan Nx

Dalam lanskap pengembangan frontend yang terus berkembang, mengelola proyek yang besar dan kompleks bisa menjadi tantangan yang signifikan. Pengaturan multi-repo tradisional, meskipun menawarkan isolasi, dapat menyebabkan duplikasi kode, pusingnya manajemen dependensi, dan perkakas yang tidak konsisten. Di sinilah arsitektur monorepo bersinar. Monorepo adalah satu repositori yang berisi banyak proyek, seringkali terkait, yang dibangun dan diverisikan bersama. Pendekatan ini menawarkan banyak keuntungan, tetapi mengelola monorepo secara efektif memerlukan alat khusus. Artikel ini membahas dua solusi populer: Lerna dan Nx.

Apa itu Monorepo?

Monorepo adalah repositori sistem kontrol versi yang menampung kode untuk banyak proyek. Proyek-proyek ini bisa saling terkait atau sepenuhnya independen. Kuncinya adalah mereka berbagi repositori yang sama. Perusahaan seperti Google, Facebook, Microsoft, dan Uber telah berhasil mengadopsi monorepo untuk mengelola basis kode mereka yang masif. Bayangkan Google menyimpan hampir semua kodenya, termasuk Android, Chrome, dan Gmail, dalam satu repositori tunggal.

Manfaat Monorepo

• Berbagi dan Penggunaan Ulang Kode: Mudah berbagi kode antar proyek tanpa alur kerja pengemasan dan publikasi yang rumit. Bayangkan sebuah pustaka sistem desain yang dapat diintegrasikan dengan mulus ke dalam beberapa aplikasi dalam repositori yang sama.
• Manajemen Dependensi yang Disederhanakan: Kelola dependensi di satu tempat, memastikan konsistensi di semua proyek. Memperbarui dependensi pustaka bersama secara otomatis memperbarui semua proyek yang bergantung padanya.
• Perubahan Atomik: Lakukan perubahan yang mencakup beberapa proyek dalam satu commit tunggal, memastikan konsistensi dan menyederhanakan pengujian. Misalnya, refactoring yang memengaruhi frontend dan backend dapat dilakukan secara atomik.
• Kolaborasi yang Ditingkatkan: Tim dapat dengan mudah berkolaborasi pada proyek yang berbeda dalam repositori yang sama, mendorong berbagi pengetahuan dan pengembangan lintas fungsi. Pengembang dapat dengan mudah menelusuri dan memahami kode di berbagai tim.
• Perkakas dan Praktik yang Konsisten: Terapkan standar pengkodean, aturan linting, dan proses build yang konsisten di semua proyek. Ini meningkatkan kualitas dan pemeliharaan kode.
• Refactoring yang Disederhanakan: Proyek refactoring skala besar disederhanakan karena semua kode terkait berada dalam repositori yang sama. Alat refactoring otomatis dapat digunakan di seluruh basis kode.

Tantangan Monorepo

• Ukuran Repositori: Monorepo bisa menjadi sangat besar, berpotensi memperlambat operasi kloning dan pengindeksan. Alat seperti git sparse-checkout dan partial clone dapat membantu mengatasi masalah ini.
• Waktu Build: Membangun seluruh monorepo bisa memakan waktu, terutama untuk proyek besar. Alat seperti Lerna dan Nx menawarkan proses build yang dioptimalkan untuk mengatasi ini.
• Kontrol Akses: Membatasi akses ke bagian-bagian tertentu dari monorepo bisa jadi rumit. Perencanaan dan implementasi mekanisme kontrol akses yang cermat diperlukan.
• Kompleksitas Perkakas: Menyiapkan dan mengelola monorepo memerlukan perkakas dan pengetahuan khusus. Kurva pembelajarannya bisa curam pada awalnya.

Lerna: Mengelola Proyek JavaScript dalam Monorepo

Lerna adalah alat populer untuk mengelola proyek JavaScript dalam monorepo. Ini mengoptimalkan alur kerja seputar pengelolaan repositori multi-paket dengan Git dan npm. Ini sangat cocok untuk proyek yang menggunakan npm atau Yarn untuk manajemen dependensi.

Fitur Utama Lerna

• Manajemen Versi: Lerna dapat secara otomatis membuat versi dan mempublikasikan paket berdasarkan perubahan yang dibuat sejak rilis terakhir. Ia menggunakan conventional commits untuk menentukan nomor versi berikutnya.
• Manajemen Dependensi: Lerna menangani dependensi antar-paket, memastikan bahwa paket-paket di dalam monorepo dapat saling bergantung. Ia menggunakan symlinking untuk membuat dependensi lokal.
• Eksekusi Tugas: Lerna dapat mengeksekusi perintah di beberapa paket secara paralel, mempercepat proses build dan pengujian. Ia mendukung menjalankan skrip yang didefinisikan dalam package.json.
• Deteksi Perubahan: Lerna dapat mendeteksi paket mana yang telah berubah sejak rilis terakhir, memungkinkan build dan deployment yang ditargetkan.

Contoh Penggunaan Lerna

Mari kita ilustrasikan penggunaan Lerna dengan contoh yang disederhanakan. Asumsikan kita memiliki monorepo dengan dua paket: `package-a` dan `package-b`. `package-b` bergantung pada `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Inisialisasi Lerna:

lerna init

Ini membuat lerna.json dan memperbarui package.json root. File lerna.json mengkonfigurasi perilaku Lerna.

2. Instal Dependensi:

npm install
# atau
yarn install

Ini menginstal dependensi untuk semua paket di monorepo, berdasarkan file package.json di setiap paket.

3. Jalankan Perintah di Seluruh Paket:

lerna run test

Ini mengeksekusi skrip `test` yang didefinisikan dalam file package.json dari semua paket yang memilikinya.

4. Publikasikan Paket:

lerna publish

Perintah ini menganalisis riwayat commit, menentukan paket mana yang telah berubah, menaikkan versinya berdasarkan conventional commits, dan mempublikasikannya ke npm (atau registri pilihan Anda).

Konfigurasi Lerna

File lerna.json adalah inti dari konfigurasi Lerna. Ini memungkinkan Anda untuk menyesuaikan perilaku Lerna, seperti:

• packages: Menentukan lokasi paket di dalam monorepo. Sering diatur ke `["packages/*"]`.
• version: Menentukan strategi versioning. Bisa `independent` (setiap paket memiliki versinya sendiri) atau versi tetap.
• command: Memungkinkan Anda untuk mengkonfigurasi opsi untuk perintah Lerna tertentu, seperti `publish` dan `run`.

Contoh lerna.json:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Sistem Build yang Cerdas, Cepat, dan Dapat Diperluas

Nx adalah sistem build yang kuat yang menyediakan fitur-fitur canggih untuk manajemen monorepo. Ini berfokus pada build inkremental, caching komputasi, dan orkestrasi tugas untuk secara signifikan meningkatkan waktu build dan produktivitas pengembang. Sementara Lerna terutama berfokus pada pengelolaan paket, Nx menyediakan pendekatan yang lebih komprehensif untuk mengelola seluruh alur kerja monorepo, termasuk pembuatan kode, linting, pengujian, dan deployment.

Fitur Utama Nx

• Build Inkremental: Nx menganalisis grafik dependensi proyek Anda dan hanya membangun kembali proyek yang telah berubah sejak build terakhir. Ini secara dramatis mengurangi waktu build.
• Caching Komputasi: Nx menyimpan hasil tugas, seperti build dan tes, sehingga dapat digunakan kembali jika input tidak berubah. Ini lebih mempercepat siklus pengembangan.
• Orkestrasi Tugas: Nx menyediakan sistem orkestrasi tugas yang kuat yang memungkinkan Anda mendefinisikan pipeline build yang kompleks dan mengeksekusinya secara efisien.
• Pembuatan Kode: Nx menyediakan alat pembuatan kode yang dapat membantu Anda dengan cepat membuat proyek, komponen, dan modul baru, mengikuti praktik terbaik dan standar yang konsisten.
• Ekosistem Plugin: Nx memiliki ekosistem plugin yang kaya yang mendukung berbagai teknologi dan kerangka kerja, seperti React, Angular, Node.js, NestJS, dan lainnya.
• Visualisasi Grafik Dependensi: Nx dapat memvisualisasikan grafik dependensi monorepo Anda, membantu Anda memahami hubungan antar proyek dan mengidentifikasi potensi masalah.
• Perintah Affected: Nx menyediakan perintah untuk menjalankan tugas hanya pada proyek yang terpengaruh oleh perubahan tertentu. Ini memungkinkan Anda memfokuskan upaya Anda pada area yang membutuhkan perhatian.

Contoh Penggunaan Nx

Mari kita ilustrasikan penggunaan Nx dengan contoh yang disederhanakan. Kita akan membuat monorepo dengan aplikasi React dan pustaka Node.js.

1. Instal Nx CLI Secara Global:

npm install -g create-nx-workspace

2. Buat Workspace Nx Baru:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Ini membuat workspace Nx baru dengan aplikasi React. Opsi `--preset=react` memberi tahu Nx untuk menginisialisasi workspace dengan konfigurasi spesifik React.

3. Hasilkan Pustaka:

nx generate @nrwl/node:library my-library

Ini menghasilkan pustaka Node.js baru bernama `my-library`. Nx secara otomatis mengkonfigurasi pustaka dan dependensinya.

4. Bangun Aplikasi:

nx build my-app

Ini membangun aplikasi React. Nx menganalisis grafik dependensi dan hanya membangun kembali file yang diperlukan.

5. Jalankan Tes:

nx test my-app

Ini menjalankan unit test untuk aplikasi React. Nx menyimpan hasil tes untuk mempercepat proses tes berikutnya.

6. Lihat Grafik Dependensi:

nx graph

Ini membuka antarmuka web yang memvisualisasikan grafik dependensi monorepo.

Konfigurasi Nx

Nx dikonfigurasi melalui file nx.json, yang terletak di root workspace. File ini mendefinisikan proyek-proyek di dalam workspace, dependensinya, dan tugas-tugas yang dapat dieksekusi padanya.

Opsi konfigurasi utama dalam nx.json meliputi:

• projects: Mendefinisikan proyek-proyek dalam workspace dan konfigurasinya, seperti direktori root dan target build mereka.
• tasksRunnerOptions: Mengkonfigurasi task runner, yang bertanggung jawab untuk mengeksekusi tugas dan menyimpan hasilnya.
• affected: Mengkonfigurasi bagaimana Nx menentukan proyek mana yang terpengaruh oleh perubahan.

Contoh nx.json:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: Mana yang Harus Dipilih?

Baik Lerna maupun Nx adalah alat yang sangat baik untuk mengelola monorepo frontend, tetapi mereka melayani kebutuhan yang sedikit berbeda. Berikut perbandingan untuk membantu Anda memilih yang tepat untuk proyek Anda:

Fitur	Lerna	Nx
Fokus	Manajemen Paket	Sistem Build dan Orkestrasi Tugas
Build Inkremental	Terbatas (memerlukan alat eksternal)	Bawaan dan sangat dioptimalkan
Caching Komputasi	Tidak	Ya
Pembuatan Kode	Tidak	Ya
Ekosistem Plugin	Terbatas	Luas
Kurva Pembelajaran	Lebih Rendah	Lebih Tinggi
Kompleksitas	Lebih Sederhana	Lebih Kompleks
Kasus Penggunaan	Proyek yang utamanya berfokus pada pengelolaan dan publikasi paket npm.	Proyek besar dan kompleks yang memerlukan waktu build yang dioptimalkan, pembuatan kode, dan sistem build yang komprehensif.

Pilih Lerna jika:

• Anda terutama perlu mengelola dan mempublikasikan paket npm.
• Proyek Anda relatif kecil hingga menengah.
• Anda lebih suka alat yang lebih sederhana dengan kurva pembelajaran yang lebih rendah.
• Anda sudah terbiasa dengan npm dan Yarn.

Pilih Nx jika:

• Anda membutuhkan waktu build yang dioptimalkan dan build inkremental.
• Anda menginginkan kemampuan pembuatan kode.
• Anda memerlukan sistem build yang komprehensif dengan orkestrasi tugas.
• Proyek Anda besar dan kompleks.
• Anda bersedia menginvestasikan waktu untuk mempelajari alat yang lebih kuat.

Bisakah Anda menggunakan Lerna dengan Nx?

Ya, Lerna dan Nx dapat digunakan bersama. Kombinasi ini memungkinkan Anda memanfaatkan kemampuan manajemen paket Lerna sambil mendapat manfaat dari sistem build dan orkestrasi tugas yang dioptimalkan dari Nx. Nx dapat dikonfigurasi sebagai task runner untuk Lerna, menyediakan build inkremental dan caching komputasi untuk paket yang dikelola Lerna.

Praktik Terbaik untuk Manajemen Monorepo Frontend

Terlepas dari apakah Anda memilih Lerna atau Nx, mengikuti praktik terbaik sangat penting untuk berhasil mengelola monorepo frontend:

• Buat Struktur Proyek yang Jelas: Atur proyek Anda secara logis dan konsisten. Gunakan konvensi penamaan yang jelas untuk paket dan pustaka.
• Terapkan Standar Pengkodean yang Konsisten: Gunakan linter dan formatter untuk memastikan gaya kode yang konsisten di semua proyek. Alat seperti ESLint dan Prettier dapat diintegrasikan ke dalam alur kerja Anda.
• Otomatiskan Proses Build dan Tes: Gunakan pipeline CI/CD untuk mengotomatiskan proses build, tes, dan deployment. Alat seperti Jenkins, CircleCI, dan GitHub Actions dapat digunakan.
• Terapkan Tinjauan Kode: Lakukan tinjauan kode yang teliti untuk memastikan kualitas dan pemeliharaan kode. Gunakan pull request dan alat tinjauan kode.
• Pantau Waktu dan Kinerja Build: Lacak waktu build dan metrik kinerja untuk mengidentifikasi hambatan dan area untuk perbaikan. Nx menyediakan alat untuk menganalisis kinerja build.
• Dokumentasikan Struktur dan Proses Monorepo Anda: Buat dokumentasi yang jelas yang menjelaskan struktur monorepo Anda, alat dan teknologi yang digunakan, serta alur kerja pengembangan.
• Adopsi Conventional Commits: Gunakan conventional commits untuk mengotomatiskan proses versioning dan rilis. Lerna mendukung conventional commits secara langsung.

Kesimpulan

Monorepo frontend menawarkan keuntungan signifikan untuk mengelola proyek besar dan kompleks, termasuk berbagi kode, manajemen dependensi yang disederhanakan, dan kolaborasi yang ditingkatkan. Lerna dan Nx adalah alat yang kuat yang dapat membantu Anda mengelola monorepo frontend secara efektif. Lerna adalah pilihan bagus untuk mengelola paket npm, sementara Nx menyediakan sistem build yang lebih komprehensif dengan fitur-fitur canggih seperti build inkremental dan pembuatan kode. Dengan mempertimbangkan kebutuhan proyek Anda secara cermat dan mengikuti praktik terbaik, Anda dapat berhasil mengadopsi monorepo frontend dan menuai manfaatnya.

Ingatlah untuk mempertimbangkan faktor-faktor seperti pengalaman tim Anda, kompleksitas proyek, dan persyaratan kinerja saat memilih antara Lerna dan Nx. Bereksperimenlah dengan kedua alat tersebut dan temukan yang paling sesuai dengan kebutuhan spesifik Anda.

Semoga berhasil dalam perjalanan monorepo Anda!