Skip to content

Commit

Permalink
Add more LiveView links
Browse files Browse the repository at this point in the history
  • Loading branch information
josevalim committed Oct 23, 2023
1 parent df6b839 commit db4c37b
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 5 deletions.
8 changes: 4 additions & 4 deletions guides/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 52,7 @@ defmodule HelloWeb.HelloHTML do
end
```

We declared the attributes we accept via `attr` provided by `Phoenix.Component`, then we defined our `greet/1` function which returns the HEEx template.
We declared the attributes we accept via `attr` provided by `Phoenix.Component`, then we defined our `greet/1` function which returns the HEEx template.

Next we need to update `show.html.heex`:

Expand All @@ -62,9 62,9 @@ Next we need to update `show.html.heex`:
</section>
```

When we reload `http://localhost:4000/hello/Frank`, we should see the same content as before.
When we reload `http://localhost:4000/hello/Frank`, we should see the same content as before.

Since templates are embedded inside the `HelloHTML` module, we were able to invoke the view function simply as `<.greet messenger="..." />`.
Since templates are embedded inside the `HelloHTML` module, we were able to invoke the view function simply as `<.greet messenger="..." />`.

If the component was defined elsewhere, we can also type `<HelloWeb.HelloHTML.greet messenger="..." />`.

Expand Down Expand Up @@ -225,7 225,7 @@ When we load the page, we should be rendering the admin layout without the heade

At this point, you may be wondering, why does Phoenix have two layouts?

First of all, it gives us flexibility. In practice, we will hardly have multiple root layouts, as they often contain only HTML headers. This allows us to focus on different application layouts with only the parts that changes between them. Second of all, Phoenix ships with a feature called LiveView, which allows us to build rich and real-time user experiences with server-rendered HTML. LiveView is capable of dynamically changing the contents of the page, but it only ever changes the app layout, never the root layout. We will learn about LiveView in future guides.
First of all, it gives us flexibility. In practice, we will hardly have multiple root layouts, as they often contain only HTML headers. This allows us to focus on different application layouts with only the parts that changes between them. Second of all, Phoenix ships with a feature called LiveView, which allows us to build rich and real-time user experiences with server-rendered HTML. LiveView is capable of dynamically changing the contents of the page, but it only ever changes the app layout, never the root layout. Check out [the LiveView documentation](https://hexdocs.pm/phoenix_live_view) to learn more.

## CoreComponents

Expand Down
2 changes: 1 addition & 1 deletion guides/real_time/presence.md
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 132,7 @@ With token authentication, you should access `socket.assigns.user_id`, set in `U

## Usage With LiveView

Whilst Phoenix does ship with a JavaScript API for dealing with presence, it is also possible to extend the `HelloWeb.Presence` module to support LiveView.
Whilst Phoenix does ship with a JavaScript API for dealing with presence, it is also possible to extend the `HelloWeb.Presence` module to support [LiveView](https://hexdocs.pm/phoenix_live_view).

One thing to keep in mind when dealing with LiveView, is that each LiveView is a stateful process, so if we keep the presence state in the LiveView, each LiveView process will contain the full list of online users in memory. Instead, we can keep track of the online users within the `Presence` process, and pass separate events to the LiveView, which can use a stream to update the online list.

Expand Down

0 comments on commit db4c37b

Please sign in to comment.