-
Notifications
You must be signed in to change notification settings - Fork 91
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
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this 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 |
There was a problem hiding this comment.
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:
# 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. |
There was a problem hiding this comment.
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:
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. |
After getting help in the beacon slack, I promised to add a guide for
on_mount
andhandle_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!