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

Page: https://stenobird.com/podcast/elixir-wizards/creating-a-local-first-offline-enabled-liveview-pwa-with-tony-dang
Text version: https://stenobird.com/podcast/elixir-wizards/creating-a-local-first-offline-enabled-liveview-pwa-with-tony-dang.md
Podcast: [Elixir Wizards](https://stenobird.com/podcast/elixir-wizards)
Published: 2024-10-31T10:00:00+00:00
Episode link: https://smartlogic.fireside.fm/s13-e03-local-first-liveview-svelte-pwa
Audio file: https://aphid.fireside.fm/d/1437767933/03a50f66-dc5e-4da4-ab6e-31895b6d4c9e/d9fc7e4d-0d1a-44d1-8183-0ee2048030a6.mp3
Processing state: processed
JSON: https://stenobird.com/v1/public/podcasts/elixir-wizards/episodes/creating-a-local-first-offline-enabled-liveview-pwa-with-tony-dang
Duration seconds: 2898

## Resource

Tony Dang demonstrates how to build a local-first, offline-ready PWA using Phoenix LiveView, Svelte, and CRDTs. The discussion explores the technical challenges of synchronizing state and managing conflicts in distributed web applications.

## Highlights
- Main idea: Local-first architecture uses CRDTs (Conflict-free Replicated Data Types) to ensure seamless data merging when devices reconnect to the network
- Practical takeaway: Using battle-tested libraries like Yjs is preferable to implementing custom 'last-write-wins' algorithms to handle complex edge cases
- Failure mode: Relying on system clocks for synchronization is unreliable due to clock drift; hybrid logical clocks provide a more consistent ordering of events
- Technical insight: Integrating Svelte with Phoenix LiveView via Inertia.js allows for high-performance, client-side reactivity while maintaining a powerful Elixir backend
- Tooling recommendation: Essential Elixir packages for modern apps include Oban for background jobs, Joken for JWT handling, and Hammer for rate limiting

## Topics

Phoenix LiveView, CRDTs, Local-first software, Svelte, Elixir, Progressive Web Apps, Distributed Systems, Yjs

## Chapters
- 1:00 — Guest Introduction: Tony Dang shares his transition from mechanical engineering to Elixir development and his early experiences with the community.
- 4:40 — The Motivation for Offline Support: The practical need for offline functionality is illustrated through the challenge of maintaining app usability in low-connectivity environments like elevators.
- 8:10 — Pushing LiveView Boundaries: A discussion on the technical feat of implementing complex offline capabilities in a technology often viewed as server-centric.
- 15:40 — Local Databases and State Conflicts: Exploring the trade-offs of writing to local databases, specifically the increased complexity of managing conflicting states.
- 23:00 — CRDTs and Synchronization Algorithms: An analysis of different synchronization strategies, including the move from custom algorithms to the Yjs library.
- 41:05 — The Elixir Ecosystem and Tooling: Tony shares his preferred stack, including Inertia.js, Oban, Joken, and Hammer, for building robust applications.

## Actions

- request_transcript: `POST https://stenobird.com/v1/public/podcasts/elixir-wizards/episodes/creating-a-local-first-offline-enabled-liveview-pwa-with-tony-dang/transcription-requests` — Idempotently request low-priority transcript generation for this episode.
- read_markdown: `GET https://stenobird.com/podcast/elixir-wizards/creating-a-local-first-offline-enabled-liveview-pwa-with-tony-dang.md` — Read the agent-friendly Markdown representation of this episode resource.

A page view does not enqueue transcription. Agents should invoke `request_transcript` explicitly when they need this episode processed.

## Transcript

Full transcripts are not published on public pages unless there is a clear rights basis.