Phoenix architecture & navigation for a single-page LiveView app

Phoenix Forum Questions / Help
, ,
1

I’m developing an app that has about a dozen Postgres tables and three different contexts: an accounts context, a catalog context, and an analytics context.

I want the whole thing to be a single-page LiveView app, at least aside from a couple minor edge cases.

Following the LiveView docs, I am generating resources as follows:

mix phx.gen.live Catalog Toy toys name instructions age_range keyword:array:string store_id:references:store

Later I generate another resource as follows:

mix phx.gen.live Catalog SparePart spare_parts name instructions toy_id:references:toys

I end up with a directory structure as follows:

lib/
├── tadasajon_web
│   ├── live
│   │   ├── live_helpers.ex
│   │   ├── modal_component.ex
│   │   ├── toy_live
│   │   │   ├── form_component.ex
│   │   │   ├── form_component.html.heex
│   │   │   ├── index.ex
│   │   │   ├── index.html.heex
│   │   │   ├── show.ex
│   │   │   └── show.html.heex
│   │   ├── spare_part_live
│   │   │   ├── form_component.ex
│   │   │   ├── form_component.html.heex
│   │   │   ├── index.ex
│   │   │   ├── index.html.heex
│   │   │   ├── show.ex
│   │   │   └── show.html.heex
│   ├── router.ex

And I am instructed to make my router.ex look as follows:

 scope "/", TadasajonWeb do
    pipe_through([:browser, :require_authenticated_user])

    live "/toys", ToyLive.Index, :index
    live "/toys/new", ToyLive.Index, :new
    live "/toys/:id/edit", ToyLive.Index, :edit
    live "/toys/:id", ToyLive.Show, :show
    live "/toys/:id/show/edit", ToyLive.Show, :edit

    live "/spare_parts", SparePartLive.Index, :index
    live "/spare_parts/new", SparePartLive.Index, :new
    live "/spare_parts/:id/edit", SparePartLive.Index, :edit
    live "/spare_parts/:id", SparePartLive.Show, :show
    live "/spare_parts/:id/show/edit", SparePartLive.Show, :edit
  end

If I examine the index.ex and show.ex files that are generated for each resource, I see that they each have a mount function and a handle_params function.

So my question is: how is this all one single-page app? It seems to me that if the user navigates to https://my-app.com/toys and then to https://my-app.com/spare_parts that they are just getting a different page reload and mounting a different LiveView each time.

I read this discussion: Concrete examples of when to use live_patch, live_redirect, push_redirect, push_patch? - #21 by cnck1387 and there appeared to be some crucial insight from Jose Valim:

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).

But my question is: don’t I always want to minimize the amount of data sent while navigating within the same LiveView?

If I have something like a table that can be sorted, then I’ll just use a stateful live component for that – but why should I ever leave the main LiveView?

1 Like