andrea

andrea

Can Phoenix LiveView be used in multi-page applications or does it have to be a SPA?

Can Phoenix LiveView be used in multi-page applications, unlike React/Vue/Blazor which seems to be targeted for SPA?

Most Liked

davearonson

davearonson

I don’t see any reason why not. After all, you can always set a link to go to a fresh page, whether that one has LiveView on it or not.

malloryerik

malloryerik

Yeah, LiveView webapps are kind of like anti-SPAs. You can find dozens of descriptions like this but here goes: Phoenix apps with LiveView pages are multi-page apps where some pages are regular http pages and some are LiveView pages, and the router, back buttons, urls and so on all work just like normal. If you want to only use LiveView pages in a Phoenix app that’s possible, though I think that typically at least login pages will be http.

The difference between traditional http pages and LiveView pages is that instead of an http connection which connects, sends html and data transfers and immediately disconnects, LiveView pages use a websocket connection which remains open, more like a telephone connection as an example, and push html and data changes on that page without reconnecting. (Normal Phoenix http pages are also great at establishing websocket connections, but aren’t designed to automatically send html changes over the wire.)

When you navigate from one LiveView page to another in the same app you’ll do it using the router and a new connection will be established, quite normal and delightfully boring. You can also have LiveView components inside of your LiveView pages, so basically LiveViews nested inside of other LiveViews, kind of SPA-ish but simpler.

Last, nothing stops you from using Vue, React, Svelte and so on inside of an app that has LiveViews, and even inside of LiveViews themselves (not saying it’s a necessarily a good idea). Here’s a library to help with using React components directly inside of LiveViews:

Where Next?

Popular Backend topics Top

mrmurphy
I’ve run into a situation where I’ve got a list of posts inside of a container that uses phx-update=“prepend”, and the posts on the socke...
New
Fl4m3Ph03n1x
Background I am now trying Gradual type checking, as a consequence I am giving a shot to Gradient. As I see it, this is an alternative to...
New
JimmyCarterSon
I am confused about the Schema setup, I am setting up a new application and I want to seed files in it as well. I tried to mix to create...
New
sona11
In Java, if I try to do.equals() on a null string, a null pointer error is issued. I’m wondering whether I can perform the following if I...
New
Fl4m3Ph03n1x
Background I am a fan of dialyzer and friends (looking at Gradient) and I try to have sepcs in my code as much as I can. To this end, I a...
New
sona11
I wrote this code to calculate Fibonacci numbers by specifying the size. The results are correct, however the one thing that concerns me ...
New
Fl4m3Ph03n1x
Background I have a phoenix application in Windows 11. Unfortunately for me, I cannot compile the application because of a dependency err...
New
Fl4m3Ph03n1x
Background I have an umbrella project, where I run mix test from the root. In one of the apps, I am mocking the File module using the Mo...
New
apoorv-2204
Anyone know how to get in golang? I am from elixir background?.
New
Shiny
Hey community, this is my first post here so I will try to be as concise as possible and I appreciate any feedback. I’ve been writing Ro...
New

Other popular topics Top

Devtalk
Hello Devtalk World! Please let us know a little about who you are and where you’re from :nerd_face:
New
DevotionGeo
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
New
AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
New
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New
PragmaticBookshelf
A concise guide to MySQL 9 database administration, covering fundamental concepts, techniques, and best practices. Neil Smyth MySQL...
New