Madge merupakan Aplikasi pengembang yang menghasilkan Grafik Visual mengenai struktur sebuah aplikasi, modul-modul yang digunakan (dependencies Modul), & Lingkaran Dependensi atau “Keterkaitan” satu atau lebih penggunaan sebuah modul (Circular Dependency).

Circular dependency - Wikipedia

Sebelumnya, saya sedang mempelajari Lighthouse, tepatnya Arsitektur dari Lighthouse kemudian mendapatkan sebuah informasi menarik “yah , tentang Madge ini” dari **** tautan ini.

GoogleChrome/lighthouse

Pada tautan tersebut saya menemukan gambar atau visual grafik dari arsitektur lighthouse.

image

Lighthouse Architecture: Read More -https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md

Kemudian, menemukan perintah (command) yang digunakan lighthouse untuk menghasilkan grafik visual diatas yakni $ madge lighthouse-core/index.js --image arch.png --layout dot --backgroundColor "#fafafa" --nodeColor "#4d4afc" --noDependencyColor "#48ad00"# madge <directory>or<file> [options]

  • madge : bin file dari madge jika sudah di install
  • lighthouse-core/index.js : file index.js dari lighthouse didalam folder lighthouse-core
  • image : opsi untuk nama file gambar “output” setelah madge dijalankan
  • layout : opsi untuk mengatur layout dari “output”
  • untuk opsi lainnya bisa dilihat disini.

setelah menjalankan perintah seperti gambar diatas, silahkan buka “directory” atau “folder” tepat dimana kamu menjalankan perintah tersebut. > Catatan: Madge membutuhkan sebuah dependensi juga, yakni graphvis (required) dan menggunakan node-dependency-tree **** (tak perlu install karena sudah jadi bagian utama dari madge) Graphviz - Graph Visualization Software

Jadi, harus menginstall graphvis agar madge dapat berjalan.

contoh instalasi dan penggunaan: // Install graphvis using brew for mac user $ **brew install -v graphviz**// Install graphvis using apt-port for ubuntu $ **sudo apt-get install graphviz**// Install madge using yarn $ **yarn global add madge**// goto project directory $ **cd your_project**// generate app architecture using madge $ **madge index.js --image your_project_arc.png**

Contoh hasil generate pada project Simple Todo yang saya buat menggunakan ReactJs (create-react-app)

image

MedicineTodo — https://github.com/ri7nz/medicine

Kesimpulan

Dengan menggunakan Madge atau tepatnya dengan mendapatkan informasi mengenai rancangan, arsitektur, dan dependesi yang digunakan pada sebuah project atau aplikasi kita dapat jadi lebih mudah untuk meningkatkan kualitas atau performa, Contohnya pada pengembangan web jaman now yang memiliki bundle file yang harus dijaga, dengan mengetahui apa yg tidak digunakan maka kita dapat menghapus atau tidak menggunakannya, serta untuk kebutuhan analisa.

Sekian, dan terima kasih semoga bermanfaat. 😀 (Mohon maaf jika ada yang salah).

R AdySurya A

Follow Me On