slashdotdash

slashdotdash

Phoenix LiveView is now... live!

Phoenix Live View is now publicly available on GitHub.

Here’s Chris McCord’s tweet announcing making it public.

Most Liked

jpincas

jpincas

Golang/Elm user here (although very interested in Elixir) - just wanting to add my 2 cents.

I developed something very, very similar to this in Go last year. I modelled it after The Elm Architecture (hence the name ‘go-tea’) but it does essentially the same thing: renders HTML, establishes a websocket connection, then pushes ‘messages’ from the client to the server. The server holds a state object for the session which it updates and then sends the rerendered HTML back to the client. As with LiveView, the client uses Morphdom to make minimal incremental changes to the DOM. Repo is here: GitHub - jpincas/go-tea: Build server rendered apps in Go that function like a SPA without the need for JS · GitHub (hasn’t been touched for a while).

I had a few cool examples, similar to some of the stuff @chrismccord demoed in his keynote: forms, navigation, shared list editing across connected ciients, basic components, even a little card flipping game.

I came to a similar conclusion: that this architecture was easy to reason about, performant enough and could scale quite well, so our team took the plunge and used it on a project we were working on at the time which needed an internal admin panel with fairly interactive UI.

I was actually amazed at the results. I built the admin panel in about 2 days instead of maybe 2 weeks. The code was clean and honestly, the app was indistinguishable from a SPA except perhaps to an expert eye.

The only real issue we had was with debouncing text input in a text editor. We were live rendering a preview of parsed markdown next to where the user typed the content. As an aside - that was another compelling argument for this architecture. We were able to use the exact same template to render the preview in the admin panel as was used for the user-facing portion of the site (also server rendered in Go). Anyway, when the user typed too fast, the server state could get out of sync with the browser state causing some strange regressions while typing. We experimented with a few different debouncing techniques and parameters but never really settled on anything we liked.

Eventually that project was abandoned in favour of Wordpress (don’t get me started on that…) but the idea of building sites/apps in this way has stuck with me ever since but I’ve always been hesitant to go all in on it for a couple of reasons:

Firstly, there’s always been that “can this really scale” niggling doubt. It’s such a departure from the norm that I think it’s natural to be slightly cautious in this respect.

Secondly, and this is definitely subjective - for me, at least, Golang was not a ‘nice’ fit for building apps in this way. Don’t get me wrong, the raw power of Golang, the speed and concurrency features makes it an ideal candidate for doing this - probably one of only a handful of languages in which you’d even attempt to do such a thing. I just found that expressing the app/UI logic felt clumsy. I longed for the functional elegance of Elm. I don’t know if it’s just because I’m used to Elm now, but it feels very natural to write UI logic as pipelines of transformations. You have a list of this thing, map it to this other thing, filter out these ones, then render. That seems to me the to represent 80% of the code you end up writing - that and case switches. This was just horribly verbose to write in Go.

So stumbling across LiveView was a real joy for me. I can attest that this way of architecting apps is totally awesome and works better than you probably imagine at first. Personally, I’m ready to go all in. 90% of the sites/apps I build will never need the power/overhead of Elm, so it’s a great fit for me - obviously YMMV depending on what you build.

Now I’ve got to learn Elixir as fast as possible. Off to research resources…

chrismccord

chrismccord

Creator of Phoenix

For an “image editor”, yes, absolutely would use more bandwidth than a client app, but that example is more to showoff the minimal diffs we apply on both client and server. The autocomplete search example is a much better real-world comparison when discussing bandwidth:

https://i.imgur.com/WWAHTR3.gif

In this case, the LiveView diffs match the best, most optimized server JSON you could write by hand, and you get that for free with zero effort. For some use cases we will use more bandwidth , like real-time form validations, but there are others where we can match, or potentially beat, a SPA bandwidth wise.

29
Post #6
josevalim

josevalim

Creator of Elixir

To add to what Chris said, there is also a feature to add debouncing/throttling in the cases you don’t want to immediately send changes all the time to the server.

27
Post #7

Where Next?

Popular in Discussions Top

laiboonh
Hi all, I am trying to convince my team to use liveview over the current react. What are some of the points where one should consider us...
New
sashaafm
Piggy backing a bit on @dvcrn topic BEAM optimization for functions with static return type?, I’ve been trying to understand in a deeper ...
New
pillaiindu
I want to convert a Phoenix LiveView CRUD website to a CRUD mobile app. What do you think is the easiest way to do so?
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
tmbb
This is a post to discuss the new Phoenix LiveView functionality. From Chris’s talk, it appears that they generate all HTML on the serve...
342 18146 126
New
marciol
Please, let me know if this kind of discussion already took place in another topic . Hi all, how do you consider if is better to build ...
New
jer
I’ve been using umbrellas for a while, and generally started off (on greenfield projects at least) by isolating subapps based on clearly ...
New
ben-pr-p
In general I’ve been sticking to this community style guide GitHub - christopheradams/elixir_style_guide: A community driven style guide ...
New
kostonstyle
Hi all How can I compare haskell with elixir, included tools, webservices, ect. Thanks
New
paulanthonywilson
I like Umbrella projects and pretty much always use them for personal Elixir stuff, especially Nerves things. But I don’t think this is ...
New

Other popular topics Top

skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New

We're in Beta

About us Mission Statement