Let's compare LiveView PushState vs Tubolinks

How they differ? and
What would you use with LiveView? Turbolinks for LiveView’s PushState, and why?

1 Like

Turbolinks is purely user-side driven, always has the latency even when the server can push data without user interaction.

LiveView supports both styles, user driven and server pushed, server pushed being much faster, user driven going over a websocket instead of ajax so that is faster as well.

3 Likes

I meant "Turbolinks OR* LiveView’s PushState, and why?"

Of course a server pushed data will reach faster the LiveView way, but I think in case of a user driven change result may be the same, but as Turbolinks is more mature, so it may win in that case.

In a liveView we do not have some magical remote control, so the user while clicking on an element (button or link) is not actually clicking inside the server, but the JavaScript library used by LiveView sends the user interaction to the server and then server orders a change back to the client. But then of course websockets will perform better than ajax over http.

Except turbolinks has to send an HTTP packet again, which means setting it back up, potentially even having to set back up the SSL connection, etc… etc… Websocket is persistent so that will save all that time (which will really matter on mobile connections).

Yep, precisely this.

1 Like

Can liveView be used for a full page replace with or without persisting one or more elements, like Turbolinks. If yes, then it’s the best thing in Phoenix developers toolbox.

I think so, but I’ve not used it yet, Drab definitely can (like liveview but older and more features).

3 Likes

Can liveView do this now?

In Turbolinks you can replace full page and persist one of more elements by using the data-turbolinks-permanent attribute.

@chrismccord

LiveView and Turbolinks – while using some of the same or similar technology – work with quite different approaches to changing the page content as well as when and why to do so. So I’m not sure if it should even strive to replicate its functionality at all.

But…: LiveView starts a process on the server to essentially manage a chunk of html within your website. If you make the chunk big enough and use all live_* functions it can indeed switch out your whole website. It does have tooling to not update certain dom nodes and change detection makes sure only changed parts of the dom actually update, but afaik both only work for as long as the managing liveview process for that piece of dom is not changed.

2 Likes