thảo luận Thảo luận về Svelte/SvelteKit

tonghoangvu đã nói:

So sánh Svelte (declarative) với jQuery (imperative) rồi bảo jQuery chậm nó hơi buồn cười.

Nhấp để mở rộng...

Mình thì không thấy nó buồn cười bởi vì thực tế là nhiều dự án với legacy jQuery đang được thay thế bằng Svelte. Đương nhiên 2 libs này có cách tiếp cận khác nhau nên so sánh hơi khập khiểng, tuy nhiên bảo performance giống nhau là sai hoàn toàn.
Lấy ví dụ một giá trị state trong JS khi thay đổi, kéo theo một loạt elements bị xóa khỏi cây DOM, kèm theo một loạt elements mới đc thêm vào. Lúc này mặc dù các elements mới có cùng tag, cùng class name và thậm chí cùng id nhưng với jQuery thì các references cũ đã mất tác dụng, cách duy nhất là phải duyệt cây DOM để tìm lại, tùy vào mức độ phức tạp bên trong mỗi element để gắn lại các listener tương ứng. Với Svelte thì điều này ko cần thiết, mọi thứ xóa đi và thêm vào vẫn làm việc một cách mượt mà.
Trường hợp ko chỉ thay đổi một vài phần tử mà là cả ngàn cái, bạn có thể tưởng tượng sự khác nhau về performance.

Việc Svelte map giữa state và element là hiển nhiên, hầu như mọi framework đều thế.

Nhấp để mở rộng...

Điều này đúng, nhưng chưa đủ. Mọi framework đều làm, nhưng quan trọng là nó tối ưu đến cấp độ nào.
Ví dụ như React, bạn có một state trong App component (dark mode chẳng hạn), thường nó là root layout của mọi components bên trong. Khi state này thay đổi, nó sẽ kéo theo toàn bộ components (con cháu chắt...) bên trong đều phải render theo. Nó sẽ sinh ra những side effect ko đáng có.
Với Svelte có cùng cấu trúc components tương tự, cho dù state trong App thay đổi, chỉ một số thành phần liên quan trực tiếp với nó mới bị update, toàn bộ cây components vẫn giữ nguyên, ko hề có sự xáo trộn.
Ai cũng làm nhưng người làm tốt hơn chắc chắn sẽ có sự khác biệt.

Yaksha đã nói:

Lấy ví dụ một giá trị state trong JS khi thay đổi, kéo theo một loạt elements bị xóa khỏi cây DOM, kèm theo một loạt elements mới đc thêm vào. Lúc này mặc dù các elements mới có cùng tag, cùng class name và thậm chí cùng id nhưng với jQuery thì các references cũ đã mất tác dụng, cách duy nhất là phải duyệt cây DOM để tìm lại, tùy vào mức độ phức tạp bên trong mỗi element để gắn lại các listener tương ứng. Với Svelte thì điều này ko cần thiết, mọi thứ xóa đi và thêm vào vẫn làm việc một cách mượt mà.
Trường hợp ko chỉ thay đổi một vài phần tử mà là cả ngàn cái, bạn có thể tưởng tượng sự khác nhau về performance.

Nhấp để mở rộng...

Ví dụ đi fen, fen thay đổi state gì mà phải xóa các element rồi thêm lại? Tôi chỉ nghĩ được 1 trường hợp là update trực tiếp inner HTML thôi.
Ý tôi trong cmt trước là jQuery hoàn toàn có thể tối ưu tới mức độ của Svelte, nhưng jQuery phải tự code trong khi Svelte hoàn toàn tự động. Và cũng vì tự code nên phải handle những trường hợp rerender, update element chính xác để tối ưu, không handle thì performance tệ là tất nhiên.

Yaksha đã nói:

Điều này đúng, nhưng chưa đủ. Mọi framework đều làm, nhưng quan trọng là nó tối ưu đến cấp độ nào.
Ví dụ như React, bạn có một state trong App component (dark mode chẳng hạn), thường nó là root layout của mọi components bên trong. Khi state này thay đổi, nó sẽ kéo theo toàn bộ components (con cháu chắt...) bên trong đều phải render theo. Nó sẽ sinh ra những side effect ko đáng có.
Với Svelte có cùng cấu trúc components tương tự, cho dù state trong App thay đổi, chỉ một số thành phần liên quan trực tiếp với nó mới bị update, toàn bộ cây components vẫn giữ nguyên, ko hề có sự xáo trộn.

