81 Pengenalan Integrasi Frontend (React, Vue, Svelte)

81 Pengenalan Integrasi Frontend: React, Vue, dan Svelte

Oleh: Engineer yang suka mencoba framework baru

Frontend development selama satu dekade terakhir berkembang sangat pesat. Jika dulu jagoan kita adalah jQuery, sekarang ada ratusan framework yang menawarkan berbagai pendekatan membangun UI secara reaktif dan efisien. Di antara yang paling populer adalah React, Vue, dan Svelte. Namun, bagi engineer, sekadar bisa “menggunakan” saja tidak cukup–memahami cara integrasi, perbandingan arsitektur, serta bagaimana agility dan simplicity mereka, itu seni tersendiri.

Di artikel ini, saya akan membahas pengenalan integrasi tiga framework modern tersebut; kita akan eksplorasi filosofi, cara kerja, kode contoh, simulasi integrasi, serta membandingkan kelebihan dan kekurangannya. Juga, akan saya tambahkan diagram alur menggunakan syntax Mermaid.

Mengapa Butuh Modern Framework?

Sebelum masuk ke teknis, kita perlu paham alasannya dulu. Website sekarang menuntut interactive, component-based, serta real-time update tanpa reload. Vanilla JS atau jQuery akan cepat sekali terasa ribet kalau harus mengelola banyak state dan DOM berantai. Solusinya: declarative UI.

Tiga framework yang akan kita bahas sudah terbukti produksi dan dipakai skala enterprise:

Filosofi Dasar: React, Vue, Svelte

• React: “Just JavaScript”. Berbasis pada virtual DOM dan deklaratif. Mengatur UI layaknya fungsi dari state.
• Vue: Progressive framework. Sangat fleksibel, sintaks template familiar bagi pengguna HTML.
• Svelte: Compiler, bukan framework runtime. Menghilangkan virtual DOM, generate kode JS yang sangat ringan dan performant.

Diagram Konsep

MERMAID

+ − { source }

graph LR
    State -->|Trigger| UI[Update UI]
    UI ---> UserInput[User Action]
    UserInput --> State
    note right of State: Proses ini terjadi di
semua framework modern
(React, Vue, Svelte)

graph LR
    State -->|Trigger| UI[Update UI]
    UI ---> UserInput[User Action]
    UserInput --> State
    note right of State: Proses ini terjadi di<br>semua framework modern<br>(React, Vue, Svelte)

Oke, Langsung ke Contoh Kode

1. Counter Component: Perbandingan React, Vue, Svelte

React (Functional Component, Hooks)

 1import { useState } from 'react';
 2
 3function Counter() {
 4  const [count, setCount] = useState(0);
 5
 6  return (
 7    <div>
 8      <p>React Counter: {count}</p>
 9      <button onClick={() => setCount(count + 1)}>Tambah</button>
10    </div>
11  );
12}

Vue (Single File Component)

 1<template>
 2  <div>
 3    <p>Vue Counter: {{ count }}</p>
 4    <button @click="count++">Tambah</button>
 5  </div>
 6</template>
 7<script setup>
 8import { ref } from 'vue'
 9const count = ref(0)
10</script>

Svelte

1<script>
2  let count = 0;
3</script>
4
5<p>Svelte Counter: {count}</p>
6<button on:click={() => count++}>Tambah</button>

Lihat kan kemiripannya? Tapi perhatikan, di Svelte, state langsung variabel biasa!

Integrasi Dengan Backend (Simulasi Fetch Data)

Pada dunia nyata, frontend pasti berhubungan dengan backend lewat HTTP API. Berikut simulasi fetch data user dari API.

React

 1import { useEffect, useState } from 'react';
 2
 3function Users() {
 4  const [users, setUsers] = useState([]);
 5  useEffect(() => {
 6    fetch('/api/users')
 7      .then(res => res.json())
 8      .then(setUsers)
 9  }, []);
10  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
11}

