Creating a Local-First Offline-Enabled LiveView PWA with Tony Dang

Elixir Wizards

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.