Creating a Local-First Offline-Enabled LiveView PWA with Tony Dang
Oct 31, 2024
auto_awesome
Tony Dang, a web developer and former mechanical engineer from the Bay Area, shares his fascinating journey into creating a local-first, offline-enabled to-do app using Phoenix LiveView and Svelte. He dives into the significance of offline functionality and CRDTs for seamless user experiences. Tony details his go-to tools like Inertia.js and highlights techniques for optimizing performance and managing state updates. His insights on balancing JavaScript and Elixir also inspire budding developers to contribute to open-source projects in the thriving Elixir community.
Tony Dang emphasizes the significance of offline functionality in applications, demonstrating its potential to enhance productivity tools like to-do apps.
The integration of CRDTs allows seamless syncing of offline changes, effectively managing data states and enabling real-time collaboration in applications.
Deep dives
Tony Deng's Background and Journey to Elixir
Tony Deng transitioned from being a mechanical engineer to a web developer, self-teaching programming during the pandemic. Initially, he started with JavaScript and explored various languages before discovering Elixir, noting that he began his Elixir journey on October 25th of the previous year. His first interaction with the Elixir community left a positive impression when he made a pull request and received a quick response from its creator, Jose Valim. This warm introduction drove Tony to deepen his engagement with Elixir, leading him to build significant applications using this technology.
Creating an Offline To-Do App with Phoenix LiveView
Tony developed a to-do app utilizing Phoenix LiveView, focusing on making it functional even without internet connectivity. His motivation for this feature stemmed from frequent loss of internet while commuting in his apartment complex, highlighting a practical need for offline capabilities in productivity tools. He implemented Conflict-Free Replicated Data Types (CRDTs) to ensure that changes made offline could later sync seamlessly once reconnected, addressing the challenge of managing different states during offline periods. Despite its simplicity, the application serves as a personal tool for Tony, reflecting his commitment to creating solutions for real-world problems.
Exploring CRDTs and Their Utility
CRDTs, or Conflict-Free Replicated Data Types, are integral to Tony's offline app, enabling multiple users to collaborate without conflict resolution issues when reconnected to the internet. He explained the concept using the example of collaborating on a Google Doc offline, where each contributor's changes need to be merged without conflicts upon reconnection. While Tony primarily utilized the last write win strategy in his implementation, he acknowledged the existence of various CRDT algorithms that cater to different application needs. His choice of YJS as a foundational library showcases a desire for efficiency and reliability in managing concurrent data states.
Integrating JavaScript with Elixir for Enhanced Functionality
Tony emphasized the importance of integrating JavaScript within Elixir applications, particularly when needing to push the boundaries of what LiveView can accomplish, especially in offline scenarios. In his to-do app, he used Svelte in combination with JavaScript to enrich user experience and overcome LiveView's WebSocket limitations in offline situations. He highlighted the balance between utilizing Elixir's robust WebSocket capabilities and JavaScript's extensive ecosystem, which provides libraries and tools that enhance developer productivity. This integration approach enables developers to harness the strengths of both languages while crafting comprehensive solutions.
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