Nhấp để mở rộng...

Ừ, do cách React implement ngu học thôi, các framework mới hơn như Vue hay Solid đều khắc phục hết rồi, performance cũng same same.

tonghoangvu đã nói:

Ví dụ đi fen, fen thay đổi state gì mà phải xóa các element rồi thêm lại? Tôi chỉ nghĩ được 1 trường hợp là update trực tiếp inner HTML thôi.

Nhấp để mở rộng...

Ví dụ đơn giản nhất là bài toán phân trang, có một danh sách dài cần phải chia thành page 1, 2, 3...
Update inner html chỉ giải quyết đc phần cơ bản, những phần kèm theo như button, click events ko tự xử lý thì bó tay.

các framework mới hơn như Vue hay Solid đều khắc phục hết rồi

Nhấp để mở rộng...

Đúng rồi, có nhiều frameworks mới nhưng mình chỉ giới thiệu một cái nổi trội để anh em hứng thú thì tìm hiểu thôi.

Vue là hàng tàu nên vẫn bị thị trường âu mỹ kì thị ko thèm dùng, mỗi khách hàng châu Á mới dùng. Từ Vue 2 lên 3 còn có rất nhiều issues. Solid thì cộng đồng còn ít ỏi hơn cả Svelte

Yaksha đã nói:

Mấy cái hooks như useCallback(), useMemo(), useRef() chẳng phải để giải quyết performance còn gì bạn.
Còn custom hooks thì cũng gom logic lại trong một function mới bằng cách dùng lại mấy cái hooks sẵn có.
Svelte ko dùng hooks, nhưng có reactive và actions. Nếu bạn muốn tái sử dụng logic thì có thể viết function như bình thường rồi import vào, nếu liên quan đến UI thì có thể tách ra một file svelte riêng (component).

Còn nếu muốn xử lý cái check click outside như trên thì có thể kết hợp actions và listeners.
Có thể tham khảo sample này: use:clickOutside • REPL • Svelte (https://svelte.dev/repl/8031c800d7e34fd692dd18174b514e4e?version=3.49.0)

Khai báo cái clickOutside() ở một file ts/js riêng rồi cần dùng ở đâu thì chỉ việc add action đó vào thôi (use:clickOutside).

Nhấp để mở rộng...

e đang hỏi về reusable chứ ko p về performance, thanks bác về cái example kia, có vẻ mindset giống với directive của vue

Yaksha đã nói:

Ví dụ đơn giản nhất là bài toán phân trang, có một danh sách dài cần phải chia thành page 1, 2, 3...
Update inner html chỉ giải quyết đc phần cơ bản, những phần kèm theo như button, click events ko tự xử lý thì bó tay.

Đúng rồi, có nhiều frameworks mới nhưng mình chỉ giới thiệu một cái nổi trội để anh em hứng thú thì tìm hiểu thôi.

Vue là hàng tàu nên vẫn bị thị trường âu mỹ kì thị ko thèm dùng, mỗi khách hàng châu Á mới dùng. Từ Vue 2 lên 3 còn có rất nhiều issues. Solid thì cộng đồng còn ít ỏi hơn cả Svelte

Nhấp để mở rộng...

e cũng dân ngoại đạo đang tìm hiểu nextjs thì thấy Svelte này hay hay nên đổi sang, mà không biết gì lập trình tìm hiểu từ đầu nhiều cái khó hiểu quá

yangmi đã nói:

e cũng dân ngoại đạo đang tìm hiểu nextjs thì thấy Svelte này hay hay nên đổi sang, mà không biết gì lập trình tìm hiểu từ đầu nhiều cái khó hiểu quá

Nhấp để mở rộng...

Bạn cứ lên trang chủ học theo tutorial cho nó bài bản.

Hoặc cũng có một bản tiếng việt ở đây:

Còn đâu gặp lỗi gì khoai quá ko fix được thì cộng đồng Svelte vẫn ok lắm

Chuan rồi b

Mịa, nguyên React thôi mà UI framework của nó cũng hằng hà, vô số. Theo kinh nghiệm của mình cứ Reactjs + Ant design pro mà chiến. Vừa đẹp vừa nhanh.