Episode

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

Podcast: Elixir Wizards
Published: Oct 31, 2024
Duration seconds: 2898
Processing state: processed
Canonical source: https://smartlogic.fireside.fm/s13-e03-local-first-liveview-svelte-pwa
Audio: https://aphid.fireside.fm/d/1437767933/03a50f66-dc5e-4da4-ab6e-31895b6d4c9e/d9fc7e4d-0d1a-44d1-8183-0ee2048030a6.mp3
JSON: /v1/public/podcasts/elixir-wizards/episodes/creating-a-local-first-offline-enabled-liveview-pwa-with-tony-dang
Markdown: /podcast/elixir-wizards/creating-a-local-first-offline-enabled-liveview-pwa-with-tony-dang.md

Actions

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.
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.

Summary

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.

Topics

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

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

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.