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

Yaksha · 20/12/23

Dạo này thấy các framework front-end phát triển ghê quá, cứ như trăm hoa đua nở

.
Vue (Nuxt), React (Next), Angular update liên tục.
2023 kết thúc còn có thêm ba gương mặt nổi trội là Svelte, Solid, Qwik

Tìm hiểu qua thì thấy Svelte khá tiềm năng. Code khá tương đồng với vanilla JS, nên anh em nào cứng JS rồi thì làm quen trong vài nốt nhạc.
Không biết có bro nào ở đây đã ứng dụng Svelte cho production chưa ạ?

Luôn tiện thì thấy cái SvelteKit khá hay nên mình code luôn cái tool nho nhỏ. Kiểu vừa đọc phải vừa thực hành luôn cho dễ nhớ, làm BE nhiều quá lại quên hết html/css.
Share với anh em đôi khi cần: What's up! | DevToys 24 (https://devtoys24.com/)

lareina · 20/12/23

code so với react ngắn hơn khá nhiều phải không fen

Yaksha · 20/12/23

lareina đã nói:
code so với react ngắn hơn khá nhiều phải không fen

Đúng rồi, code ngắn gọn hơn, file build ra cũng cực kỳ nhỏ, có vài KB.
SvelteKit còn có cái form actions để submit form kiểu truyền thống. Nên nếu website chỉ có các form nhập liệu kiểu CRUD, không cần animation thì có thể chạy không cần JS luôn.

Nói chung khá là ưng

ToBe_or_NotToBe · 20/12/23

mình là thằng design biết html css js thuần thui chưa đụng react bao giờ, học thằng này trước thì thấy nó rất là tự nhiên luôn, cứ như html css js thuần vậy. Có xem qua thằng react với jsx thì đúng như kiểu ngoài hành tinh khác về vậy :amazed:

dùng sveltekit tạo cái CV đêy mấy thím xem thử :big_smile:

Nguyen Le's Resume

I am a skilled UI/UX designer and FE developer based in Ho Chi Minh City

cv-trongnguyen24.vercel.app

Einherjar006 · 20/12/23

Yaksha đã nói:
Đúng rồi, code ngắn gọn hơn, file build ra cũng cực kỳ nhỏ, có vài KB.
SvelteKit còn có cái form actions để submit form kiểu truyền thống. Nên nếu website chỉ có các form nhập liệu kiểu CRUD, không cần animation thì có thể chạy không cần JS luôn.

Nói chung khá là ưng

Đã dùng Svelte (ko dùng SvelteKit) làm internal tool cho công ty cho khác mấy team khác (React). Ưu điểm nhỏ gọn, nhược điểm là thiếu component thông dụng đủ tốt như MultiSelect, Autocomplete. Mỗi lần customize component event thì khá thốn, do ko có lifecycle rõ ràng như React. Component ko có state, tương tự như React stateless component, nhưng React thì nhiều escape hatch hơn. À đấy là Svelte 3, còn Svelte 5 thì có thể khác nhưng nhìn rune syntax rõ chán.

Nếu chưa có Svelte 5 thì tui còn recommend mọi người được. Còn giờ thì coi nó như another React “killer” thôi.

devquenok · 20/12/23

Yaksha đã nói:
Đúng rồi, code ngắn gọn hơn, file build ra cũng cực kỳ nhỏ, có vài KB.
SvelteKit còn có cái form actions để submit form kiểu truyền thống. Nên nếu website chỉ có các form nhập liệu kiểu CRUD, không cần animation thì có thể chạy không cần JS luôn.

Nói chung khá là ưng

Bác phải build 1 dự án lớn bằng nó thì mới lòi ra vài thứ, nào là third-party support ít, công đồng cũng đang nhỏ, ... Trước có làm dự án với thăng này, lúc đầu thấy tiện, lao vào code luôn k cần phải học nhiều, đến lúc làm mấy cái drag and drop, business phức tạp, lúc đó cũng mấp thời gian vãi.

Yaksha · 20/12/23

