Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add guide for on_mount and handle_info #599

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

djcarpe
Copy link

@djcarpe djcarpe commented Oct 6, 2024

After getting help in the beacon slack, I promised to add a guide for on_mount and handle_info within a given page.

The example is simple just adding a constantly updating clock.

Let me know if you have a better idea of how to show this feature and to let it shine.

Thanks!

Copy link
Contributor

@leandrocp leandrocp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This guide is so useful, well done. ❤️

Just left a suggestion to make it clear that this pattern is not only useful to update the assigns but also to achieve optimistic UIs to make the pages load faster and perform better. Wdyt? Thanks!

@@ -0,0 +1,282 @@
# On Mount Handle Info Loop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe change the title to be a bit more generic to capture more use cases that handle_info is able to solve?

Something like:

Suggested change
# On Mount Handle Info Loop
# Handle async and continuous updates with handle_info and on_mount

Wdyt?

@@ -0,0 +1,282 @@
# On Mount Handle Info Loop

If you would like to continuously monitor or update a page, you can create an [on_mount](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#on_mount/1) callback, and corresponding [handle_info](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:handle_info/2) handler.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here we could add few words to highlight some problems this pattern can solve:

Suggested change
If you would like to continuously monitor or update a page, you can create an [on_mount](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#on_mount/1) callback, and corresponding [handle_info](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:handle_info/2) handler.
Using [Live Data](https://hexdocs.pm/beacon/0.1.0-rc.2/Beacon.Content.html#create_live_data/1) assigns, [on_mount](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#on_mount/1) callbacks, and corresponding [handle_info](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c:handle_info/2) handlers is a pattern that you can leverage to achieve optimistic UI for your pages.
Suppose you're displaying a Weather widget on your page but fetching the data takes a second, delaying the whole page, even though that widget is not critical to your page and could display dummy data (or no data at all) while the rest of the page is loaded. In this scenario, a Live Data assign would provide the initial dummy data, the on_mount hook request the data to be loaded asyncly, and finally the handle_info loads the data and update that assign.
For this example, we'll build a similar scenario but also add a continuous monitor to update the assign frequently.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants