Elixir Mentor Wout De Puysseleir on Svelte inside Phoenix LiveView
21 snips
Apr 6, 2024 Wout De Puysseleir, a full-stack dev behind LiveSvelte who works with Elixir, Phoenix and Svelte. He explains why he built LiveSvelte to add client interactivity to LiveView. They cover end-to-end reactivity, how LiveSvelte maps props to LiveView assigns, slot interoperability challenges, deployment/build needs, and demos like a multiplayer game and PWA use cases.
AI Snips
Chapters
Transcript
Episode notes
LiveSvelte Began As A Hackathon Project
- Wout started LiveSvelte during a Svelte hackathon to fill an integration gap he experienced.
- The project grew fast and later received strong community interest and GitHub stars.
Svelte's Compile-Time Efficiency
- Svelte compiles components away so the browser only receives needed code, reducing bundle size.
- Server-side rendering with Node adds latency because LiveSvelte calls Node on demand for SSR.
Pass Data As Encoded Props
- Do pass LiveView assigns as JSON props (base64-encoded) into Svelte components and decode them in a LiveView hook.
- Then update Svelte props on subsequent patches so Svelte stays in sync with the server.