Mengatur Direktori Proyek Perangkat Lunak

Kemarin adalah hari terakhir saya untuk menyelesaikan Brave Frontier wiki, sebuah wikipedia yang menyediakan daftar omni units dan dual brave burst.

Saya membuat wiki ini karena saya memainkan game Brave Frontier masih sampai hari ini. Awal mula saya membuat wiki ini adalah untuk mendapatkan daftar rekomendasi SP (Speciality Points) dari omni unit.

Padahal kan bisa langsung buka website Brave Frontier Global Fandom?

Bisa, namun saya merasa tidak efektif. Sehingga saya memutuskan membuat wiki ini di akhir tahun 2019. Sekarang sudah ada fitur tambahan seperti mencari kemampuan spesial dari omni units dan dbb dengan menginputkan keywords.

Saya pikir itu adalah fitur terakhir yang saya buat dan saya memutuskan untuk menuntaskan proyek ini agar saya bisa belajar hal-hal yang lain.

Wiki ini menggunakan aplikasi web berbasis satu halaman (Single Page Application), sehingga eksekusinya bertumpu pada JavaScript.

Di file app.js mengeksekusi jalannya setiap halaman dan halaman tersebut dibuat dari berbagai komponen (components) dan perilaku (behaviours).

Sebelum mengakhiri proyek ini, saya melihat struktur direktori di dalam folder js yang saya buat berantakan.

  • ๐Ÿ“‚ js
    • ๐Ÿ“„ app.js
    • ๐Ÿ“‚ behaviours
      • ๐Ÿ“„ closeMenu.js
      • ๐Ÿ“‚ dbbs
        • ๐Ÿ“„ observeContent.js
        • ๐Ÿ“„ observeThumbnails.js
        • ๐Ÿ“„ search.js
      • ๐Ÿ“‚ omniunit
        • ๐Ÿ“„ share.js
      • ๐Ÿ“‚ omniunits
        • ๐Ÿ“„ observeContent.js
        • ๐Ÿ“„ observeThumbnails.js
        • ๐Ÿ“„ search.js
      • ๐Ÿ“„ openMenu.js
      • ๐Ÿ“„ setActiveMenu.js
      • ๐Ÿ“„ setOgMeta.js
      • ๐Ÿ“„ trackUrl.js
    • ๐Ÿ“‚ components
      • ๐Ÿ“„ Home.js
      • ๐Ÿ“‚ dbb
        • ๐Ÿ“„ Card.js
      • ๐Ÿ“‚ dbbs
        • ๐Ÿ“„ Content.js
        • ๐Ÿ“„ SearchForm.js
        • ๐Ÿ“„ Skeleton.js
      • ๐Ÿ“‚ omniunit
        • ๐Ÿ“„ Card.js
        • ๐Ÿ“„ Enhancements.js
        • ๐Ÿ“„ Profile.js
        • ๐Ÿ“„ SPRecommendation.js
      • ๐Ÿ“‚ omniunits
        • ๐Ÿ“„ Content.js
        • ๐Ÿ“„ SearchForm.js
        • ๐Ÿ“„ Skeleton.js
    • ๐Ÿ“‚ pages
      • ๐Ÿ“„ dbbs.js
      • ๐Ÿ“„ home.js
      • ๐Ÿ“„ notfound.js
      • ๐Ÿ“„ omniunit.js
      • ๐Ÿ“„ omniunits.js
    • ๐Ÿ“‚ utils
      • ๐Ÿ“„ keywords.js
      • ๐Ÿ“„ request.js

Apa yang berantakan?

Pertama, tidak perlu ada folder pages dan setiap halaman diwakilkan dalam bentuk folder. Misalnya home.js menjadi folder home yang di dalamnya ada file index.js dan seterusnya.

Kedua, tidak perlu ada folder behaviours. Saya selama ini berpikir bahwa User Interface (UI) dan perilaku dari User Interface tersebut harus dipisah. UI diwakili dengan folder components dan perilaku UI diwakili dengan folder behaviours.

Akhir-akhir ini saya berpikir bahwa hal tersebut tidak efektif dan saya merasa kesulitan untuk melakukan pemeliharaan dengan pemikiran di atas.

Jika melihat ke konsep React, Component adalah sebuah class atau function bisa menjadi user interface dan perilaku dari user interface.

Alhasil yang saya lakukan adalah:

  1. Memindahkan seluruh fungsi perilaku user interface yang ada di dalam folder behaviours ke folder components.
  2. Menghapus folder behaviours.
  3. Memindahkan folder components ke folder setiap halaman. Misalnya komponen home dipindahkan ke folder home dan seterusnya.

Sehingga, hasil struktur direktori di dalam folder js saya menjadi seperti ini.

  • ๐Ÿ“‚ js
    • ๐Ÿ“„ app.js
    • ๐Ÿ“‚ dbbs
      • ๐Ÿ“‚ components
        • ๐Ÿ“„ Card.js
        • ๐Ÿ“„ Content.js
        • ๐Ÿ“„ Search.js
        • ๐Ÿ“„ Skeleton.js
      • ๐Ÿ“„ index.js
    • ๐Ÿ“‚ home
      • ๐Ÿ“‚ components
        • ๐Ÿ“„ Home.js
      • ๐Ÿ“„ index.js
    • ๐Ÿ“„ notfound.js
    • ๐Ÿ“‚ omniunit
      • ๐Ÿ“‚ components
        • ๐Ÿ“„ Enhancements.js
        • ๐Ÿ“„ Profile.js
        • ๐Ÿ“„ SPRecommendation.js
        • ๐Ÿ“„ Share.js
      • ๐Ÿ“„ index.js
    • ๐Ÿ“‚ omniunits
      • ๐Ÿ“‚ components
        • ๐Ÿ“„ Card.js
        • ๐Ÿ“„ Content.js
        • ๐Ÿ“„ Search.js
        • ๐Ÿ“„ Skeleton.js
      • ๐Ÿ“„ index.js
    • ๐Ÿ“‚ utils
      • ๐Ÿ“„ closeMenu.js
      • ๐Ÿ“„ keywords.js
      • ๐Ÿ“„ openMenu.js
      • ๐Ÿ“„ request.js
      • ๐Ÿ“„ setActiveMenu.js
      • ๐Ÿ“„ setOgMeta.js
      • ๐Ÿ“„ trackUrl.js

Saya merasa puas dengan yang saya lakukan. Mungkin bagi kalian terlihat remeh namun mengorganisir direktori proyek perangkat lunak itu sama seperti mengorganisir pikiran yang ada dalam diri sendiri.

Saya berterima kasih kepada michalbe telah menyediakan pustaka md-file-tree untuk menghasilkan direktori dan file dalam bentuk markdown. ๐Ÿ™

Tiba-tiba saya jadi ingat dengan materi Rich Harris tentang Rethinking Reactivity.

Frameworks are not tools for organising your code, they are tools for organising your mind.

Semacam AHA momen buat saya. ๐Ÿ’ก

Silakan tonton dari menit ke 6 dan 40 detik.

Jika konten ini bermanfaat, silakan: