macOS Web: Why I moved from React to Svelte
summary
A full web-based macOS UI migrates from React to Svelte and shrinks the app from 146 KB down to 28.5 KB, a >5x reduction. Replacing Snowpack with the wheat bundler cuts many network requests to two and trims ~16 KB; swapping React for Preact saves ~37 KB; removing styled-components for SCSS modules and adding code-splitting drops initial load to ~62 KB. Framer Motion (≈32 KB) is replaced by Svelte motion for smoother dock and window animations, and dependencies fall by ~3.7x.
AI-written summary · about
chapters (12)
- 0:00Project intro and background
- 1:43Initial React challenges
- 3:29Switching to Vite and Preact
- 4:46Optimizing bundle size
- 6:05Goodbye style components
- 8:15Code splitting and summary
- 9:42Migrating from React to Svelte
- 10:56Svelte migration process
- 13:19Svelte code benefits
- 14:26Svelte motion and animations
- 17:10Final results and takeaways
- 21:05Conclusion
related talks
29mThe Return of 'Write Less, Do More'
48mSimplify your applications by making them more SVELTE
29mGet Your Web App Development in Shape with SvelteKit
40mSvelte, cybernetically enhanced web apps
25mSimplify Web App Development with Svelte
08mWhy Svelte is the best framework for beginner and advanced developers alike
36mSvelte - Web App Development Reimagined
53mSvelte, cybernetically enhanced web apps