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

    More shows like Elixir Wizards

    View all
    Software Engineering Radio by se-radio@computer.org

    Software Engineering Radio

    271 Listeners

    The a16z Show by Andreessen Horowitz

    The a16z Show

    1,085 Listeners

    Soft Skills Engineering by Jamison Dance and Dave Smith

    Soft Skills Engineering

    288 Listeners

    Thinking Elixir Podcast by ThinkingElixir.com

    Thinking Elixir Podcast

    32 Listeners