SvelteJS Under the Hood

on YouTube ↗01h 14m

" summary

Describes how Svelte compiles .svelte files into a JavaScript class with generated functions (e.g., create_fragment) and only small per-need helper imports instead of a large runtime. Covers Svelte’s reactivity implementation—assignments are wrapped with an invalidate helper and updates are batched via a Promise microtask—and shows server rendering produces plain HTML. Quantifies the trade-off: larger generated code per component but far fewer runtime abstractions, smaller shipped helpers, and precise DOM patches that update only the changed keys.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 3:46Svelte runtime myths
3. 7:19Svelte to JS compilation
4. 13:22Virtual DOM alternative
5. 23:03Why Svelte disappears
6. 35:52Code optimization
7. 45:28Svelte reactivity
8. 54:24Async reactivity
9. 1:04:58Svelte compiler
10. 1:13:33Conclusion & Q&A

" related talks

• 24mSvelte: the last framework we need?Alexander Esselink · Frontend Love 2020
• 40mSvelte is Fast and Makes You FasterSteven Waterman · NE-RPC Back 2 Sk00l 2020
• 38mLooking into the Svelte CompilerTan Li Hau · CityJS Conference 2020
• 40mSvelte, cybernetically enhanced web appsDevlin Duldulao · NDC London 2020
• 38mBuild your own Svelte 5Tan Li Hau · CityJS New Delhi 2024
• 08mWhy Svelte is the best framework for beginner and advanced developers alikeStephanie Dietz · Svelte Summit Fall 2021
• 36mSvelte - Web App Development ReimaginedMark Volkmann · GOTOpia Chicago 2021
• 53mSvelte, cybernetically enhanced web appsDevlin Duldulao · NDC Sydney 2020