Svelte 5 là gì? Tổng quan & Tính năng nổi bật

Giới thiệu chung về Svelte

Svelte là gì?

Svelte là một framework giao diện web độc đáo, chuyển dịch mã thành JavaScript tối ưu ngay tại thời điểm biên dịch thay vì phải sử dụng Virtual DOM như React hoặc Vue. Mỗi component Svelte được viết dựa trên HTML, CSS và JavaScript sẽ được compiler biến đổi thành code “thẳng” thao tác DOM hiệu quả, giúp ứng dụng nhỏ gọn, khởi động nhanh và ít runtime overhead hơn.

Lịch sử phát triển đến Svelte 4

Kể từ Svelte 3 (ra mắt năm 2019), cộng đồng đã chứng kiến nhiều cải tiến về cú pháp ($: reactivity, store API) và tính năng (SvelteKit, support TypeScript từng phần). Phiên bản Svelte 4 tiếp tục tối ưu bundle size và developer experience nhưng cũng bộc lộ hạn chế về độ mảnh của hệ thống reactivity khi ứng dụng phức tạp, dẫn đến nhu cầu tái thiết kế toàn bộ core của framework.

Tại sao cần Svelte 5?

Với ngày càng nhiều dự án lớn sử dụng Svelte, đội ngũ phát triển nhận ra rằng:

• Granularity thấp của reactivity: Trong Svelte 4, chỉ báo hiệu sự thay đổi thông qua let ở cấp component, khiến toàn bộ object reactive bị invalidated mỗi khi bất kỳ thuộc tính nào thay đổi.
• Cú pháp chưa nhất quán: Một số API (slots, sự kiện, export props) còn mang tính “framework-specific” thay vì theo chuẩn JavaScript.
• Khó mở rộng và tái cấu trúc: Khi cần tái sử dụng logic ngoài top-level component, phải dùng store, làm tăng độ phức tạp và không nhất quán.
  Do đó, Svelte 5 ra đời với mục tiêu giải quyết những điểm yếu này thông qua ground-up rewrite của compiler và API reactivity hoàn toàn mới.

Svelte 5: Tổng quan

Ngày ra mắt và bản chất rewrite

Svelte 5 chính thức phát hành vào ngày 19 tháng 10 năm 2024 ngay tại Svelte Summit Fall 2024. Đây là lần đầu tiên framework này được viết lại “from the ground up”, thay đổi sâu sắc cách compiler hiểu và xử lý reactivity, template syntax và các API tích hợp.

Mục tiêu chính của Svelte 5

1. Granular reactivity – Cho phép developer kiểm soát chính xác biến hoặc biểu thức nào cần theo dõi, giảm thiểu overhead và tránh invalidation không cần thiết.
2. API rõ ràng, chuẩn JavaScript – Loại bỏ các directive quá framework-specific (ví dụ on:click, export let) để dùng cú pháp chuẩn JS (ví dụ onclick, $props()).
3. Tương thích ngược – Mặc dù rewrite sâu, Svelte 5 vẫn hỗ trợ song song cú pháp cũ để migration mượt mà.
4. Hiệu suất tối ưu – Giảm bundle size, tăng tốc build và runtime nhờ dead-code elimination nâng cao.

Tính năng nổi bật của Svelte 5

Runes – hệ thống reactivity mới

Runes là các “macro” bắt đầu bằng dấu $, cung cấp API explicit cho trạng thái và các biểu thức reactive:

• $state(initial) – tạo biến reactive thay thế cho let ở Svelte 4.
• $derived(expr) / $derived.by(fn) – tính toán giá trị phụ thuộc vào state khác, tương tự computed trong Vue.
• $effect(fn) – chạy side-effect khi bất kỳ $state hay $derived nào trong fn thay đổi, giống useEffect trong React.

Hỗ trợ TypeScript nguyên sinh

• Tích hợp hoàn toàn với TS: autocompletion và type-checking ngay trong file .svelte.
• Không cần cấu hình rườm rà; Svelte 5 tự nhận diện và áp dụng rule TS, nâng cao developer experience cho các dự án enterprise.

