Refactoring Project pada Web App

Istilah “refactoring project” merujuk pada proyek yang fokus utamanya adalah melakukan refactoring terhadap kode atau sistem yang sudah ada — bukan menambah fitur baru atau membangun ulang dari nol.

Mari kita uraikan maknanya dengan sederhana dan lengkap 

Apa Itu Refactoring?

Refactoring adalah proses memperbaiki struktur internal kode tanpa mengubah perilaku eksternalnya.
Tujuannya: membuat kode lebih bersih, mudah dipahami, dan mudah dirawat, tanpa mengubah fungsi yang terlihat oleh pengguna.

Contoh sederhana:

# Sebelum refactoring
def calc(x, y, z):
    return x*y + x*y*z - x

# Sesudah refactoring
def calculate_total(price, qty, discount):
    subtotal = price * qty
    total = subtotal + subtotal * discount - price
    return total

Hasilnya tetap sama, tapi struktur dan nama variabel lebih jelas.

Apa Itu Refactoring Project?

Sebuah refactoring project berarti proyek yang didedikasikan untuk:

• memperbaiki struktur kode lama (legacy code),
• menurunkan kompleksitas sistem,
• meningkatkan performa, keamanan, dan maintainability,
• dan sering kali dilakukan sebelum menambah fitur besar baru.

Contoh konteks:

Sebuah tim dev punya aplikasi yang sudah 5 tahun berjalan. Sebelum menambahkan fitur AI, mereka memutuskan untuk menjalankan refactoring project selama 2 bulan agar kode dasar lebih bersih dan stabil.

Tujuan Refactoring Project

1. Meningkatkan keterbacaan kode
   → agar developer baru mudah memahami.
2. Mengurangi duplikasi dan kompleksitas
   → kode yang berulang disatukan jadi satu fungsi.
3. Memperbaiki arsitektur dan dependensi
   → misalnya memisahkan business logic dari UI layer.
4. Meningkatkan kinerja dan keamanan
   → menghapus fungsi tidak efisien, memperbaiki query, dsb.
5. Menurunkan risiko bug di masa depan
   → karena struktur lebih bersih dan modular.

Risiko dan Tantangan

• Membutuhkan waktu dan sumber daya (tanpa hasil “terlihat” oleh pengguna).
• Risiko munculnya bug jika tidak disertai unit testing dan CI/CD.
• Bisa menunda pengembangan fitur baru sementara waktu.

Ringkasnya

Aspek	Penjelasan
Tujuan	Menata ulang struktur kode tanpa mengubah fungsi
Hasil	Kode lebih bersih, efisien, dan mudah dikembangkan
Waktu Tepat	Sebelum ekspansi fitur besar atau saat kode mulai sulit dirawat
Contoh Aktivitas	Rename variabel, pecah fungsi besar jadi kecil, migrasi arsitektur, hapus duplikasi

Berikut ini contoh nyata refactoring project pada web app, supaya kamu bisa membayangkan bentuk konkretnya di dunia kerja developer.

Kasus Nyata: Refactoring Project Web App

Kondisi Awal

Sebuah tim punya aplikasi web lama, misalnya:

• Dibangun 5 tahun lalu dengan PHP monolitik atau Node.js tanpa struktur yang jelas,
• Banyak inline SQL query, duplikasi kode, dan tidak ada unit testing,
• Performa mulai lambat, dan fitur baru sering bikin bug lama muncul lagi.

Tim ingin menambahkan fitur user analytics dashboard, tapi mereka sadar:

“Kalau langsung nambah fitur, sistem ini bisa makin berantakan.”

Jadi, mereka memutuskan untuk menjalankan Refactoring Project selama 1–2 bulan.

Tahapan Refactoring Project Web App

1. Audit & Identifikasi Masalah

Langkah pertama: tim menganalisis struktur kode saat ini.

Mereka mendapati:

• File app.js berisi 4.000 baris kode bercampur antara routing, logic, dan query.
• Tidak ada error handling yang konsisten.
• Tidak ada testing dan dokumentasi API.
• Banyak kode duplikat seperti:

  db.query("SELECT * FROM users WHERE id = ?", [id])
  

  tersebar di banyak file.

2. Menetapkan Tujuan Refactoring

Tujuan yang disepakati:

• Pisahkan business logic dari routing.
• Terapkan arsitektur MVC (Model-View-Controller).
• Gunakan ORM (mis. Prisma atau Sequelize) untuk mengganti query mentah.
• Tambahkan unit test dengan Jest.
• Terapkan error handling middleware yang seragam.

3. Restrukturisasi Kode

Langkah-langkah teknis:

Sebelum refactoring:

/app.js
/routes.js
/database.js

Sesudah refactoring:

/src
  /controllers
  /models
  /routes
  /middlewares
  /services
/tests

Kode seperti ini:

// sebelum
app.get("/users/:id", (req, res) => {
  db.query("SELECT * FROM users WHERE id = ?", [req.params.id], (err, result) => {
    if (err) throw err;
    res.json(result);
  });
});

Menjadi:

// sesudah
router.get("/:id", userController.getUserById);

// controllers/userController.js
export const getUserById = async (req, res, next) => {
  try {
    const user = await userService.findById(req.params.id);
    res.json(user);
  } catch (err) {
    next(err);
  }
};

4. Menambahkan Testing dan CI/CD

• Tambah unit test untuk fungsi penting.
• Tambah GitHub Actions atau GitLab CI untuk otomatisasi testing tiap kali commit.
• Pastikan semua endpoint utama lulus uji.

5. Optimasi & Dokumentasi

• Gunakan Swagger/OpenAPI untuk dokumentasi endpoint.
• Tambahkan caching (misalnya Redis) di bagian tertentu.
• Optimalkan query lambat.
• Dokumentasikan arsitektur baru di README.md.

6. Deployment Bertahap

Refactoring besar tidak langsung di-merge ke production. Biasanya:

1. Deploy ke staging server.
2. Jalankan regression testing (pastikan fungsi lama masih jalan).
3. Setelah stabil, baru merge ke production.

Hasil Setelah Refactoring

Sebelum	Sesudah
Kode campur aduk, sulit dipahami	Struktur modular dan rapi (MVC)
Duplikasi kode banyak	Reusable service functions
Sulit debugging	Logging dan error handling rapi
Tidak ada test	Ada unit & integration test
Deployment manual	CI/CD otomatis

Nilai Tambah Bisnis

Walau refactoring tidak menambah fitur baru, dampaknya besar:

• Waktu pengembangan fitur berikutnya berkurang hingga 40–60%.
• Bug berulang hampir hilang.
• Performa dan keamanan meningkat.
• Developer baru bisa langsung produktif karena kode jelas.