Chuẩn rồi fen.
Nếu nói về cộng đồng phát triển thì ko ai qua được React vào thời điểm này. Nên gọi nó là React Killer thì quá xa vời. Component React đủ kiểu chỉ cần search google chút là có hết.

Tuy nhiên React cũng có nhược điểm, từ chính Jsx và cái virual DOM của nó. Việc tích hợp React với các thư viện khác khá khó khăn.

Svelte thì ngược lại, cộng đồng đang nhỏ và ít thư viện. Nhưng tích hợp với các libs/framework khác rất dễ dàng. Kiểu như project nào đang có đống legacy với jQuery, giờ add Svelte vào rồi gọi qua gọi lại quá easy. Mình nghĩ các anh em làm Rails, Laravel,... sẽ thích món này

Yaksha · 20/12/23

ToBe_or_NotToBe đã nói:
dùng sveltekit tạo cái CV đêy mấy thím xem thử

Nguyen Le's Resume

I am a skilled UI/UX designer and FE developer based in Ho Chi Minh City

cv-trongnguyen24.vercel.app

Đẹp đó bro, nhưng đang dùng cái animation gì chạy ngốn CPU quá. Vào thấy máy chậm hẳn

ToBe_or_NotToBe · 20/12/23

Yaksha đã nói:
Đẹp đó bro, nhưng đang dùng cái animation gì chạy ngốn CPU quá. Vào thấy máy chậm hẳn

do làm gấp quá ấy thím, không có tối ưu, cái nặng là css animation mấy cái noise làm bằng png :big_smile:

TheSun89 · 20/12/23

Mấy cái viết ts thì giống hệt react-native. Không thấy có ưu điểm khá hơn để thay đổi blazor web assembly :LOL:

. Cá nhân.

somalis · 20/12/23

ToBe_or_NotToBe đã nói:
mình là thằng design biết html css js thuần thui chưa đụng react bao giờ, học thằng này trước thì thấy nó rất là tự nhiên luôn, cứ như html css js thuần vậy. Có xem qua thằng react với jsx thì đúng như kiểu ngoài hành tinh khác về vậy

dùng sveltekit tạo cái CV đêy mấy thím xem thử

Nguyen Le's Resume

I am a skilled UI/UX designer and FE developer based in Ho Chi Minh City

cv-trongnguyen24.vercel.app

Browser trên di động load không nổi luôn

Gửi từ Xiaomi Redmi 6 bằng vozFApp

ToBe_or_NotToBe · 20/12/23

somalis đã nói:
Browser trên di động load không nổi luôn

Gửi từ Xiaomi Redmi 6 bằng vozFApp

bỏ cái noise ra rồi thím, giờ chắc ít lag :angry:

fkphua3 · 20/12/23

