Tujuan Pembelajaran

Memahami design patterns umum di web development
Bisa mengimplementasikan MVC dan Observer

Analogi

Diagram


      Design Patterns = Resep Masakan:

MVC = Tim Restoran (Model-View-Controller)
Singleton = Satu Chef Khusus (1 instance)
Observer = Newsletter (subscribe → notifikasi)
Factory = Pabrik (bikin object sesuai pesanan)

Design patterns seperti resep masakan — solusi teruji untuk masalah umum

Penjelasan Konsep

Design Patterns

Design Patterns adalah solusi teruji untuk masalah umum dalam software design. Mereka seperti resep masakan — tidak perlu reinvent dari nol.

MVC (Model-View-Controller)

Pisahkan aplikasi menjadi 3 bagian:

Model = Data dan logic (dapur).
View = Tampilan (piring saji).
Controller = Penghubung (pelayan).

Singleton

Pola yang memastikan sebuah class hanya punya 1 instance. Contoh: Database connection, logger.

Observer

Pola publish-subscribe. Object (subject) memberi notifikasi ke banyak listener (observers). Contoh: Event emitter, newsletter.

Factory

Pola untuk membuat object tanpa menentukan class exact. Contoh: Membuat berbagai jenis button.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami design patterns umum di web development., dan bisa mengimplementasikan MVC dan Observer. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Design Patterns, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Design patterns seperti resep masakan — solusi teruji untuk masalah umum. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 1-21: MVC pattern lengkap. Baris 23-31: Singleton. Baris 33-42: Observer/EventEmitter.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

// MVC PATTERN
class TodoModel {
  constructor() { this.todos = []; }
  add(todo) { this.todos.push(todo); }
  getAll() { return this.todos; }
}

class TodoView {
  render(todos) {
    return todos.map(t => `<li>${t}</li>`).join('');
  }
}

class TodoController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  addTodo(text) {
    this.model.add(text);
    return this.view.render(this.model.getAll());
  }
}

// SINGLETON
class Database {
  static instance = null;
  static getInstance() {
    if (!Database.instance) {
      Database.instance = new Database();
    }
    return Database.instance;
  }
}

// OBSERVER
class EventEmitter {
  constructor() { this.listeners = {}; }
  on(event, callback) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event].push(callback);
  }
  emit(event, data) {
    (this.listeners[event] || []).forEach(cb => cb(data));
  }
}

Penjelasan Kode

Baris 1-21: MVC pattern lengkap. Baris 23-31: Singleton. Baris 33-42: Observer/EventEmitter.

Prompt AI

Jelaskan kapan menggunakan MVC vs MVVM.

Pertanyaan Reflektif

Identifikasi design pattern di codebase-mu. Ada berapa yang kamu temukan?