Elixir Wizards is an interview-format podcast, focused on engineers who use the Elixir programming language. Initially launched in early 2019, each season focuses on a specific topic or topics, with each interview focusing on the guest's experience and opinions on the topic. Elixir Wizards is hosted by Eric Oestrich and Sundi Myint of SmartLogic, a dev shop that’s been building custom software since 2005 and running Elixir applications in production since 2015. Learn more about how SmartLogic uses Phoenix and Elixir. (https://smartlogic.io/phoenix-and-elixir?utm_source=podcast)
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/hammer
Special Guest: Tony Dang.