Khám Phá Svelte: Framework JavaScript “Siêu Nhẹ” Đang Thống Trị Cộng Đồng Dev!

HIện nay, Svelte đang nổi lên như một lựa chọn thú vị so với các framework truyền thống như React và Vue. Vậy điều gì đã khiến cho nó trở thành xu hướng như vậy, cùng mình tìm hiểu nhé.

Tại sao Svelte đáng chú ý?

Svelte là gì?

• Svelte được sáng lập bởi Rich Harris vào năm 2016, nó là một framework JavaScript để xây dựng ứng dụng web.
• Được cho là “framework không có framework”, nó khác biệt hoàn toàn so với React hay Vue ở cách hoạt động và cách thức biên dịch mã nguồn.

Tại sao Svelte đang tạo được sự chú ý?

Thì có vài nguyên nhân như:

• Tốc độ nhanh chóng và hiệu suất vượt trội
• Biên dịch ra js thuần thay vì chạy một virtual DOM.
• Cấu trúc đơn giản, dễ học
• Dễ dàng triển khai và tích hợp
• Hỗ trợ TypeScript tốt
• ...

Tại sao Svelte lại nổi bật hơn các framework khác?

Không có Virtual DOM:

• Một sự khác biệt lớn giữa Svelte và React/Vue là Svelte không có Virtual DOM.

• Thay vì phải xử lý sự thay đổi trong một cây DOM ảo và sau đó đồng bộ hóa lại với DOM thật thì nó biên dịch mã thành JavaScript thuần => hiệu suất tốt hơn.

• Chính vì không có Virtual DOM nên việc thao tác với DOM cũng giảm đi rất nhiều dẫn tới hiệu suất được ra tăng vượt trội.

Cấu trúc đơn giản, dễ học:

• Nó có cấu trúc gần giống với bộ 3 HTML, CSS và JavaScript truyền thống nên việc tiếp cận cũng khá dễ dàng.
• Syntax cũng khá giống với vue, react nên cũng không mất nhiều thời gian chuyển đổi.

<script> // code js
</script> // HTML
<p>Hello World!</p> <style>
// css
</style>

Dễ dàng triển khai và tích hợp

• Từ những phiên bản đầu tiên thì Svelte đã hỗ trợ Typescript nên việc triển khai rất dễ dàng mà không gặp phải vấn đề tương thích.
• Các ứng dụng Svelte có thể được triển khai trực tiếp lên server mà không cần quá nhiều bước cấu hình.
• Các bước setup cực kỳ đơn giản, chỉ cần vài dòng lệnh là đã có sẵn 1 app.

npx sv create myapp
cd myapp
npm install
npm run dev

tối ưu hoá mạnh mẽ (compile-time optimization)

• Svelte tối ưu hoá rất nhiều thứ ngay trong quá trình biên dịch thay vì thực hiện tối ưu tại thời giểm runtime dẫn tới việc tài nguyên được chiếm dụng khá là ít:
  • Loại bỏ mã không sử dụng
  • Giảm thiểu và tối ưu các sự kiện, cấu trúc lại code hiệu quả
  • Tạo các hàm cập nhật DOM tối ưu
  • Tối ưu hóa các biểu thức và computed properties
  • ...

Những tính năng ấn tượng của Svelte

Tự động quản lý trạng thái (Reactive Statements)

Một trong những tính năng đặc biệt và nổi bật của Svelte là quản lý trạng thái tự động, thông qua cơ chế "reactivity" rất dễ sử dụng.

• Trong Svelte, biến được tự động liên kết với giao diện người dùng mà không cần phải sử dụng các hàm phức tạp như setState trong React hoặc useEffect để cập nhật giao diện.
• Khi bạn thay đổi giá trị của một biến, Svelte tự động cập nhật DOM để phản ánh sự thay đổi đó mà không cần phải can thiệp thủ công.

<script> let count = 0; $: doubleCount = count * 2
</script> <p>{ count }</p>
<p>{ doubleCount }</p> <button on:click={() => count++}>Increment</button>

CSS Scoped (Scoped CSS)

• CSS Scoped trong Svelte giúp bạn tránh các vấn đề về xung đột CSS giữa các component trong ứng dụng.
• Mỗi component trong Svelte có thể có CSS riêng biệt, và các quy tắc CSS chỉ áp dụng cho các phần tử trong component đó mà không làm ảnh hưởng đến các component khác trong ứng dụng.
  • Svelte tự động scope (giới hạn) CSS cho mỗi component bằng cách thêm các class đặc biệt vào các phần tử DOM.
  • Điều này giúp tránh việc các style trong một component vô tình tác động đến các phần khác của ứng dụng, và làm cho việc quản lý CSS trở nên dễ dàng hơn.

<style> p { color: red; }
</style> <p>This text will be red</p> // chỉ có thẻ <p> ở đây mới được nhận css

Tích hợp dễ dàng với các thư viện JS

• Các thư viện javascript hay typescript đều dễ dàng cài đặt với svelte mà không lo việc không tương thích.
• Vì cách viết giống js thuần nên cũng không cần tìm cách viết hay phải viết như thế nào mới có thể chạy được mà chỉ cần bê code mẫu là đã chạy ngon lành.
• Không cần Virtual DOM nên việc tích hợp không gây xung đột với cách svelte update giao diện.

<script> import { onMount } from 'svelte'; import Chart from 'chart.js'; let chart; onMount(() => { chart = new Chart(document.getElementById('myChart'), { type: 'line', data: { labels: ['January', 'February', 'March'], datasets: [{ data: [65, 59, 80] }] } }); });
</script> <canvas id="myChart"></canvas>

Quản lý trạng thái với store (State Management)

• Svelte cung cấp một API store để quản lý trạng thái toàn cục trong ứng dụng một cách đơn giản.
• Các store trong Svelte cho phép bạn chia sẻ trạng thái giữa các component mà không cần phải sử dụng đến props drilling hay context API.
• Svelte cung cấp các cách như writable, readable, hoặc derived, để xử lý các tính huống của trạng thái.
• Nó cũng tự động phản ứng khi có sự thay đổi, giúp đồng bộ hoá dữ liệu giữa các component.

import { writable } from 'svelte/store'; export const count = writable(0); // Component.svelte
<script> import { count } from './store.js';
</script> <button on:click={() => $count += 1}>Increment</button>
<p>{$count}</p>

Lưu ý: nếu bạn gán lại store trong file js hoặc ts bằng toán tử "=" thì Reactive của store đó sẽ biến mất.

Tính năng chuyển động (Animations)

• Tích hợp sẵn 1 API hỗ trợ việc thêm hiệu ứng chuyển động và hoạt ảnh vào ứng dụng.
• Các hiệu ứng chuyển động như fade, fly, và slide có thể được áp dụng mà không cần thư viện ngoài.

<script> import { fade } from 'svelte/transition';
</script> <div in:fade={{ duration: 2000 }}> <p>This will fade in</p>
</div>

SvelteKit (Full-stack Framework)

Có sẵn một framework full-stack được xây dựng trên nền tảng Svelte, hỗ trợ các tính năng như routing, server-side rendering (SSR), static site generation (SSG), và các khả năng mạnh mẽ khác cho việc phát triển các ứng dụng web hiện đại.

Kết luận

Nếu bạn đang tìm kiếm một framework nhẹ nhàng, nhanh chóng và dễ học, Svelte chính là lựa chọn lý tưởng. Thử ngay và cùng trải nghiệm tốc độ mà svelte mang lại nhé!