So sánh js thuần và vujs năm 2024

Chào các bạn! Gần đây mình có hay lượn lờ vào các trang benchmark để xem một loạt các so sánh giữa các framework, và mình thấy được 1 thằng khá ưu việt, vượt trên cả Angular, React hay Vue về điểm số. Đó là Svelte. Cùng xem qua những điểm số này nhé:

Dễ dàng thấy Svelte có các đánh giá đều nhỉnh hơn các framework khác, bạn có thể tham khảo thêm ở đây. Vậy cụ thể Svelte là gì và nó có gì khác biệt?

Svelte là gì?

Svelte (đọc nôm na là Sờ Veo) là một component framework mới nổi một vài năm gần đây, như React hoặc Vue, dùng để xây dựng giao diện người dùng nhưng theo 1 cách tiếp cận khác so với 2 thư viện kia.

• React or Vue sử dụng DOM ảo, cho phép lập trình viên viết mã theo hướng declarative state-driven, việc đó khiến browser phải làm thêm việc là chuyển đổi các cấu trúc khai báo về dạng DOM operations, từ đó làm lãng phí frame cũng như thêm việc cho garbage collector.
• Thay vào đó, Svelte giống như 1 trình biên dịch, nó “runs at build time”, chuyển đổi trực tiếp component của bạn thành 1 đoạn mã JavaScript trực tiếp update trên DOM. Svelte được đánh giá là lựa chọn hàng đầu để xây dựng 1 ứng dụng có hiệu suất tuyệt vời!

Đặc điểm của Svelte?

1. 1. No virtual DOM

   Chúng ta bắt đầu đi từ câu hỏi: Virtual DOM có tác dụng gì?  
   

   Virtual DOM nôm na giống như một bản sao của DOM, tác dụng của nó đơn giản là chỉ ra phần tử nào trên DOM thay đổi sau đó update. Cụ thể hơn ta đi vào cơ chế của virtual DOM trong React đó là Snapshots & Diffing. Khi một event hoặc một state làm thay đổi trạng thái ứng dụng của bạn, React sẽ cho phiên bản DOM hiện tại thành 1 Snapshot và so sánh nó với virtual DOM của hiện tại, lấy sự khác biệt để làm cơ chế update DOM.  
   Thực sự virtual DOM rất nhanh, nhưng nó không làm DOM nhanh hơn. Dựa vào cơ chế Snapshots & Diffing, ta có thể thấy một vấn đề mà khi sử dụng cơ chế này tạo ra: đó là về Memory. DOM đã lớn, cơ chế này tạo ra 2 bản sao y hệt của DOM, điều đó sẽ ngốn không ít bộ nhớ trên trình duyệt của bạn. Thêm vào đó, Garbage collector sẽ phải làm việc để dọn đống rác cho bạn mỗi lần như thế ?.  
   Svelte thì khác, nó không dùng DOM ảo mà sử dụng một biến`$$invalidate` để lưu vết lại, tận dụng Javascript label, không tốn kém như proxies hay accessors như trong Vue hay React. Toàn bộ code của bạn được đưa về Javascript thuần sau lần build và đưa lên browser, không cơ chế trung gian, sẽ chỉ nhanh và nhanh!  
   Chắc cũng hơi khó hiểu, mình sẽ so sánh các cơ chế Reactive của React, Vue và Svelte trong một blog khác! ?  
   

   2. Write less code

      Đã code thì phải có bug! Đó là chuyện đương nhiên! Tuy nhiên, càng giảm thiểu số dòng code thì ứng dụng của bạn càng trở nên tối ưu, giả thời gian phát triển. Ngắn gọn nhưng phải đi đôi với dễ hiểu, Svelte có được cả hai điều đó:![](https://https://i0.wp.com/labs.flinters.vn/wp-content/uploads/2021/04/Screen-Shot-2021-04-22-at-13-300x154.png)Thử “Hello world!” với Svelte  
      

      Mã Svelte không chỉ đơn giản, ngắn gọn mà lại vô cùng dễ hiểu. Để chứng minh, ta thử so sánh cùng đoạn code cùng chức năng với React và Vue:
      Đoạn mã Svelte.
      Đoạn mã React.
      Đoạn mã Vue. Cần tới 442 ký tự trong React, Vue cần 263 ký tự, trong khi Svelte chỉ cần 145 ký tự. Thực sự đoạn mã Svelte ngắn gọn hơn so với React hơn 3 lần!

      – Một khác biệt nữa của Svelte so với React hay Vue đó là Svelte cho phép Multi top-level elements thay vì single top element như trong React (bọc element bằng <> hay 
      ) hay Vue (