Svelte vs SvelteKit 2025: Framework JavaScript yang Underrated Banget (Seriously, Kenapa Masih Sepi?)

Kenalan sama Svelte dan SvelteKit yang katanya 'framework masa depan' tapi masih sepi peminat. Gue bahas kenapa lo harus consider framework yang satu ini di 2025.

7 Januari 2025 • 15 menit baca • Oleh Hilal Technologic

#svelte #sveltekit #javascript framework #web development #frontend #react alternative #vue alternative

🚀 Svelte vs SvelteKit 2025: Framework JavaScript yang Underrated Banget (Seriously, Kenapa Masih Sepi?)

Lo tau gak sih, ada framework JavaScript yang udah ada dari 2016, performanya ngalahin React dan Vue, bundle size-nya kecil banget, tapi masih aja sepi peminat? Yep, gue lagi ngomong tentang Svelte.

Gue pertama kali denger Svelte itu pas lagi scrolling Twitter (eh, X maksudnya), terus ada developer yang bilang “Svelte is the future of frontend development!” Gue mikir, “Ah, ini pasti hype doang kayak framework-framework lain yang muncul tiap bulan.”

Ternyata… gue salah besar. 😅

“Svelte is not a framework. It’s a compile-time tool that generates vanilla JavaScript.” - Rich Harris (Creator of Svelte)

Dan quote itu yang bikin gue penasaran banget. Framework yang bukan framework? Compile-time tool? What sorcery is this?

🤔 Jadi Sebenernya Svelte Itu Apa Sih?

Bayangin lo lagi masak mie instan. Biasanya kan lo:

Rebus air
Masukin mie
Tunggu 3 menit
Tambahin bumbu
Aduk-aduk
Makan

Nah, kalau React/Vue itu kayak lo masak mie instan tapi sambil bawa kompor portable kemana-mana. Jadi setiap kali mau makan, lo harus bawa kompor, gas, panci, dll. Ribet kan?

Svelte itu beda. Dia kayak lo udah masak mie instan di rumah, terus tinggal bawa tupperware berisi mie yang udah jadi. Gak perlu bawa kompor, gak perlu masak lagi. Tinggal makan.

Perbedaan Fundamental

// React - Runtime Framework
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

// Svelte - Compile-time Magic
<script>
  let count = 0;
</script>

<div>
  <p>Count: {count}</p>
  <button on:click={() => count++}>
    Increment
  </button>
</div>

Liat tuh! Svelte lebih simpel, gak ada useState, gak ada onClick yang aneh. Cuma let count = 0 dan count++. Sesimpel itu.

Kenapa Bisa Lebih Kecil?

# Bundle size comparison (gzipped)
React + ReactDOM: ~42KB
Vue 3: ~34KB
Svelte: ~10KB

# Real app comparison
React Todo App: ~130KB
Vue Todo App: ~90KB
Svelte Todo App: ~15KB

Gila kan? Svelte bisa 8x lebih kecil dari React! Ini karena Svelte itu compiler, bukan runtime framework. Jadi semua “magic”-nya udah di-compile jadi vanilla JavaScript yang super optimized.

💡 Pengalaman Pertama Gue Pake Svelte

Gue inget banget, dulu gue lagi bikin side project - aplikasi todo list yang ke-1000 kalinya (developer mana yang gak pernah bikin todo app, coba? 😂). Biasanya gue pake React, tapi kali ini gue pengen nyoba sesuatu yang baru.

First Impression: “Kok Gampang Banget?”

<!-- App.svelte -->
<script>
  let todos = [];
  let newTodo = '';

  function addTodo() {
    if (newTodo.trim()) {
      todos = [...todos, {
        id: Date.now(),
        text: newTodo,
        completed: false
      }];
      newTodo = '';
    }
  }

  function toggleTodo(id) {
    todos = todos.map(todo => 
      todo.id === id 
        ? { ...todo, completed: !todo.completed }
        : todo
    );
  }

  function deleteTodo(id) {
    todos = todos.filter(todo => todo.id !== id);
  }
</script>

