tonydang

tonydang

Offline-enabled apps with Phoenix LiveView and LiveSvelte

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 :smirk:

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 :slight_smile:

Here’s a video I made walking through how I made the app:

Source code:

Live Demo:

Any questions and feedback welcomed!

Most Liked

tonydang

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 :slight_smile:

11
Post #3
arcanemachine

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?

mmmrrr

mmmrrr

I just saw that someone created a wrapper for y-crdt (the Rust library) in elixir: https://github.com/satoren/y_ex

Here is the announcement post on the YJS forum: https://discuss.yjs.dev/t/yrs-elixir-bindings/2826/3

That beeing said: thanks a ton for creating the example of combining yjs with svelte and live_view. It was a great read and I learned a lot from it :slight_smile:

Where Next?

Popular in Discussions Top

jswny
I would like to better understand what the advantages/disadvantages of umbrella applications are compared to structuring your app as as s...
New
jeramyRR
This is an interesting article to read. Elixir’s performance, like usual, is excellent. However, it seems like the high CPU usage is co...
New
pillaiindu
In django there is a cache framework backed by memcached. Rails also puts a lot of emphasis on caching, and even the idea of russian-doll...
New
Fl4m3Ph03n1x
Background This question comes mainly from my ignorance. Today is Black Friday, one of my favorite days of the year to buy books. One boo...
New
praveenperera
How We Replaced React with Phoenix By: Thought Bot
New
Crowdhailer
I’ve been hearing much about the new formatter and it’s something I have been keen to try. I find examples buy far the most illuminating...
248 19204 150
New
CharlesO
Erlang :list.nth simple, but 1 - based nth(1, [H|_]) -> H; nth(N, [_|T]) when N > 1 -> nth(N - 1, T). Elixir Enum.at … coo...
New
hazardfn
I suppose this question is effectively hackney vs. ibrowse but we are at a point in our project where we have to make a choice between th...
New
joeerl
I’m playing with Elixir - It’s fun. I think @rvirding does give Elixir courses these days. Re: files and database - when I given Erlang ...
New
Owens
Hello all, I am developing a new mobile app with Flutter frontend and Phoenix backend. The mobile app has real-time task management and c...
New

Other popular topics Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a > b) do {:ok, "a"} end if (a < b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement