tonydang
Hi everyone! I’m new to the forums and new to Elixir in general. To learn Elixir, I recently just completed my first app. It’s a todo app built with Phoenix LiveView, but with a twist, it can also work offline 
By using the LiveSvelte package, I was able to use LiveView to render Svelte components which allows for offline-support. I know an offline app was not what LiveView was intended for, but I thought it was neat that it was possible to still use LiveView in such an app.
I haven’t gotten the chance to dive deeper into Phoenix Channels yet so I’m not sure if the app would perform better just using that instead. However, so far the app has been working well for me and the DX of using LiveView has been great. Anyhow, I thought I would share in case anyone else is interested in building offline-enabled apps with LiveView 
Here’s a video I made walking through how I made the app:
Source code:
Live Demo:
Any questions and feedback welcomed!
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
arcanemachine
Very cool. I tried it out and it works as promised.
Would you mind putting a license on the repo so that I know what I’m allowed to do with the code?
tonydang
Thanks for checking out the app!
And yes, I just added an MIT license. Please feel free to use the code as you please
hellosmithy
Very cool to see a CRDT example with Elixir. This was on my bucket list of things to try out. Thanks for sharing.
phi
Awesome work. Would you mind adding a .env.example for us newbies?
tonydang
Absolutely, I just added a
.env.exampleto the repo:https://github.com/tonydangblog/liveview-svelte-pwa/blob/main/.env.example
I included some comments in the file for more explanation, but in short, it holds the two variables:
JS_BACKEND_URL- The server I’m using to 1. run Yjs server-side, and 2. send emails via Cloudflare Workers.JWT_PRIVATE_KEY- Private key used to sign JWTs needed when sending requests to the JS backend server.Please see the comments in the file for more info and feel free to let me know if you have any questions!
phi
Cheers! Will try to get the Yjs backend setup myself, hopefully no issues.
nico_amsterdam
Very good explanation of the offline enabled app and it’s concepts.
tonydang
Hi all! I wanted to give an update on this project-
In my video, I discussed using Yjs on the server-side in order to merge the states of the various clients. This worked, but was not ideal since it required running JS from Phoenix or from a separate JS backend server (which is what I did for my project via a Cloudflare Worker).
Since then, I have found out that it is not necessary at all to run Yjs on the server in order to sync the clients. I have updated my repo to no longer need a separate JS backend. I also made a video explaining how it is possible to do so. You can check it out here if interested:
mindreframer
Thanks! That’s quite interesting, but it is clearly problematic for any real-life cases with non-trivial amount of data. I think our best bet as community would be to create a Rustler wrapper package around yrs - Rust to be able to reconcile state diffs (patches). That way we could use it for realistic data amounts and keep the chattiness of the network traffic at bay.
But yeah, someone with Rust skills would have to create the wrapper first
Maybe we’ll have a production quality CRDT bindings in near future.
Cheers!
tonydang
I definitely agree that sending the entire app state every time is not scalable and a Rustler wrapper would be awesome!
One other idea I had that may also work is: Instead of sending the entire app state every time, we could just send Yjs updates for each change. And, on the server, instead of keeping a single app state, we can keep a table of all updates sent. Then, when a client reconnects, it can request all the updates it has missed. I haven’t tried this out, but I think that it should work in theory.
Definitely still not as good as just having a Yjs port, but just thinking out loud