<main>
  <h1>My Todo App</h1>
  
  <form on:submit|preventDefault={addTodo}>
    <input 
      bind:value={newTodo} 
      placeholder="Add new todo..."
    />
    <button type="submit">Add</button>
  </form>

  <ul>
    {#each todos as todo (todo.id)}
      <li class:completed={todo.completed}>
        <span on:click={() => toggleTodo(todo.id)}>
          {todo.text}
        </span>
        <button on:click={() => deleteTodo(todo.id)}>
          Delete
        </button>
      </li>
    {/each}
  </ul>
</main>

<style>
  .completed {
    text-decoration: line-through;
    opacity: 0.6;
  }
  
  li {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #eee;
  }
</style>

Pas gue liat kode ini, reaksi pertama gue: “Wait, that’s it? Gak ada useState, gak ada useEffect, gak ada context provider?”

Dan yang paling bikin gue shock: CSS-nya scoped by default! Gak perlu CSS modules, gak perlu styled-components, gak perlu ribet-ribet. Tulis CSS di dalam component, otomatis cuma berlaku buat component itu doang.

Performance yang Bikin Melongo

Setelah build, aplikasi todo gue cuma 12KB. TWELVE KILOBYTES! Aplikasi React yang sama biasanya minimal 100KB+.

Gue sampe ngecek berkali-kali, “Kok bisa sekecil ini? Ada yang salah gak ya?” Ternyata emang segitu. Dan performanya? Lighthouse score 100 semua. Perfect score tanpa optimasi apapun.

🆚 Svelte vs SvelteKit: Apa Bedanya?

Nah, ini yang sering bikin bingung. Svelte sama SvelteKit itu beda, tapi saling melengkapi.

Svelte = Component Framework

<!-- Button.svelte -->
<script>
  export let variant = 'primary';
  export let disabled = false;
  
  let buttonElement;
  
  function handleClick() {
    buttonElement.blur();
  }
</script>

<button 
  bind:this={buttonElement}
  class="btn btn-{variant}"
  {disabled}
  on:click={handleClick}
  on:click
>
  <slot />
</button>

<style>
  .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
  }
  
  .btn-primary {
    background: #007bff;
    color: white;
  }
  
  .btn-secondary {
    background: #6c757d;
    color: white;
  }
  
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
</style>

SvelteKit = Full-Stack Framework

SvelteKit itu kayak Next.js-nya Svelte. Dia ngasih lo:

File-based routing
Server-side rendering
Static site generation
API routes
Deployment adapters

// src/routes/+page.js
export async function load({ fetch }) {
  const response = await fetch('/api/posts');
  const posts = await response.json();
  
  return {
    posts
  };
}

<!-- src/routes/+page.svelte -->
<script>
  export let data;
</script>

<h1>My Blog</h1>

{#each data.posts as post}
  <article>
    <h2><a href="/posts/{post.slug}">{post.title}</a></h2>
    <p>{post.excerpt}</p>
  </article>
{/each}

// src/routes/api/posts/+server.js
import { json } from '@sveltejs/kit';

export async function GET() {
  const posts = await getPosts(); // Your data fetching logic
  
  return json(posts);
}

Simple banget kan? Gak ada getServerSideProps, gak ada getStaticProps yang bikin pusing.

🔥 Fitur-Fitur Svelte yang Bikin Jatuh Cinta

1. Reactivity yang Intuitif

<script>
  let name = 'World';
  let count = 0;
  
  // Reactive statement - runs whenever dependencies change
  $: greeting = `Hello ${name}!`;
  $: doubled = count * 2;
  
  // Reactive block - for side effects
  $: if (count > 10) {
    alert('Count is getting high!');
  }
  
  // Reactive with async
  $: if (name) {
    fetchUserData(name);
  }
  
  async function fetchUserData(username) {
    // Fetch user data
  }
</script>

<input bind:value={name} />
<button on:click={() => count++}>Count: {count}</button>

<p>{greeting}</p>
<p>Doubled: {doubled}</p>

Liat tuh $: syntax? Itu magic banget. Setiap kali name berubah, greeting otomatis update. Gak perlu useEffect, gak perlu dependency array yang sering lupa.

2. Stores untuk State Management

// stores.js
import { writable, derived, readable } from 'svelte/store';

// Writable store
export const count = writable(0);

// Derived store
export const doubled = derived(count, $count => $count * 2);

// Readable store (for external data)
export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return function stop() {
    clearInterval(interval);
  };
});

