Có gì mới trong Svelte 4?

Vào tháng 6 năm 2023, Svelte đã công bố bản phát hành ổn định gần đây nhất, phiên bản 4. Bản cập nhật Svelte 4 chủ yếu là bản phát hành bảo trì của Svelte 3, nhằm tạo tiền đề cho thế hệ tiếp theo của Svelte phát hành với tên gọi Svelte 5.

Svelte 4 bổ sung nhiều cải tiến khác nhau cho hệ sinh thái Svelte, bao gồm thiết kế lại trang web, đặt chuyển đổi cục bộ làm mặc định, cải thiện hỗ trợ thành phần web và chuyển từ TypeScript sang JSDoc.

1. Thiết kế lại trang web mảnh mai

Svelte 4 xuất hiện cùng với những cải tiến cho trang web chính thức của Svelte. Giao diện mới của trang web thật tuyệt vời, với các tài liệu TypeScript được cải thiện, tùy chọn chế độ tối và trải nghiệm người dùng nói chung được cải thiện trên các thiết bị.

Trang web Svelte hiện có REPL nâng cao cho phép bạn thử nghiệm mã Svelte trực tiếp trong trình duyệt.

Ngoài ra, tất cả các liên kết hướng dẫn Svelte hiện trỏ đến trải nghiệm mới của người học Svelte, trong khi các hướng dẫn cũ có sẵn cho người dùng Safari 16.3 trở về trước.

2. Chuyển tiếp cục bộ là mặc định

Hãy tưởng tượng trải nghiệm đau đớn khi phải giải quyết các chuyển đổi CSS sau khi xem trang của bạn tải lâu hơn dự kiến ​​vì bạn đã sử dụng các chuyển đổi Svelte.

Thông thường, quá trình chuyển đổi diễn ra khi bạn hủy một khối cha. Bạn có thể ghi đè hành vi này bằng |địa phương bổ nghĩa. Điều này làm cho quá trình chuyển đổi chỉ chạy khi bạn phá hủy khối chứa thành phần đích. Trong Svelte 4, điều này |địa phương công cụ sửa đổi được đặt làm mặc định cho quá trình chuyển đổi.

Trong đoạn trích bên dưới, một chuyển tiếp trang chiếu được thêm cục bộ vào div yếu tố:

  <div transition:slide|local> {item}</div> 

3. Hỗ trợ các thành phần web được cải thiện

Svelte luôn đề cao khả năng sử dụng lại và khả năng bảo trì, do đó nó hỗ trợ liên tục cho các thành phần web. Các thành phần web cho phép bạn tạo các phần tử HTML tùy chỉnh có thể tái sử dụng với các kiểu và hành vi được thêm vào.

Svelte 4 thay đổi cách nó tạo ra các thành phần web, loại bỏ các lỗi và sự không nhất quán. Những thay đổi này bao gồm:

• Xuất khẩu tạo ra một chỗ dựa thành phần, giúp người tiêu dùng thành phần có thể truy cập được.
• Bài tập là phản ứng. Để thay đổi trạng thái của một thành phần và kích hoạt kết xuất lại, hãy gán nó cho một biến được khai báo cục bộ.
• Sử dụng $ ký hiệu ở đầu một câu lệnh để đánh dấu nó là một câu lệnh phản ứng. Các câu lệnh phản ứng chạy sau mã tập lệnh khác và trước khi đánh dấu thành phần hiển thị, bất cứ khi nào các giá trị phụ thuộc thay đổi.
• Khi tạo các đối tượng cửa hàng, thêm tiền tố vào cửa hàng bằng $ để cho phép truy cập phản ứng vào một giá trị.
• Đặt thuộc tính ngữ cảnh của thẻ tập lệnh thành mô-đun làm cho tập lệnh chạy một lần khi mô-đun đánh giá lần đầu thay vì cho từng phiên bản thành phần.

4. Chuyển từ TypeScript sang JSDoc

JSDoc là một công cụ tài liệu hỗ trợ thêm chú thích loại và nhận xét vào mã JavaScript.

Xem xét rằng JSDoc đánh lừa các nhà phát triển ghi lại mã của họ, quá trình di chuyển này nhằm mục đích khuyến khích nhiều nhà phát triển Svelte hình thành thói quen ghi lại mã của họ một cách chính xác. Cơ sở mã JavaScrpt được ghi chép đầy đủ sẽ yêu cầu ít hoặc không cần kiểm tra kiểu.

Nếu bạn chưa quen với TypeScript, bạn nên khám phá TypeScript và khám phá lý do tại sao các nhà phát triển thích nó.

Di chuyển sang Svelte 4

Svelte 4 đã nâng cao hiệu suất và phát triển hợp lý, rất tuyệt vời để xây dựng các ứng dụng web hiệu suất cao. Bản phát hành mới này cũng sẽ khuyến khích tài liệu viết mã tốt hơn khi chuyển sang JSDoc.

Svelte tiếp tục cải thiện và mặc dù nó không phải là một khuôn khổ mà mọi nhà phát triển đều quen thuộc, nhưng những người đang khen ngợi nó rất nhiều.