Elixir Wizards

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

Listen Later

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.

    ...more
    View all episodesView all episodes
    Download on the App Store
    Elixir WizardsBy SmartLogic LLC
    • 4.9
    • 4.9
    • 4.9
    • 4.9
    • 4.9

    4.9

    22 ratings