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