Reactive Programming dan Event-Driven Architecture di JavaScript

Pendahuluan

Seiring berkembangnya kebutuhan aplikasi modern yang interaktif dan real-time, paradigma pemrograman tradisional berbasis urutan (imperatif) mulai terasa kurang efisien. JavaScript, sebagai bahasa yang sangat fleksibel di sisi frontend maupun backend, kini mendukung pendekatan baru yang lebih reaktif dan berbasis event, dikenal dengan Reactive Programming di JavaScript dan Event-Driven Architecture.

Konsep ini memungkinkan aplikasi untuk “bereaksi” secara otomatis terhadap perubahan data, input pengguna, atau event sistem. Dengan pendekatan ini, developer tidak perlu lagi menulis kode untuk “mengecek” perubahan secara manual. Sebaliknya, aplikasi akan merespons perubahan begitu terjadi menjadikannya lebih efisien, responsif, dan cocok untuk aplikasi modern seperti dashboard, notifikasi real-time, atau sistem streaming data.

Apa Itu Reactive Programming di JavaScript?

Reactive Programming adalah paradigma pemrograman yang berfokus pada data streams (aliran data) dan propagation of change (penyebaran perubahan). Artinya, ketika ada perubahan pada sumber data, semua bagian kode yang terhubung akan otomatis diperbarui.

Misalnya, saat pengguna mengetik di input form, nilai yang diketik langsung memperbarui tampilan lain yang terhubung — tanpa perlu memanggil fungsi tambahan.

Contoh sederhana:

const input = document.getElementById("name");
const display = document.getElementById("output");

input.addEventListener("input", () => {
  display.textContent = `Halo, ${input.value}`;
});

Pada contoh di atas, setiap kali pengguna mengetik, tampilan langsung berubah. Ini adalah bentuk paling dasar dari konsep reactivity.

Event-Driven Architecture (EDA)

Event-Driven Architecture adalah pendekatan di mana sistem dibangun berdasarkan event — yaitu aksi atau peristiwa yang terjadi di dalam aplikasi.
Misalnya: klik tombol, data masuk dari API, atau perubahan status koneksi.

Dalam EDA, setiap event akan memicu handler atau listener yang menjalankan logika tertentu.

Contoh sederhana EDA di JavaScript:

document.addEventListener("userLogin", (e) => {
  console.log(`User ${e.detail.username} telah login`);
});

const loginEvent = new CustomEvent("userLogin", {
  detail: { username: "arvian" },
});

document.dispatchEvent(loginEvent);

Di sini, event kustom userLogin dipicu (dispatch), lalu listener bereaksi terhadapnya, ini inti dari event-driven programming.

Reactive Programming dengan RxJS

Untuk aplikasi skala besar, manual event listener bisa sulit diatur. Di sinilah library seperti RxJS (Reactive Extensions for JavaScript) berperan penting.

RxJS memungkinkan kamu membuat data streams yang bisa di-subscribe, filter, dan transform dengan mudah.

Contoh penggunaan RxJS:

import { fromEvent } from "rxjs";
import { map, debounceTime } from "rxjs/operators";

const input = document.getElementById("search");

fromEvent(input, "input")
  .pipe(
    debounceTime(300),
    map(event => event.target.value)
  )
  .subscribe(value => {
    console.log("Mencari:", value);
  });

Pada contoh ini, setiap input pengguna akan dikirim sebagai stream, dan dengan debounceTime(300) kita menunda reaksi selama 300ms — sangat berguna untuk fitur pencarian real-time agar tidak terlalu sering memanggil API.

Menggabungkan Reactive Programming dan EDA

Kombinasi Reactive Programming + Event-Driven Architecture memungkinkan developer membangun aplikasi yang sangat responsif dan efisien.

Misalnya, sistem notifikasi real-time:

• Ketika server mengirim event newMessage, listener di sisi frontend menangkap event tersebut.

• Reactive stream memperbarui daftar pesan tanpa reload halaman.

Contoh Konsep:

document.addEventListener("newMessage", (e) => {
  addMessageToUI(e.detail.message);
});

function simulateIncomingMessage(msg) {
  const event = new CustomEvent("newMessage", { detail: { message: msg } });
  document.dispatchEvent(event);
}

function addMessageToUI(msg) {
  const list = document.getElementById("messages");
  const item = document.createElement("li");
  item.textContent = msg;
  list.appendChild(item);
}

// Simulasi pesan masuk setiap 2 detik
setInterval(() => {
  simulateIncomingMessage("Pesan baru diterima!");
}, 2000);

Kode di atas memperlihatkan bagaimana event newMessage diproses secara otomatis, dan UI diperbarui secara reaktif.

Penerapan di Dunia Nyata

Reactive Programming dan EDA banyak digunakan dalam:

• Chat App / Notifikasi Real-Time
  Event seperti “pesan baru” langsung memperbarui UI.

• Sistem IoT atau Dashboard Monitoring
  Setiap perubahan data sensor ditampilkan langsung.

• Aplikasi Keuangan atau e-Commerce
  Harga, stok, atau status order diperbarui secara instan tanpa reload.

Dengan pendekatan ini, aplikasi menjadi lebih responsif, ringan, dan user-friendly.

Kesimpulan

Menerapkan Reactive Programming di JavaScript dan Event-Driven Architecture adalah langkah penting menuju aplikasi modern yang real-time dan efisien.
Keduanya memungkinkan sistem merespons perubahan data dengan cepat tanpa perlu kontrol manual yang kompleks. Dengan bantuan library seperti RxJS, konsep ini dapat diterapkan dengan mudah bahkan untuk proyek besar.

Jika kamu ingin mengembangkan aplikasi interaktif seperti dashboard, chat system, atau notifikasi langsung, memahami paradigma ini akan menjadi modal besar untuk meningkatkan kualitas dan performa aplikasi JavaScript-mu.