// Custom store
function createCounter() {
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    increment: () => update(n => n + 1),
    decrement: () => update(n => n - 1),
    reset: () => set(0)
  };
}

export const counter = createCounter();

<!-- Component.svelte -->
<script>
  import { count, doubled, counter } from './stores.js';
</script>

<!-- Auto-subscribe with $ prefix -->
<p>Count: {$count}</p>
<p>Doubled: {$doubled}</p>

<button on:click={counter.increment}>+</button>
<button on:click={counter.decrement}>-</button>
<button on:click={counter.reset}>Reset</button>

Gak perlu Redux, gak perlu Context API yang ribet. Stores di Svelte itu simple tapi powerful banget.

3. Animations yang Smooth

<script>
  import { fade, slide, scale } from 'svelte/transition';
  import { flip } from 'svelte/animate';
  
  let visible = true;
  let items = ['Apple', 'Banana', 'Cherry'];
  
  function remove(index) {
    items = items.filter((_, i) => i !== index);
  }
</script>

{#if visible}
  <div transition:fade>
    I fade in and out
  </div>
{/if}

<ul>
  {#each items as item, index (item)}
    <li 
      animate:flip
      transition:slide
      on:click={() => remove(index)}
    >
      {item}
    </li>
  {/each}
</ul>

<button on:click={() => visible = !visible}>
  Toggle
</button>

Animasi built-in yang smooth banget, gak perlu library tambahan!

🚧 Tapi… Ada Kelemahannya Juga

Gue gak mau jadi fanboy yang buta. Svelte emang keren, tapi ada beberapa hal yang bikin gue mikir dua kali:

1. Ecosystem yang Masih Kecil

# NPM downloads (weekly)
React: ~20 million
Vue: ~4 million  
Svelte: ~500k

# Job opportunities
React jobs: 50,000+
Vue jobs: 15,000+
Svelte jobs: 1,000+

Ini yang paling nyesek. Mau cari library? Pilihan terbatas. Mau cari developer Svelte buat tim? Susah. Mau cari kerja sebagai Svelte developer? Good luck.

2. Learning Curve yang Unik

Meskipun Svelte lebih simple dari React/Vue, tapi dia punya cara sendiri yang kadang bikin bingung developer yang udah terbiasa sama framework lain.

<!-- Ini syntax Svelte yang unik -->
{#if condition}
  <p>Condition is true</p>
{:else if otherCondition}
  <p>Other condition is true</p>
{:else}
  <p>All conditions are false</p>
{/if}

{#each items as item, index (item.id)}
  <div>{item.name}</div>
{:else}
  <p>No items</p>
{/each}

{#await promise}
  <p>Loading...</p>
{:then value}
  <p>The value is {value}</p>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

Syntax {#if}, {:else}, {/if} itu unik banget. Gak ada di framework lain. Jadi butuh waktu buat terbiasa.

3. TypeScript Support yang Masih Developing

// Svelte + TypeScript masih agak tricky
<script lang="ts">
  interface User {
    id: number;
    name: string;
    email: string;
  }
  
  export let user: User;
  
  // Type inference kadang gak perfect
  let users: User[] = [];
  
  // Props typing masih agak verbose
  export let onClick: (user: User) => void = () => {};
</script>

TypeScript support udah ada, tapi masih belum se-smooth React atau Vue.

🎯 Kapan Lo Harus Pake Svelte/SvelteKit?

Berdasarkan pengalaman gue, ini skenario yang cocok banget buat Svelte:

✅ Perfect untuk:

1. Side Projects & Personal Projects

# Setup SvelteKit project
npm create svelte@latest my-app
cd my-app
npm install
npm run dev

Gampang banget setup-nya, performanya kenceng, bundle size kecil. Perfect buat eksperimen atau bikin portfolio.

2. Landing Pages & Marketing Sites

<!-- Super fast loading, SEO-friendly -->
<script>
  import { onMount } from 'svelte';
  
  let stats = { users: 0, downloads: 0 };
  
  onMount(async () => {
    const response = await fetch('/api/stats');
    stats = await response.json();
  });
</script>

<section class="hero">
  <h1>Amazing Product</h1>
  <p>Trusted by {stats.users.toLocaleString()} users</p>
</section>

3. Prototyping Mau bikin proof of concept dengan cepat? Svelte is your friend. Gak perlu setup yang ribet, langsung coding aja.

4. Performance-Critical Apps Kalau lo bikin app yang harus super cepat (mobile web, low-end devices), Svelte bisa jadi pilihan yang tepat.

❌ Mungkin Belum Cocok untuk:

1. Enterprise Applications Ecosystem yang masih kecil, talent pool yang terbatas, long-term support yang belum jelas.

2. Team yang Udah Established di React/Vue Kalau tim lo udah expert di React/Vue, switching ke Svelte mungkin gak worth it (at least for now).

3. Complex State Management Meskipun Svelte stores bagus, tapi untuk aplikasi yang butuh state management super complex, Redux + React masih lebih mature.

🔮 Masa Depan Svelte: Hype atau Hope?

Gue optimis sama masa depan Svelte. Kenapa?

1. Adoption yang Terus Naik

// GitHub stars growth
2019: 20k stars
2021: 50k stars  
2023: 70k stars
2025: 78k+ stars (and counting)

// Companies using Svelte
- The New York Times
- Apple (documentation sites)
- Spotify (some internal tools)
- Rakuten
- Decathlon

2. SvelteKit yang Makin Mature

SvelteKit udah reach 1.0, artinya API-nya udah stable. Gak ada lagi breaking changes yang bikin pusing.

3. Performance yang Unbeatable

Di era dimana Core Web Vitals makin penting buat SEO, framework yang bisa ngasih performance terbaik bakal menang.

4. Developer Experience yang Superior

<!-- Ini aja udah cukup buat bikin component -->
<script>
  let name = 'World';
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    color: purple;
  }
</style>

Simple, clean, no bullshit. Exactly what developers want.

🛠️ Getting Started: From Zero to Hero

Oke, lo udah convinced mau nyoba Svelte? Let’s go!

Step 1: Setup Project

# Create new SvelteKit project
npm create svelte@latest my-svelte-app

# Choose options:
# ✓ Skeleton project
# ✓ TypeScript (optional)
# ✓ ESLint
# ✓ Prettier
# ✓ Playwright (for testing)

cd my-svelte-app
npm install
npm run dev

Step 2: Bikin Component Pertama

<!-- src/lib/components/Card.svelte -->
<script>
  export let title;
  export let description;
  export let imageUrl = '';
  export let href = '#';
</script>

<article class="card">
  {#if imageUrl}
    <img src={imageUrl} alt={title} />
  {/if}
  
  <div class="content">
    <h3>{title}</h3>
    <p>{description}</p>
    <a {href}>Read more</a>
  </div>
</article>

<style>
  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
  }
  
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  .content {
    padding: 16px;
  }
  
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  h3 {
    margin: 0 0 8px 0;
    color: #333;
  }
  
  p {
    color: #666;
    line-height: 1.5;
  }
  
  a {
    color: #007bff;
    text-decoration: none;
  }
</style>

Step 3: Pake Component di Page

<!-- src/routes/+page.svelte -->
<script>
  import Card from '$lib/components/Card.svelte';
  
  const articles = [
    {
      title: 'Getting Started with Svelte',
      description: 'Learn the basics of Svelte framework',
      imageUrl: '/images/svelte-basics.jpg',
      href: '/articles/svelte-basics'
    },
    {
      title: 'SvelteKit for Beginners',
      description: 'Build full-stack apps with SvelteKit',
      imageUrl: '/images/sveltekit-guide.jpg', 
      href: '/articles/sveltekit-guide'
    }
  ];
</script>

<svelte:head>
  <title>My Svelte Blog</title>
  <meta name="description" content="A blog built with SvelteKit" />
</svelte:head>

<main>
  <h1>Welcome to My Blog</h1>
  
  <section class="articles">
    {#each articles as article}
      <Card 
        title={article.title}
        description={article.description}
        imageUrl={article.imageUrl}
        href={article.href}
      />
    {/each}
  </section>
</main>

<style>
  main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
  }
</style>

Step 4: Add API Route

// src/routes/api/articles/+server.js
import { json } from '@sveltejs/kit';

const articles = [
  {
    id: 1,
    title: 'Getting Started with Svelte',
    content: 'Svelte is amazing...',
    publishedAt: '2025-01-01'
  },
  {
    id: 2,
    title: 'SvelteKit for Beginners', 
    content: 'SvelteKit makes full-stack development easy...',
    publishedAt: '2025-01-02'
  }
];

export async function GET() {
  return json(articles);
}

export async function POST({ request }) {
  const newArticle = await request.json();
  
  // Validate and save article
  articles.push({
    id: articles.length + 1,
    ...newArticle,
    publishedAt: new Date().toISOString()
  });
  
  return json(newArticle, { status: 201 });
}

🎭 Real Talk: Haruskah Lo Switch ke Svelte?

Ini pertanyaan yang sering gue dapet. Jawabannya: depends.

Kalau Lo Baru Mulai Belajar Frontend

Go for it! Svelte lebih gampang dipahami daripada React. Lo gak perlu belajar konsep yang ribet kayak virtual DOM, hooks, atau state management yang complex.

Kalau Lo Udah Expert di React/Vue

Tetep worth it untuk dipelajari, tapi gak perlu buru-buru switch semua project. Pake Svelte buat side project dulu, rasain bedanya.

Kalau Lo Kerja di Company

Diskusi sama tim dulu. Svelte emang keren, tapi pertimbangkan juga:

Apakah tim ready belajar hal baru?
Apakah ada business case yang kuat?
Apakah long-term maintenance-nya sustainable?

🎯 Kesimpulan: Svelte is Real Deal

Setelah pake Svelte selama beberapa bulan, gue bisa bilang: this is not just hype. Svelte emang beda, dan bedanya itu meaningful.

Yang Bikin Gue Jatuh Cinta:

Simplicity - Kode yang clean, gak ada boilerplate
Performance - Bundle size kecil, runtime cepat
Developer Experience - Tooling yang bagus, error message yang helpful
CSS Scoping - Built-in, gak perlu library tambahan
Animations - Smooth dan gampang diimplementasi

Yang Masih Bikin Ragu:

Ecosystem - Masih kecil dibanding React/Vue
Job Market - Belum banyak company yang adopt
Community - Masih growing, belum se-massive React

Bottom Line

Svelte itu kayak mobil listrik di tahun 2015. Lo tau ini masa depan, tapi infrastrukturnya belum ready. Tapi kalau lo mau jadi early adopter, this is the perfect time.

Gue personally bakal terus pake Svelte buat personal projects dan side projects. Buat production apps di company, mungkin masih stick ke React/Vue dulu. Tapi gue yakin, dalam 2-3 tahun ke depan, Svelte bakal jadi mainstream.

So, should you learn Svelte? Hell yes! At minimum, lo bakal appreciate betapa simple-nya web development bisa jadi. At maximum, lo bakal jadi early adopter dari framework yang bakal dominate masa depan.

🔗 Resources Buat Lo yang Mau Mulai

Official Docs & Tutorials

Svelte Tutorial - Interactive tutorial yang keren banget
SvelteKit Docs - Complete guide untuk SvelteKit
Svelte Examples - Code examples buat berbagai use cases

YouTube Channels

Svelte Society - Official Svelte community
Joy of Code - Svelte tutorials yang fun
Huntabyte - Advanced Svelte concepts

Awesome Libraries

Communities

Svelte Discord - Active community buat tanya-tanya
r/sveltejs - Reddit community
Svelte Society - Events dan meetups

Gue harap artikel ini bisa ngasih lo perspective yang jelas tentang Svelte dan SvelteKit. Framework ini emang underrated, tapi potensinya huge banget.

Kalau lo udah nyoba Svelte, share pengalaman lo di comment! Atau kalau ada pertanyaan, feel free to ask. Let’s grow the Svelte community together! 🚀

🔗 Artikel Terkait:

Ditulis dengan ❤️ (dan sedikit obsesi sama Svelte) oleh Hilal Technologic