JSON with LiveView

Phoenix Forum Questions / Help
,
1

Hi, we have an NextJS Frontend Application which is basically React.

Now we would like to use a Phoenix App as a Service for some Live data. But we only need the JSON no HTML. Is Phoenix LiveView a good fit for this, or should we go with the low-level Phoenix Channels.

In comparison, I think that Channels is really low-level. On the other hand LiveView is very high-level and too HTML specific. IMHO something like LiveState would be a cool thing.

For example const { state, dispatch } = useLiveState() (React hooks)

1 Like
2

I would go with channels, yes. I don’t know if they are low level (I would say websockets are rather low-level, but not channels), but they are very easy to use, so low level or not they are a great tool if you want to push/stream data from the backend.

3

Channels could work. Have you considered using BERT instead of JSON? Sending data on the Elixir side would use :erlang.binary_to_term/1, which is fast. Then you could use Bert.js on the front end to decode into JS objects. Although it is admittedly a pretty dependency heavy lib.

4

BERT do not support maps, as it was created before OTP17 which added maps.

On the other hand I am working (when I find some time) on ERNIE which is “next gen” implementation of BERT.

4 Likes
5

Ah, hadn’t realized it was so out of date. Love the name.

6

My main concern is about the features that LiveView is offering besides HTML sync and event passing (which for my use-case aren’t important) but it seems that there are also other important features on top of plain Channels.

1 Like
7

Thank you, I’ve considered BERT. But it does not make much sense when you have a heterogenous environment with different technologies.

8

To me it looks like this library has no dependencies at all (besides the test lib for dev).

9

Hey there.

I actually think it’s an idea with a lot of potential and use-cases that could be supported either in LiveView or as a separate library.

Being able to use whole React ecosystem while keeping the state in sync with your GenServers (or other abstraction) is something that we already experimented with. Take a look at this repo: https://github.com/surferseo/livedata_todomvc which is a proof of concept for the idea.

While the POC implementation is hideous, the API is really clean and powerful - check out https://github.com/surferseo/livedata_todomvc/blob/master/lib/phoenix_livedata_todomvc_web/live_data/todo_state.ex and https://github.com/surferseo/livedata_todomvc/blob/master/assets/js/containers/TodoList.js#L22.

If you are interested in hearing more, check out this video https://www.youtube.com/watch?v=fvNy9bh8_vs where I talk a bit about motivations and the ugly internals.

Trying to make it play well with LiveView makes a lot of sense, as it lowers the barrier of entry to integrate it with existing JS codebases.

5 Likes
10

Cool! I think this is what I had in mind!

Update

@methyl
After watching your screencast. I am sure it’s exactly what I had in mind :slight_smile:

11

This looks is amazing, I would love to help polish LiveData and get it published on hex!

Exactly the kind of middle ground I am looking for - a lower level state abstraction than LiveView, but something a bit higher level than just channels.

I have had the exact mental model of redux <-phoenix-channel-> gen_server - and even made a similar proof of concept that leverages the gen_server state as the source of truth.

The addition of fast-json-patch is a great idea and is what morphdom does but with just the state, genius!

Any progress since the video and the code that you have posted?
If you started breaking it out into a new repo, I would be jumping on to contribute right away!

1 Like
12

@harmon25 @webdeb I started a channel #livedata on Elixir Slack, let’s connect there and kick it off :slight_smile:

13

Looks like I am pursing a similar idea over at https://github.com/justinmcp/taper. You can render react components directly from a template (.html.jsx) and they can connect to a server-side version of redux (basically the same API as redux). It can also render jsx server side only, skipping hydration on the client. There is currently one example at https://github.com/justinmcp/taper-examples.

Still really early days. I want to put back a “remote call” hook that could call out to any gen_server, handle store loading/persistence in a reasonable way, etc, etc.

Shaping up nice though.

3 Likes
14

That is awesome!

Looks like a lot of the same thoughts we are pursuing. Join us on the #livedata slack group if you haven’t already, and we can collab on these ideas!

Thinking there is room for both a lower level API that could be dropped into a phoenix app for server-side state in your JS client, and something that integrates them together more, for a fullstack next.js(ish) Elixir framework - which does server-side react rendering, and wires it all up - which is what taper is shaping up to be…

One thing we have implemented is sending json-diffs, akin to live_view diffs. Taper is just sending the entire state each time from the looks of it. Think there is room for some testing to determine if the json diffing actually helps at scale. I could imagine if the json is not very big - the diff might actually be more bytes than just sending the full json. It also of course comes at a cost of calculating the diff, also on the client applying it…

2 Likes
15

Thinking there is room for both a lower level API hat could be dropped into a phoenix app for server-side state in your JS client
One thing we have implemented is sending json-diffs, akin to live_view diffs. Taper is just sending the entire state each time from the looks of it.

100%. Sounds like a good idea. I have vaguely worked out having the reducers return a ecto.changeset instead of the entire new state, and then sending the changeset across the wire… I’m still not 100% on the idea though, maybe just a json-diff thing is better as you say.

I’ll pop into the channel and we can chat about it all.

1 Like
16

Guys, I started working my initial state as a service idea, which should be a simple way to share state. I call it livestate (livestate.io) And I would love you to check it.

The code is open source, and very basic livestate.io · GitHub

@methyl I liked your solution for special purpose state very much, as it made possible to use type generation for TS, and custom methods. And it was actually your ideas which inspired me to go with the json-patch method :wink:

1 Like
17

I’ll throw my hat into the ring too, I guess.

Just pushed an alpha of this:

Built for my own needs, but maybe it’ll be handy for you as well.

It’s very simple and works with existing LiveViews - just use LiveJson.push_patch the way you’d use assign or push_event. It has two modes, jsondiff and rfc mode, which use Jsondiff and JSON-Patch, respectively. jsondiff mode is very fast, and rfc mode is compatible everywhere.

As an example you can:

def handle_info({:new_data_to_visualize, new_data} = _event, socket) do
  {:noreply, 
    socket
    |> push_patch("viz_data", new_data)
  }
end

Then, in your JS console:

window.viz_data
// {1: ["a"], 2: ["b"] ... 99999: ["zzzzz"]}

Only deltas are sent over the wire, so it’s quite fast!

More details soon, but works for me.

5 Likes