E2E Reactivity - using Svelte with Phoenix LiveView

Product information




Beginner, Intermediate


Ryan is an avid technologist, with over 17 years of experience working at early-stage startups. Trained as a software engineer, he has been a co-founder of several companies, and still finds opportunities to write code when possible. As his first coding experience was writing JavaScript for web development, Ryan has closely followed the browser application ecosystem as it has evolved. 10 years ago, Ryan co-founded an enterprise SaaS startup built on Rails and jQuery. More recently, Ryan built a neobank (N26 US) and a payments company (Orum.io) with front-ends as native apps and React. Ryan’s enthusiasm for web development drives him to dabble in many emerging frameworks, and Svelte has far surpased others in the joy it brings to the developer experience.

Talk Description

In this talk, Ryan will demonstrate how to use Svelte with Phoenix LiveView to create a dramatically reactive and fast user web experience. By leveraging Svelte’s reactive component properties, combined with LiveView’s web socket assignments, page rendering and state management transforms into a fully cohesive pattern from the back end to the browser. This eliminates redundant state management split across codebases while streamlining data moving from the browser to databases. And applications that leverage Phoenix’s PubSub for updating state across multiple backend servers can trigger page re-renders across browser sessions or tabs consistently. Svelte will selectively re-render DOM elements based on which component properties are updating for a snappy user experience. Svelte also provides native support for transitions and animations, giving developers full control to create slick user experiences from the browser. Ryan will also share his delight in creating reactive properties as JavaScript variables and templating complex UIs with simple boolean and looping control structures.