thảo luận - Svelte <3 TypeScript (https://voz.vn/t/svelte-3-typescript.90996/) trước có topic này mà bỏ rồi thì phải

abola · 20/12/23

Càng đơn giản, dễ học thì càng phức tạp lúc mở rộng ứng dụng thôi.
Cứ tán Angular, Vue, React (Next).

Yaksha · 20/12/23

fkphua3 đã nói:
thảo luận - Svelte <3 TypeScript (https://voz.vn/t/svelte-3-typescript.90996/) trước có topic này mà bỏ rồi thì phải

Wow, anh em tiếp cận sớm nhỉ. Từ cái thời còn Sapper.
Bây giờ thì SvelteKit đã khá ổn định rồi, code khá là thích. Svelte cũng support TS đầy đủ, có cả extension cho VSCode để format. Combo có vẻ cũng ko thiếu gì nữa rồi.

proxyy · 20/12/23

hôm trước ngồi nghịch thử , thấy viết reusable như hook bên react hơi khó, ae dùng gì để viết lại vậy, thấy mấy cái example là dùng store, mà mindset kiểu này thấy ko quen

Yaksha · 23/12/23

proxyy đã nói:
hôm trước ngồi nghịch thử , thấy viết reusable như hook bên react hơi khó, ae dùng gì để viết lại vậy, thấy mấy cái example là dùng store, mà mindset kiểu này thấy ko quen

Concept của Svelte khác hẳn với React.
Ở trong React, tất cả đều được đóng gói vào component, mỗi khi có một state thay đổi thì ko phải mỗi state đó được update lại mà toàn bộ component đều phải render theo.
Thế nên React phải đẻ ra đủ thể loại hooks, mục đích nhằm giảm thiểu công việc phải làm mỗi lần render. Ngoài ra còn phải dùng virtual DOM để tính toán xong hết mới render nên thực chất thì React ko nhanh như quảng cáo, đc cái này mất cái kia. So với các framework hoạt động trên DOM như Angular cũng một chín một mười cả thôi.

Svelte đi theo một hướng khác, tất cả code lúc build đều được compiled về dạng event-listener cả rồi, mỗi khi state thay đổi thì chỉ có các thành phần tương ứng sử dụng state này mới update thôi. Trong bundle của Svelte hoàn toàn ko cần runtime nữa nên nó nhẹ hơn nhiều.

Hiểu đơn giản thì Svelte đi theo hướng của vanilla JS hay jQuery, điểm khác biệt là lúc render nó giữ luôn ref của từng state <-> elements. Lúc state thay đổi nó update ngay lại trên DOM. jQuery thì cùi bắp hơn bởi vì nó hoạt động độc lập, lúc update phải parse toàn bộ cây HTML, tìm tới id, hoặc class, hoặc element tương ứng mới update đc nên hiệu suất rất kém. Svelte cũng real DOM nhưng siêu nhanh.

Về quản lý state cũng ko cần phải phức tạp kiểu context hay Redux như trong React nữa. Tất cả các global state bạn có thể lưu vào trong store (gồm 2 loại readable và writable). Sau đó cần sử dụng state này ở đâu chỉ cần .subscribe() cái store đó, nó sẽ tự động update. Ở đâu cần thay đổi thì chỉ cần dùng .set() hoặc .update(). Thực chất bên trong nó dùng rxjs, ai làm Angular rồi thì nói cái hiểu ngay.

proxyy · 23/12/23

Yaksha đã nói:
Thế nên React phải đẻ ra đủ thể loại hooks, mục đích nhằm giảm thiểu công việc phải làm mỗi lần render

fen đang nói gì vậy, custom hooks của react là để reusable chứ có liên quan gì đến performance đâu mà giảm lần render, svelte nó cũng mindset component thôi, chỉ là cơ chế render nó khác, cụ thể luôn là tui có logic check click outside 1 cái div, trong react tui viết cái custom hook để reusable, tui muốn hỏi trong svelte thì mình reuse logic này như thế nào, vue có mixin, vue 3 là composition api như hook ko tính tiền, angular inject service vào xử lý, nên tui ms thắc mắc bên svelte thui

Yaksha · 23/12/23

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).

tonghoangvu · 24/12/23

Yaksha đã nói:
Hiểu đơn giản thì Svelte đi theo hướng của vanilla JS hay jQuery, điểm khác biệt là lúc render nó giữ luôn ref của từng state <-> elements. Lúc state thay đổi nó update ngay lại trên DOM. jQuery thì cùi bắp hơn bởi vì nó hoạt động độc lập, lúc update phải parse toàn bộ cây HTML, tìm tới id, hoặc class, hoặc element tương ứng mới update đc nên hiệu suất rất kém. Svelte cũng real DOM nhưng siêu nhanh.

So sánh Svelte (declarative) với jQuery (imperative) rồi bảo jQuery chậm nó hơi buồn cười. Bỏ qua các optimization với các tính toán linh tinh thì performance 2 thằng này sẽ không khác nhau nhiều.
Việc Svelte map giữa state và element là hiển nhiên, hầu như mọi framework đều thế. Ngược lại với jQuery thì phải tự làm thủ công. Trong jQuery (và cả JS thuần) các element get ra hoàn toàn có thể reuse lại, làm gì có chuyện parse DOM lại từ đầu như anh nói.

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

Senior Member

Member

Senior Member

Đã tốn tiền

Member

Senior Member

Senior Member

Senior Member

Đã tốn tiền

Senior Member

Senior Member

Đã tốn tiền

Senior Member

Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Member

Chủ đề tương tự

Thống kê chủ đề

Chia sẻ trang này