Tại sao tôi chuyển từ React sang Svelte và những người khác sẽ theo dõi

[ad_1]

Ảnh của Aryan Singh trên Bapt

React là lựa chọn của tôi trong nhiều năm

vào tháng 10 Ngày 14, 2015, tôi đã tổ chức buổi gặp mặt React Vancouver khai mạc. Đó là lúc tôi đã sử dụng React cho phần tốt hơn của năm và muốn mang các nhà phát triển có cùng chí hướng đến với nhau.

Hồi đó, tôi dám nói rằng, đó là một cuộc cách mạng trong thế giới web. So với các lựa chọn thay thế như jQuery, Backbone.js hoặc Angular 1.x, phát triển với React cảm thấy trực quan, mới mẻ và hiệu quả. Cá nhân, ý tưởng về các khối xây dựng biệt lập (còn gọi là các thành phần) thực sự hấp dẫn tôi vì nó tự nhiên dẫn đến một cơ sở mã có cấu trúc, được tổ chức tốt và dễ bảo trì hơn.

Trong những năm tới, tôi đã theo dõi chặt chẽ về Angular 2.x +, Vue et al nhưng không ai cảm thấy mình là một lựa chọn bất ngờ để nhảy tàu.

Sau đó, tôi đã biết về Svelte

Lần đầu tiên tôi biết về Svelte vào giữa năm 2018, gần một năm trước phiên bản 3.0 đã được phát hành (xem bên dưới). "Máy tính, xây dựng cho tôi một ứng dụng." bởi Rich Harris là điều khiến tôi bị cuốn hút trên Svelte.

Nếu bạn không quen thuộc với Svelte (https://svelte.dev/), vui lòng truy cập trang web và dành 5 phút để đọc phần giới thiệu.

Đọc nó? Có thật không? Tuyệt vời ?

Khi tôi xem video, câu hỏi chính trong đầu tôi là liệu có đáng để học Svelte hay không và bắt đầu sử dụng nó cho các dự án mới hoặc thậm chí hiện có. Nói một cách công bằng, Svelte đã gây ấn tượng với tôi nhưng vẫn chưa đủ để nắm lấy nó đầy đủ.

Svelte 3.x

22 tháng 4 năm 2019 – Svelte 3: Suy nghĩ lại về phản ứng là bài đăng trên blog đã chờ đợi.

Xin vui lòng dành chút thời gian để đọc bài đăng trên blog và xem video – đó là về bảng tính nhưng tôi hứa đó là niềm vui ?

Tại sao điều này lại trở nên lớn như vậy? Đối với một người, nhóm Svelte đã nói về phiên bản 3 khá nhiều và tôi muốn thấy nó hoạt động. Mặt khác, Svelte và lời hứa của nó đã kích thích tôi nhiều hơn cả React khi tôi nghe về nó lần đầu tiên.

Tôi đã cố vấn cho các nhà phát triển web vào thời điểm đó và đã dành khá nhiều thời gian để tăng tốc độ cho họ Phản ứng. Những thứ như JSX, CSS-in-JS, Redux, tạo phản ứng ứng dụng, SSR và các khái niệm khác cần phải học, hiểu và ở một mức độ nhất định được làm chủ để phát triển ứng dụng React.

Không có điều gì là cần thiết với Svelte.

  



Xin chào {name}!

App.svelte

Đủ đơn giản? Tôi đồng ý. Trên thực tế, nó rất đơn giản, tôi giới thiệu nó cho những người bạn mới biết về phát triển web.

Thật nhanh, điều gì đang xảy ra trong mã đó?

Kịch bản Thẻ là nơi logic của thành phần tồn tại.

Thẻ kiểu định nghĩa CSS của thành phần này – không có rò rỉ nào bên ngoài thành phần này, vì vậy chúng tôi có thể sử dụng một cách an toàn h1 và nó chỉ áp dụng cho thành phần này. Đó là CSS thực sự, không phải là một đối tượng Javascript giả vờ là CSS hoặc một chuỗi ký tự chuỗi giả vờ là CSS.

Ở phía dưới là HTML của thành phần. Sử dụng các biến với {myVariable} . So với JSX của React, Svelte cho phép bạn sử dụng các thẻ HTML chính xác như cho lớp thay vì forHtml className . Xem "Sự khác biệt về thuộc tính" trong tài liệu React để biết danh sách tất cả các thuộc tính không phải là HTML tiêu chuẩn.

Hãy xây dựng lại các ví dụ React

Để cho bạn biết ý tưởng của Svelte trông như thế nào so với Phản ứng lại, hãy xây dựng lại những gì được liệt kê trên https://reactjs.org/.[19459003[[19459030[AThànhphầnđơngiản

Xem đoạn mã ở trên.

Một thành phần có trạng thái

Bản demo tương tác

  

Giây: {giây}  
App.svelte

Phản ứng: 33 dòng
Svelte: 6 dòng

]

Bản demo tương tác

  

  

TODO

     
                 
App.svelte
  

      {#each mục dưới dạng mục}     
  • {item.text}
  •   {/mỗi}
TodoList.svelte

Phản ứng: 66 dòng
Svelte: 43 dòng

Bản demo tương tác

  


  


  

Đầu vào