Creating a Local-First Offline-Enabled LiveView PWA with Tony Dang
Today in the Creator’s Lab, Tony Dang joins Elixir Wizards Sundi Myint and Owen Bickford to break down his journey of creating a local-first, offline-ready to-do app using Phoenix LiveView, Svelte, and CRDTs (Conflict-free Replicated Data Types). Tony explains why offline functionality matters and how this feature can transform various apps. He shares insights on different libraries, algorithms, and techniques for building local-first experiences and highlights the advantages of Elixir and Phoenix LiveView. Tony also shares his go-to tools, like Inertia.js for connecting Phoenix backends with JavaScript frontends, and favorite Elixir packages like Oban, Joken, and Hammer, offering a toolkit for anyone building powerful, adaptable applications. Topics discussed in this episode: Tony Dang's background from mechanical engineer to web developer Building an offline-enabled to-do app with Phoenix LiveView and Svelte CRDTs: Conflict-free Replicated Data Types for merging changes offline How to make a LiveView app work offline Sending full state updates vs. incremental updates for performance optimization Inspiring others through open-source projects and community contributions Learning vanilla Phoenix and Channels to understand LiveView better Handling stale CSRF tokens when reconnecting to a LiveView app offline Exploring service workers and browser APIs for managing offline connectivity Balancing the use of JavaScript and Elixir in web development Fostering a supportive and inspiring Elixir community Links mentioned: Working in Elevators: How to build an offline-enabled, real-time todo app w/ LiveView, Svelte, & Yjs Tony’s Twitter: https://x.com/tonydangblog https://liveview-svelte-pwa.fly.dev/ https://github.com/tonydangblog/liveview-svelte-pwa CRDT: https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type PWA: https://en.wikipedia.org/wiki/Progressive_web_app https://github.com/josevalim/sync https://github.com/sveltejs/svelte https://github.com/woutdp/live_svelte https://github.com/yjs/yjs https://github.com/satoren/y_ex https://github.com/y-crdt/y-crdt https://linear.app/ https://github.com/automerge/automerge https://hexdocs.pm/phoenix/1.4.0-rc.1/presence.html Vaxine, the Rich CRDT Database for ElixirPhoenix Apps | James Arthur | Code BEAM America 2022 https://github.com/electric-sql/vaxine Hybrid Logical Clocks https://muratbuffalo.blogspot.com/2014/07/hybrid-logical-clocks.html https://en.wikipedia.org/wiki/256_(number) CSRF Tokens in LiveView https://hexdocs.pm/phoenixliveview/Phoenix.LiveView.html#getconnectparams/1 https://hexdocs.pm/phoenix/channels.html Authentication with Passkeys Talk by Tony https://www.meetup.com/dc-elixir/ https://github.com/rails/rails https://github.com/facebook/react-native https://github.com/vuejs https://github.com/laravel/laravel https://hexdocs.pm/phoenixliveview/js-interop.html https://github.com/inertiajs https://github.com/inertiajs/inertia-phoenix https://savvycal.com/ https://github.com/wojtekmach/req https://github.com/oban-bg/oban https://github.com/joken-elixir/joken https://github.com/ExHammer/hammerSpecial Guest: Tony Dang.