Svelte có gì?

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