Svelte có gì?

Tram Ho

Sau khi làm việc với React và Vue thì cá nhân mình thích Vue hơn. Mặc dù thư viện của React nhiều hơn nhưng mà flow của Vue được tinh gọn hơn React khá nhiều. Vậy Svelte thì sao, code và flow có gọn gàng hơn không? Cùng mình tìm hiểu nhé

Đầu tiên, đây là một ví dụ code kinh điển cho thấy sự gọn gàng của Svelte so với Vue và React

Giả sử chúng ta có bài toán: Tính tổng 2 số a và b

  • Input: a, b
  • Output: Tổng của a và b

Đây là code với React

Còn đây là với Vue

và với Svelte, chúng ta chỉ cần như vậy

Có vẻ là khá gọn gàng đó, nhưng đừng vội kết luận, vì thực tế phần lớn ứng dụng của chúng ta sẽ dựng riêng Fronend (FE) và Backend (BE). Vue, React hay Svelte thì cũng chủ yếu là hỗ trợ FE, và với những đoạn code như thế này, thì chưa thể nói lên điều gì, vì phần lớn logic sẽ được xử lý phía BA.

Giờ thì đi sâu hơn nào, và chúng ta sẽ cùng tìm hiểu một số systax để phân tích nhiều hơn nhé

1. Props

Tương tự React nhưng việc khai báo props của Svelte được tối ưu rất đơn giản

2. Logic

If-else

Ví dụ:

Loop

Wait Block

Về systax logic thì wait block là phần hay ho nhất. Tương tự như cấu trúc try-catch. Wait Block cho phép chúng ta xây dựng logic xử lý một promise. Điều này là rất cần thiết khi FE tương tác với phía BA.

Thực tế thì những đoạn code như này có vẻ hơi dài dòng so với systax rút gon 😕 nhỉ?

3. Event

DOM Events

Svelte sử dụng keyword on, systax

Các modifiers được hỗ trợ bao gồm:

  • preventDefault — calls event.preventDefault() before running the handler. Useful for client-side form handling, for example.
  • stopPropagation — calls event.stopPropagation(), preventing the event reaching the next element
  • passive — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it’s safe to do so)
  • nonpassive — explicitly set passive: false
  • capture — fires the handler during the capture phase instead of the bubbling phase ()
  • once — remove the handler after the first time it runs
  • self — only trigger handler if event.target is the element itself

Ví dụ:

Cái này thì cũng tương tự như Vue rồi

Event forwarding

Nếu Vue hỗ trợ $emit thì Svelte hỗ trợ event forwarding.

Dưới đây là một ví dụ, chúng ta có thể định nghĩa 1 dispatch event và gọi đến nó bằng cách sử dụng systax on:event_name

4. Binding

Thay vì dùng :binding_name= rút gọn như Vue, ở đây chúng ta có cú pháp bind:binding_name

Lại một cú pháp tương tự Vue, nhưng Svelte không có hỗ trợ cú pháp rút gọn.

5. Lifecycle

Svelte hỗ trợ một số function cho lifecycle như:

  • onMount: run sau khi conponent đầu tiên được rendered
  • onDestroy: runs khi component bị hủy
  • beforeUpdate: runs trước khi DOM updated.
  • afterUpdate: runs sau khi DOM has been updated(nó là 1 phần của beforeUpdate).

onMount

Đây là 1 trong những function hay được sử dụng nhất của Svelte. Tương tự như useEffect của React hay mounted của Vue.

Cái này có vẻ giống React hơn, với Vue thì bạn chẳng cần import cái gì cả

onDestroy

Tương tự destroyed của Vue

beforeUpdate và afterUpdate

Khác với Vue, chia thành beforeMount, beforeUpdate và updated thì Svelte chỉ có beforeUpdate và afterUpdate.

beforeUpdate được thực thi ngay trước khi DOM được updated. afterUpdate thì là ngược lại, nó được sủ dụng để run 1 lần khi DOM đã đồng bộ data.

6. Store

writable

Sau đó, để sử dụng, chúng ta import chúng vào các file svelte.

Đây thực chất là cú pháp khai báo function js dùng chung và đây không hẳn là state, hay mutation như Vue. Mình nghĩ đây là mutation, nhưng Svelte cũng có readable cho phép thay đổi data export.

readable

Một cú pháp khác cho phép bạn khai báo 1 function.

derived

derived thì hỗ trợ export data

7. Component Action

Bạn có thể thấy, action của Svelte được khai báo bằng cú pháp

Store của Svelte không rõ ràng và chặt chẽ như flow của Nuxt hay Redux Saga mà thiên về js thuần. Cũng dễ hiểu vì Svelte render theo hướng tối ưu code thành js thuần và không sử dụng DOM ảo.

8. Component composition

slots

Tương tự như slots trong Vue

slot fallbacks – <em>

Thẻ <em> cho phép bạn chèn element con mặc định cho slot.

9. Special elements

Một sự khác biệt của Svelte là một số element khá đặc biệt như:

  • <svelte:self>
  • <svelte:component>
  • <svelte:window>
  • <svelte:body>
  • <svelte:head>
  • <svelte:options>

<svelte:self>
Thay vì viết

bạn có thể đổi thành

<svelte:component>

Bạn có thể thấy, thay vì phải check component được chọn như vậy

thì bạn chỉ cần dùng <svelte:component>.

<svelte:window>

Element này cho phép bạn add 1 số event cho window như:

  • innerWidth
  • innerHeight
  • outerWidth
  • outerHeight
  • scrollX
  • scrollY
  • online — an alias for window.navigator.onLine

Ví dụ

<svelte:body>

Tương tự như <svelte:window>, <svelte:body> cho phép bạn set listen event cho documment.body

<svelte:head>

Element này cho phép bạn insert các elements vào <head>

<svelte:options>

Tương tự Vue và React, Svelte cho bạn khai báo tắt options
Thay vì

bạn có thể viết như vậy

Qua những phần mình tìm hiểu về Svelte trong tutorial, có vẻ Svelte cũng ổn, khá giống Vue.

Điểm cộng:

  • Code gọn gàng
  • Hiệu năng được đảm bảo là cao bằng việc run tại thời điểm build time và convert các components thành mã mệnh lệnh tối ưu giúp cập nhật DOM một cách nhanh hơn.
  • Thích hợp để học trước khi học Vue và React vì cú pháp ngắn gọn và tương đối dễ hiểu.

Điểm trừ:

  • Flow Store không chặt chẽ và rõ ràng
  • Thư viện hỗ trợ còn ít

Tài liệu tham khảo: https://svelte.dev/tutorial

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo