thiagomajesk

thiagomajesk

Documentation on LiveViews using distinct pids for the dead/live mounts

Hi folks! If you work with LiveView for a while, you already know that the mount/3 callback is called twice: the first time for the dead mount and the second time for the live mount. However, something surprised me the other day: those are handled by two different processes!!! You can check this by running this during mount:

IO.inspect(self(), label: "CONNECTED? #{connected?(socket)}")

For some reason, I never paid enough attention to that, which is shocking considering I have been working with LiveView for many years. TBH, I don’t know why I expected otherwise, but I also don’t remember reading something explicitly mentioning it in the docs before; except for these two sentences:

After rendering the static page, LiveView connects from the client to the server where stateful views are spawned to push rendered updates to the browser, and receive client events via phx- bindings. Just like the first rendering, mount/3, is invoked with params, session, and socket state. However in the connected client case, a LiveView process is spawned on the server, runs handle_params/3 again and then pushes the result of render/1 to the client and continues on for the duration of the connection

Useful for checking the connectivity status when mounting the view. For example, on initial page render, the view is mounted statically, rendered, and the HTML is sent to the client. Once the client connects to the server, a LiveView is then spawned and mounted statefully within a process.

It’s clear to me now that I overlooked the docs, considering that I can clearly read spawn mentioned in both sentences, but I wonder if this is still too subtle.

I learned this the hard way two times this week already, the first time by passing the LiveView pid on start_link to a named GenServer, which made my server hold on to a dead pid while it was running. The second time was a linked GenServer crash that was not terminating the LiveView except when trapping exists :laughing:.

I want to leave this here for posterity so other people don’t lose their sanity trying to understand how this works, but I wonder if we could also make docs a tiny bit more explicit about this so others don’t fall into the same trap :see_no_evil: .

Where Next?

Popular in Guides/Tuts Top

dennisreimann
I wrote a guide for implementing Passwordless Authentication a.k.a. “Magic Login Links”: https://dennisreimann.de/articles/phoenix-passw...
New
Logan
Here is an example of a Mix application that utilizes Cowboy to handle websocket connections. If anyone has an idea about making this wor...
New
dkuku
I Created a blog post about setting up svelte with phoenix. I found it a bit tricky and the only blog post I found was written using som...
New
lukertty
Install web-mode and mmm-mode first and put this in your config file: (require 'mmm-mode) (require 'web-mode) (setq mmm-global-mode 'may...
New
annad
I’m posting this for developers who are totally new to Phoenix like myself. This is all probably obvious to more skilled Phoenix develope...
New
sergio
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
New
sergio
Wrote this guide on how to integrate DropzoneJS with Phoenix Liveview. Hope it helps someone out! Woah read that title again, what a ...
New

Other popular topics Top

greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
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
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 44139 214
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New

We're in Beta

About us Mission Statement