Phoenix-style LiveView

@jgaskins I checked the real estate example. nice work!

Just a couple of thoughts about LiveView, I didn’t used it, but I used Elixir & Phoenix and watched some presentations and read docs about LiveView.

They calculate the DOM diff on the server side to send the absolute smallest payload over the wire as possible.
Whether it was worth the effort for Phoenix to do it that way, I’m not sure.
… that uses CPU time

As far as I know it didn’t required lots of work in Phoenix. Chris mentioned in the talk he was surprised how simple and good the Phoenix Template engine fitted in LiveView model and required almost no additional work. They had this mechanism already in Phoenix Templates even Before LiveView for caching or something like that, so it required just a little alteration.

As for the CPU as far as I understand it. The way Elixir (Erlang) checks for the object equality - because everything immutable that check is very efficient. And because Elixir Templates are optimised and use that equality check and renders only the part that actually was changed. So as far as I understand it’s very efficient and actually uses less CPU than it would require to generate full page.

Anyway, that may be an overkill for Crystal and the approach with Preact + Full Server Side rendering could be also good.

1 Like

Comparing LiveView with other approaches, like explicit remote DOM manipulation (RJS in Rails etc.). The biggest advantage is that with React (and LiveView) - you write only one template - what should be rendered. With DOM manipulation you write that template - what should be rendered + tons of instructions how to change page from one state to another. In case of React/LiveView you don’t need to write those instructions because they will be handled automatically.

And the LiveView adds one more very important simplification. With React you still have the problem - the distributed system, Client <-network-> Server. But with LiveView - it’s simplified there’s no more Server, Client and Network.

1 Like

Lots of online demos, games, excel sheet, made with LiveView check it out to get an idea what’s possible with that approach

1 Like

If anyone interested in this approach (no JS or compile-toJS, server only, magically turned into interactive web UI), I actually implemented prototype in Nim language. While it is in Nim, it could be pretty much done exactly the same way in Crystal.

Twitter in 100 lines of Nim, no JS

Turned out it was much easier than I expected. Although it doesn’t have the same level of optimisation of performance and network traffic as Elixir LiveView. But even without those optimisations it has quite reasonable performance and traffic.

It works, although I in the end abandon it and just use Svelte. For two reasons. First - I don’t want to spent time writing and supporting framework code, I want to write products. Second - today we have such amazing frameworks as Svelte, and, even though LiveView - is very good, Svelte is also very good and requires very little code, and also provides more fine grained control.

1 Like