Greeting
Hello #devElixir!!! Welcome to #FullStackElxpro
Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer.
I am Gustavo, and today's theme is **LiveView Pages**.
Do you want to learn Elixir in three months? https://elxpro.com/sell
ps: You can follow the Article with a VIDEO
Want to learn more about Elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew
What is temporary_assign?
You can read temporary_assign on Elixir Documentation, but for me, it was really hard to understand. I will explain it to you using what is temporary_assign for me, and you can get your conclusion.
For me, temporary_assign with phx-update is a simpler way to prevent bugs in your LiveView pages when you have lists and possible real-time interactions with your pages, defining the best behavior with your team, product owners, and UX.
How do I figure that out?
When you are building LiveView pages, you probably just care about getting things done or getting the expected behavior; when you load/reload pages, your list will work normally, and the default behavior is a prepend on the list. But some bugs appear when necessary to update a list, and the elements are the same.
Why is temporary_assign so important?
It is so straightforward to use and can avoid many future problems. With a couple of lines implemented, you only need to define what is important in your list and what is a possible expected behavior when you update that.
Why temporary_assign can get consistent LiveView pages.
Because you can only define the expected behavior when new elements come, and if you don`t have this feature, for now, you can prevent kind of a bug in the future with only a few ways to think in your elements when you use temporary_assign and phx-updates.
How to use temporary_assign to get consistent LiveView Pages.
Without temporary_assigns example
If you use temporary_assigns and add new elements to your screen, the default behavior will be prepended and does not matter the ID.
...Live do
`
def mount(_, _, socket) do
messages = Enum.map(1..3, &%{id: &1, username: "gus #{&1}", text: "pumpkin #{&1}"})
socket = assign(socket, messages: messages)
{:ok, socket}
end
def handle_info({:u_msg, message}, socket) do
{:noreply, update(socket, :messages, fn messages -> [message | messages] end)}
end
`
...html.heex
<%= self |> :erlang.pid_to_list %>
<ul>
<%= for message <- @messages do %>
<li>
<p><span><%= message.username %>:</span> <%= message.text %></p>
</li>
<% end %>
</ul>
`
iex(4)> pid = pid("0.698.0")
PID<0.698.0>
iex(5)> msg = %{username: "gus 234234", text: "pumpkin 1", id: :rand.uniform(10_000)}
%{id: 870, text: "pumpkin 1", username: "gus 234234"}
iex(6)> send pid, {:u_msg, msg}
{:u_msg, %{id: 870, text: "pumpkin 1", username: "gus 234234"}}
iex(7)> send pid, {:u_msg, msg}
{:u_msg, %{id: 870, text: "pumpkin 1", username: "gus 234234"}}
iex(8)>
`
Only temporary_assigns example
After defining what property element is temporary_assign and what will happen after receiving a new element, LiveView will delete every element and include the new one happening because now we have started using the default behavior replace. Now, define what you expect when a new element is added to your list using the useful article LiveView documentation provides us on the link below.
https://hexdocs.pm/phoenix_live_view/dom-patching.html
def mount(_, _, socket) do
messages = Enum.map(1..3, &%{id: &1, username: "gus #{&1}", text: "pumpkin #{&1}"})
socket = assign(socket, messages: messages)
{:ok, socket, temporary_assigns: [messages: []]}
end
`
msg = %{username: "gus #{:rand.uniform(10_000)}", text: "pumpkin #{:rand.uniform(10_000)}", id: :rand.uniform(10_000)}
%{id: 9282, text: "pumpkin 7151", username: "gus 5213"}
iex(35)> send pid, {:u_msg, msg} {:u_msg, %{id: 9282, text: "pumpkin 7151", username: "gus 5213"}}
iex(36)>
`
The power of temporary_assigns and DOM patching.
When you use phx-update with temporary_assign, magic happens. You can define how to order your elements, not repeat the same element on your screen and define the best behavior for your user by simply adding phx-update.
Of course, you need to include an ID attribute in your phx-update, and every element in your list must also have an ID attribute.
`
-
<%= for message <- @messages do %>
-
<%= message.username %>: <%= message.text %>
<% end %>
`
Take a look an try by your self :D
`
iex(33)> send pid, {:u_msg, msg}
{:u_msg, %{id: 6719, text: "pumpkin 2150", username: "gus 8319"}}
iex(34)> msg = %{username: "gus #{:rand.uniform(10_000)}", text: "pumpkin #{:rand.uniform(10_000)}", id: :rand.uniform(10_000)}
%{id: 9282, text: "pumpkin 7151", username: "gus 5213"}
iex(35)> send pid, {:u_msg, msg} {:u_msg, %{id: 9282, text: "pumpkin 7151", username: "gus 5213"}}
iex(36)>
`
THE END.
After this article, I hope you understand how important it is to use temporary_assigns and phx-update. See you next time BYE!!!
Social networks:
- Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
- Elxpro Linkedin - https://www.linkedin.com/company/36977430
- Twitter - https://twitter.com/elx_pro
- ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA
- Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ
Top comments (0)