Phoenix LiveView and Pjax

hauleth · March 25, 2019, 8:56pm

Have anyone succeeded with Phoenix Live and Pjax (or other similar tool)? My point is that not all pages in my application require LiveView, but I would like it to not fully reload on each page change.

josevalim · March 25, 2019, 8:57pm

I think they should work together just fine. What have you tried?

hauleth · March 25, 2019, 9:07pm

Ok, found it. I needed to disconnect while unloading and reconnect after load of the new page.

jung-hunsoo · April 9, 2019, 1:05am

I just started to migrate from Drab to pjax + LiveView. But currently LiveView is better suited for some use cases; updating a partial of pages interactively.

LiveView as a pjax isn’t ready since pushState is not supported. Turbolinks is actually more mature than LiveView in this area. Mobile support is as well. But in the long run I certain that the LiveView will replace the Turbolinks.

hauleth · April 10, 2019, 2:34pm

I do not think that LiveView is at all meant to replace Pjax/Turbolinks. LiveView is (IMHO) meant to be “single page updater” not tool to handle multi page updates and content. And in that form I think that having both of these technologies to cooperate is quite easy and painless, so I do not see the problem with using both of them at the same time to handle everything.

jeremyjh · April 10, 2019, 2:50pm

So LiveView has no ambition to support SPA ?

hauleth · April 10, 2019, 3:02pm

I have no idea, but form what I understand it isn’t meant to be „full fledged SPA framework” but rather mechanism for supporting „live view” components on the website.

hubertlepicki · April 10, 2019, 3:39pm

There have been two proposals so far, and the up to date one is here:

github.com/phoenixframework/phoenix_live_view

The navigation/client-side story

opened 07:27PM - 09 Apr 19 UTC

closed 08:45PM - 14 Jun 19 UTC

josevalim

This issue describes the steps we need to take to improve the navigation story w…ith LiveView. For example, if you have a LiveView with three tabs and you want to change the URL when the user clicks on those tabs. Or, if you are navigating a table, you want to paginate or order it and annotate where in the table you are. Ideally, we want to keep those as regular links, especially since the initial LiveView render is meant to be indexed, used for SEO, and what not. This proposal does keep the links as is, all you need to do is to add a new attribute called `phx-live-route=true` (or `phx-route` or something else to be determined). When the link is clicked and `phx-live-route` is set, we will submit the link HREF to the root LiveView through WebSockets. The root LiveView will run the path against the router and act accordingly: 1. If it points to the same LiveView as the one currently running, we will call `handle_params(params, socket)` 2. If it points to the another LiveView, will transition to it and mount it 3. If it does not point to a LiveView, we will emit an error from the server and let the event go through in the browser, effectively clicking the link In order to implement this, we need the following changes: 1. On disconnected mount, we need to store the phoenix router in the static session 2. On connected mount, we will send the full browser URL. `path_parameters` will no longer be passed as part of the session. Instead we will pass them alongside the parsed query string to the optional `handle_params/2` callback, which should be invoked after mount and before render. `handle_params/2` should be called on both connected and disconnected mount. 3. For future route matching, we need to store both the phoenix router and the current host in the socket (since the link may be a relative link and the router can match on hosts) ## FAQ #### Q: What if there are two LiveViews at the root? A: We will provide a mechanism to specify which one of the two is the root. #### Q: What if there are two routes pointing to the same LiveView? A: We said "If it points to the same LiveView as the one currently running" but we need to specify what the same LiveView means. Is it the same name? Is it the same route? Is it the same session? I would say the same name is fine, at least for a starting point, but we need to keep in mind that the same LiveView can be mounted with different session keys or even the same session keys have changed.

Qqwy · April 10, 2019, 3:54pm

This response is based on information given by @chrismccord 's talk at ElixirConf.eu:

LiveView has some clear limitations. For instance, it will not be able to work when the user is offline. So progressive web applications are the kind of things that LiveView will not work for. (See also the final paragraph before the summary of Phoenix LiveView: Interactive, Real-Time Apps. No Need to Write JavaScript. - DockYard )
On the other hand, pushState-support is definitely something that will be added. Amongst other things because reflecting the state changes in the URL so that it can be bookmarked or shared is quite a common use case.

snap · November 10, 2020, 11:24am

I’m facing a similar problem with LiveView and Turbolinks.
Would you mind sharing an example how you are disconnecting and reconnecting?