Cải tiến về template syntax

• Thay vì on:click/bind:value, dùng onclick/oninput chuẩn JS.
• Slots được thay thế bằng Snippets (#snippet), cho phép truyền nhiều component con dưới dạng props, gọn gàng hơn so với <slot>.
• Directive use: được nâng cấp để dễ tạo action tận dụng hoàn toàn TypeScript.

Tối ưu hiệu suất và bundle size

• Dead-code elimination thông minh hơn, loại bỏ code không sử dụng.
• Giảm runtime overhead nhờ chỉ giữ lại những runes và effects cần thiết.

Tương thích ngược với Svelte 4

• Svelte 5 vẫn chấp nhận syntax cũ; có thể mix & match component cũ và mới.
• Đội ngũ cung cấp migration script npx sv migrate svelte-5 tự động chuyển hầu hết cú pháp.

Hướng dẫn nâng cấp từ Svelte 4 lên Svelte 5

Cập nhật dependencies

Đầu tiên, bạn chỉ cần thay đổi version của Svelte và plugin tương ứng trong package.json:

"devDependencies": {
  "@sveltejs/vite-plugin-svelte": "^4.0.0",
  "svelte": "^5.0.0"
}

Sau đó chạy:

npm install
# hoặc
yarn install

Đảm bảo mọi package liên quan (ví dụ @sveltejs/adapter-*, vite-plugin-svelte) cũng được nâng lên bản tương thích với Svelte 5.

Xử lý breaking changes

• Runes thay cho $: reactive: Việc dùng lại cú pháp $: (Svelte 4) vẫn được hỗ trợ tạm thời, nhưng bạn nên chuyển sang $state, $derived, $effect để tận dụng fine-grained reactivity.
• Slots → Snippets: Thay <slot> và let:… bằng {#snippet …} để truyền nội dung con nhất quán hơn.
• Event handlers chuẩn JavaScript: Thay on:click → onclick, bind:value → oninput/value prop.
• CLI migration: Chạy npx sv migrate svelte-5 để tự động chuyển hầu hết cú pháp, hoặc sử dụng command palette của VS Code: “Migrate Component to Svelte 5 Syntax”.

Kiểm thử ứng dụng sau nâng cấp

1. Chạy build & dev:
   npm run build
npm run dev
2. Chạy test (nếu có): Kiểm tra unit/integration tests, đặc biệt các phần sử dụng store cũ hay reactive statements.
3. Đánh giá performance: Quan sát bundle size và thời gian khởi tạo trang – Svelte 5 thường nhỏ hơn và khởi động nhanh hơn so với Svelte 4.

Ví dụ minh họa

Ví dụ cơ bản với $state và $effect

Component đếm số đơn giản:

<script lang="ts">
  let count = $state(0);

  $effect(() => {
    console.log(`Count vừa thay đổi: ${count}`);
  });
</script>

<button onclick={() => count += 1}>
  Click me ({count})
</button>

Ở đây, count là biến reactive rõ ràng, và $effect chỉ chạy khi count thay đổi.

Ví dụ tạo snippet tái sử dụng

<!-- Button.svelte -->
<script>
  export let label = '';
  export let onClick: () => void;
</script>

<button onclick={onClick}>
  {label}
</button>

<!-- App.svelte -->
<script>
  import Button from './Button.svelte';
</script>

{#snippet MyButton snippetProps}
  <Button label="Save" onClick={handleSave}/>
{/snippet}

<MyButton/>

Snippets cho phép đóng gói UI + logic vào khối {#snippet} và dùng lại dưới dạng component mà không cần tạo file mới.

Ví dụ tích hợp TypeScript trong Svelte 5

<script lang="ts">
  interface Todo { id: number; text: string; done: boolean }

  let todos = $state<Todo[]>([]);

  function add(text: string) {
    todos = [...todos, { id: Date.now(), text, done: false }];
  }
</script>

<input
  type="text"
  placeholder="New task"
  oninput={(e) => add((e.target as HTMLInputElement).value)}
/>

<ul>
  {#each $derived(todos) as todo (todo.id)}
    <li>{todo.text}</li>
  {/each}
</ul>

Nhờ TS nguyên sinh, mọi biến, hàm đều được kiểm tra type tự động ngay trong .svelte.

So sánh Svelte 5 với các framework khác

Đặc tính	Svelte 5	React (Hooks)	Vue 3 (Composition API)
Reactivity	Fine-grained qua runes ($state, …)	Hooks với useState, useEffect	Reactive refs/computed (ref(), reactive()) Vercel
Bundle size	Rất nhỏ – compiler-elimination sâu sắc	Lớn hơn do runtime & Virtual DOM	Vừa phải, runtime + compiler
Syntax	Tiết giảm – gần như JS thuần	JSX đặc thù	Template + JS
TypeScript support	Nguyên sinh, không cần preprocessor	Cần setup riêng (tsconfig, Babel)	Tốt, nhưng cần cấu hình đôi chút
Learning curve	Nhẹ, ít khái niệm framework-specific	Trung bình (JSX, hooks)	Trung bình (template vs JS)
Performance	Xuất sắc, khởi động nhanh	Tốt, nhưng overhead hooks & diffing	Tốt, nhưng runtime runtime vẫn còn

Ưu điểm Svelte 5:

• Không runtime Virtual DOM → tốc độ initial render & update rất nhanh.
• API trực quan, gần JS thuần, dễ read/write.
• Bundle size tối ưu nhất trong các framework phổ biến.

Nhược điểm:

• Ecosystem còn nhỏ hơn React/Vue về plugin & thư viện.
• Migration với codebase Svelte 4 lớn có thể cần kiểm thử kỹ.

Ứng dụng thực tiễn & case study

Dự án SPA nhỏ gọn

• Bối cảnh: Một landing page giới thiệu sản phẩm đơn giản, yêu cầu tải nhanh và bundle nhẹ.
• Giải pháp với Svelte 5:
  • Dùng $state và $effect để quản lý form đăng ký newsletter.
  • Tận dụng dead-code elimination để chỉ bundle phần cần thiết.
• Kết quả:
  • Bundle gzip chỉ ~5 KB.
  • Thời gian First Contentful Paint (FCP) < 300 ms trên mobile.

Ứng dụng enterprise với SvelteKit

• Bối cảnh: Hệ thống quản lý nội dung phức tạp, đòi hỏi SSR, routing động, và tích hợp TypeScript.
• Giải pháp với Svelte 5 + SvelteKit:
  1. Cấu hình svelte.config.js để dùng adapter Node.js.
  2. Viết API route với $derived để cache kết quả trên server.
  3. Tách UI thành Snippets để dễ reuse và thử nghiệm A/B.
• Kết quả:
  • Giảm 30% thời gian build so với Svelte 4 + Kit.
  • Codebase nhất quán, dễ maintain nhờ TS nguyên sinh.

Kinh nghiệm từ cộng đồng

• Nhiều developer phản hồi rằng runes giúp họ debug nhanh hơn vì các biến reactive được khai báo rõ ràng.
• Migration script npx sv migrate svelte-5 tự động hóa ~80% công việc chuyển đổi cú pháp.
• Một số library UI (ví dụ Svelte Headless UI) đã dễ dàng cập nhật để hỗ trợ runes và Snippets.

FAQ

Kết luận & Tài nguyên hữu ích

Svelte 5 là bước tiến lớn so với các phiên bản trước, mang lại:

• Hiệu suất vượt trội nhờ granular reactivity và dead-code elimination.
• Developer experience tốt hơn với cú pháp chuẩn JS, Snippets và TS nguyên sinh.
• Migration mượt mà nhờ hỗ trợ backward compatibility và script tự động.

Lời khuyên: Với dự án mới, bắt đầu bằng Svelte 5 để tận dụng tối đa các cải tiến; với dự án hiện tại, lập kế hoạch migration theo từng module để giảm rủi ro.

Tài nguyên & liên kết

1. Official Svelte 5 Announcement – Blog chính thức Svelte
2. What’s New in Svelte 5 – Phân tích runes & Snippets
3. SvelteKit Documentation – Hướng dẫn SSR, routing, adapter