81 Introduction to Frontend Integration: React, Vue, and Svelte

By: An engineer who loves trying out new frameworks

Frontend development has evolved at a breakneck pace over the past decade. While our hero used to be jQuery, today there are hundreds of frameworks offering all sorts of approaches to building UIs reactively and efficiently. Among the most popular are React, Vue, and Svelte. For an engineer, however, simply being able to “use” them isn’t enough—understanding how to integrate them, comparing their architectures, and grasping their agility and simplicity is an art in itself.

In this article, I’ll cover an introduction to integrating these three modern frameworks; we’ll explore their philosophies, how they work, code examples, integration simulations, and compare their strengths and weaknesses. I’ll also throw in some flow diagrams using Mermaid syntax.

Why Do We Need a Modern Framework?

Before we get into the technical details, we need to understand the reasoning first. Today’s websites demand to be interactive, component-based, and capable of real-time updates without reloading. Vanilla JS or jQuery quickly becomes a hassle when you have to manage lots of state and chained DOM manipulation. The solution: declarative UI.

The three frameworks we’ll discuss are all production-proven and used at enterprise scale:

Core Philosophy: React, Vue, Svelte

• React: “Just JavaScript”. Built around the virtual DOM and a declarative approach. It treats the UI as a function of state.
• Vue: A progressive framework. Highly flexible, with a template syntax familiar to anyone who knows HTML.
• Svelte: A compiler, not a runtime framework. It eliminates the virtual DOM, generating extremely lightweight and performant JS code.

Concept Diagram

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)

Alright, Straight to the Code Examples

1. Counter Component: Comparing 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>

See the similarities? But notice that in Svelte, state is just a plain variable!

Integration With the Backend (Data Fetching Simulation)

In the real world, the frontend always communicates with the backend through an HTTP API. Here’s a simulation of fetching user data from an 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>

When Does Integration Become a Problem?

Now imagine a legacy app that already uses React, and you want to add a new module built with Vue or Svelte. Can a single page mix different frameworks? The answer: it’s a bit of a hassle, but possible via micro-frontends (using iframes, Custom Elements, or Webpack module federation).

Multi-Framework Integration Flow Diagram:

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

Comparing Integration and Learning Curve

• React is highly modular, easy to graft onto a legacy codebase (for example, calling ReactDOM.render anywhere).
• Vue is also easy to embed thanks to its HTML-like API.
• Svelte can even be compiled into a Custom Element (web component) and embedded into any page.

A Simple Integration Case Study (React + Svelte with Web Components)

If your main app is React, but you want to use a Svelte component for a new feature (say, a star rating):

In Svelte, compile it into a 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

A JS file appears (for example, StarRating.js), then in React:

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

Conclusion & Engineer’s Advice

• React is very mature and a great fit for large/modular applications.
• Vue is a solid choice for those who want tidy conventions and a short learning curve.
• Svelte excels in code production speed, performance, and integration (compiling down to a web component).

Choose according to your business needs and your team’s skills. All of them can be integrated into legacy systems, and even mixed together. The key: understand the entry point, mounting, and composability.

Learn one, but don’t be afraid to explore the others. Because in the end, an engineer is judged not by the tools they pick, but by the solutions they deliver.

Don’t forget, a framework is just a tool. Understanding the principles of state, composition, and inter-component communication is clearly more important. Happy experimenting!

This post is part of the “81 Days of Modern Frontend” series—don’t forget to share & follow for more insights to come!