cnck1387
Concrete examples of when to use live_patch, live_redirect, push_redirect, push_patch?
I’ve been reading the docs lately on LiveView and I’m having trouble figuring out when to use the above functions to change pages.
Can someone please provide a few real world use cases on when you should use a specific one and if possible how they would relate to using their regular non-LV counter parts.
It sort of feels like you might use live_redirect in a template when you want to go from page A to B, such as navigating between pages. I guess similar to link without LV (which is confusing to me because there’s also redirect without LV).
Then there’s live_patch for maybe modifying the state of an existing LV page, but this is where things fall apart in my head. When you would do this vs using live_redirect?
Then for push_redirect, this is probably the equivalent to using redirect without LV in a controller action, such as when you submit a form successfully right? But if that’s the case, why is live_redirect named that instead of something like live_link?
And for push_patch, I guess it’s similar to live_patch but used in the LV instead of a template?
Some clarification and guidance would be much appreciated. Especially if you can tie in specific use cases to specific function calls for things like nav bars, pagination, updating a tiny part of a page, various form actions (submitting with invalid fields vs successful), etc..
Most Liked
josevalim
At the end of the day, regardless if you invoke link/2, live_patch/2,
and live_redirect/2 from the client, or redirect/2, push_patch/2,
and push_redirect/2 from the server, the user will end-up on the same
page. The difference between those is mostly the amount of data sent over
the wire:
-
link/2andredirect/2do full page reloads -
live_redirect/2andpush_redirect/2reloads the LiveView but
keeps the current layout -
live_patch/2andpush_patch/2updates the current LiveView and
sends only the minimal diff
An easy rule of thumb is to stick with live_redirect/2 and push_redirect/2
and use the patch helpers only in the cases where you want to minimize the
amount of data sent when navigating within the same LiveView (for example,
if you want to change the sorting of a table while also updating the URL).
benwilson512
Notably, I’ve largely ditched the traditional view structure used by Phoenix controllers / views / templates in favor of:
my_app_web/
pages/
shipments/
show/
show.html.leex # the template
show.ex # the live view
data.ex # a data fetching helper
view_helper.ex # the normal phoenix view helper
components/ # components relevant only to this page
...
It makes this whole process way easier. I don’t really like Live in the module name anyway, it holds not a lot of value. The shipment show module name would be MyAppWeb.Pages.Shipments.Show, so it gets named just like any other Elixir module. All the files for a page are all in one nice spot, and you can make a new page by just copying and pasting any existing page folder.
sasajuric
I only played briefly with live view, once about a year ago, and once in the past weekend, and I pretty much went for a similar structure, with the only difference being that I didn’t use Pages. This weekend, while experimenting, I used the name Controller for the live view module. So I ended up with something like MySystemWeb.PageA.Controller, MySystemWeb.PageB.Controller, etc.
I find it much saner to navigate through the code, and as you say the things which are frequently read or changed together are in the same place. I also think that the word Live is basically noise. Whether something is a live view or not is imo an implementation detail, and doesn’t belong to the module name.
In the future I plan to do the same thing with controllers. I already did something similar for my blog, but that’s a very simple case so I ended up consolidating everything behind a single controller.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








