Chuyển từ Vue 2 sang Svelte

• Đã sử dụng Vue 2 trong 2 năm, nhưng vì giờ không còn được bảo trì nữa nên đã quyết định chuyển đổi
• Đã cân nhắc giữa Vue 3 và Svelte, rồi tổng hợp lại lý do chọn Svelte

So sánh Svelte và Vue 3

• Trong khảo sát dành cho nhà phát triển JS, tỷ lệ giữ chân của Svelte tốt hơn
• Svelte
  • Hỗ trợ Type tốt hơn và hạn chế truy cập toàn cục
  • (Theo quan điểm cá nhân) cú pháp thanh lịch hơn và thân thiện với người dùng hơn
  • Có thể dùng trực tiếp mà không cần thêm HTML bổ sung như <template>
  • Style tự động được xử lý theo scope
  • Không cần thuộc tính tính toán để cập nhật dữ liệu. Chỉ cần viết hàm => là được
  • Việc thêm plugin JS thuần đơn giản hơn
  • Biên dịch mà không cần virtual DOM. Tối ưu hơn và có thể hoàn thành tác vụ nhanh hơn
  • Có thể tự động cập nhật dữ liệu thông qua các biến đã khai báo

Svelte cũng có nhược điểm

• Cộng đồng tương đối nhỏ hơn (vì ra mắt vào năm 2019)

Đã chuyển đổi theo cách nào?

• Thời điểm: tiến hành migration vào tháng 8, khi số người dùng ứng dụng giảm đi
• Thời gian: mất 2 tuần để chuyển toàn bộ file từ Vue sang Svelte
• Số lượng nhà phát triển: 2 frontend developer làm toàn thời gian trong 2 tuần, và thêm 1 người làm toàn thời gian trong 1 tuần, tổng cộng 3 người
• Quy trình làm việc: giao ticket cho các developer bằng Notion, viết component mới trong Storybook, mỗi developer viết lại các trang đã được phân công bằng Svelte
• Vì là startup nên không có tới hàng nghìn file cần xử lý, nên việc chuyển đổi khá đơn giản
  Tuy nhiên, vì đã chấp nhận rủi ro chuyển đổi khi SvelteKit vẫn còn đang được phát triển rất tích cực, nên chỉ sau 1 tháng chuyển sang đã phải thực hiện một thay đổi lớn. Dù vậy, đội ngũ SvelteKit đã cung cấp hướng dẫn migration rất tốt nên có thể dễ dàng thích nghi với bản cập nhật mới. Đến tháng 9, đội ngũ SvelteKit thông báo framework cuối cùng đã bước vào giai đoạn RC, nên giờ mức độ ổn định cũng được đảm bảo
• Cấu trúc file & component: "folder-based routing" của SvelteKit mang lại rất nhiều lợi ích. Có thể chia mỗi trang thành các trang con, rồi tái sử dụng các tên biến chuẩn như "loading", "submit". Ngoài ra, layout được tích hợp vào các route liên quan nên việc truy cập đơn giản hơn.

Đã đạt được gì?

• Hiệu năng được cải thiện và mượt mà hơn
• Trải nghiệm developer tốt hơn
• Thực thi code nhanh hơn
• Vận hành và triển khai SSR
• Code ngắn gọn và dễ hiểu
• Khắc phục lỗi kiểm tra kiểu