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.