Vue

 1<template>
 2  <ul>
 3    <li v-for="u in users" :key="u.id">{{ u.name }}</li>
 4  </ul>
 5</template>
 6<script setup>
 7import { ref, onMounted } from 'vue'
 8const users = ref([])
 9onMounted(async () => {
10  const res = await fetch('/api/users')
11  users.value = await res.json()
12})
13</script>

Svelte

 1<script>
 2  let users = [];
 3  onMount(async () => {
 4    const res = await fetch('/api/users');
 5    users = await res.json();
 6  });
 7  import { onMount } from 'svelte';
 8</script>
 9
10<ul>
11  {#each users as user}
12    <li>{user.name}</li>
13  {/each}
14</ul>

Kapan Integrasi Bermasalah?

Sekarang bayangkan aplikasi lama sudah pakai React, lalu ingin ada modul baru dengan Vue atau Svelte. Apa bisa satu halaman beda framework? Jawabnya: agak repot, tapi Possible via micro-frontend (menggunakan iframe, Custom Element, atau Webpack module federation).

Diagram Alur Integrasi Multi-Framework:

flowchart TD
    A[Parent App (React)] -->|Expose| B[Micro frontend: Vue component]
    A -->|Expose| C[Micro frontend: Svelte component]
    B & C --> D(User Interaction)
    D -->|Propagate| A
    note right of D: Semuanya bisa saling komunikasi via
Custom Event, API Bridge, dsb

flowchart TD
    A[Parent App (React)] -->|Expose| B[Micro frontend: Vue component]
    A -->|Expose| C[Micro frontend: Svelte component]
    B & C --> D(User Interaction)
    D -->|Propagate| A
    note right of D: Semuanya bisa saling komunikasi via<br>Custom Event, API Bridge, dsb

Perbandingan Integrasi dan Learning Curve

• React sangat modular, mudah dicangkok ke codebase lama (misal inisialisasi ReactDOM.render di mana saja).
• Vue juga mudah di-embed berkat API yang mirip HTML.
• Svelte bahkan bisa dikompilasi jadi Custom Element (web component) dan di-embed di halaman apapun.

Studi Kasus Integrasi Sederhana (React + Svelte dengan Web Components)

Jika aplikasi utama React, tapi ingin pakai komponen Svelte untuk fitur baru (say, rating bintang):

Di Svelte, compile jadi Custom Element:

 1<!-- StarRating.svelte -->
 2<script>
 3  export let value = 0;
 4</script>
 5<style>
 6  .star { cursor: pointer; color: gold;}
 7</style>
 8<span on:click={() => value = (value + 1) % 6} class="star">
 9  {'★'.repeat(value)}{'☆'.repeat(5-value)}
10</span>
11<svelte:options tag="star-rating" customElement={true} />

1npx svelte compile StarRating.svelte --customElement

Muncul file JS (misal, StarRating.js), lalu di React:

 1import "./StarRating.js"; // hasil kompilasi Svelte
 2
 3function Feedback() {
 4  return (
 5    <div>
 6      <h2>Berikan Rating:</h2>
 7      <star-rating value={3}></star-rating>
 8    </div>
 9  );
10}

Kesimpulan & Saran Engineer

• React sangat mature, cocok aplikasi besar/modular.
• Vue pilihan mantap bagi yang ingin konvensi rapih dan belajar singkat.
• Svelte unggul dalam kecepatan produksi kode, performa, dan integrasi (jadi web component).

Pilih sesuai kebutuhan bisnis dan skill tim. Semua bisa diintegrasi ke sistem lama, bahkan bercampur. Kuncinya: paham entry point, mounting, dan composability.

Belajar satu, jangan takut eksplorasi yang lain. Karena pada akhirnya, engineer dipandang bukan dari tools yang dipilih, namun solusi yang dihasilkan.

Jangan lupa, framework itu cuma alat. Pemahaman prinsip state, composition, communication antar komponen jelas lebih penting. Selamat bereksperimen!

Tulisan ini bagian dari seri “81 Days of Modern Frontend”, jangan lupa share & follow untuk insight berikutnya!