Good day #devElixir!!! Welcome to #FullStackElxpro
Right here we focus on methods and ideas on your Elixir studying journey. That is from scratch till your first wave as an elixir developer.
I’m Gustavo, and in the present day's theme is **LiveView Pages**.
ps: You’ll be able to comply with the Article with a VIDEO
Need to be taught extra about Elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew
What’s temporary_assign?
You’ll be able to learn temporary_assign on Elixir Documentation, however for me, it was actually exhausting to know. I’ll clarify it to you utilizing what’s temporary_assign for me, and you will get your conclusion.
For me, temporary_assign with phx-update is a less complicated strategy to stop bugs in your LiveView pages when you will have lists and doable real-time interactions along with your pages, defining one of the best habits along with your crew, product house owners, and UX.
How do I determine that out?
If you end up constructing LiveView pages, you most likely simply care about getting issues executed or getting the anticipated habits; once you load/reload pages, your listing will work usually, and the default habits is a prepend on the listing. However some bugs seem when essential to replace a listing, and the weather are the identical.
Why is temporary_assign so necessary?
It’s so easy to make use of and may keep away from many future issues. With a few strains carried out, you solely have to outline what’s necessary in your listing and what’s a doable anticipated habits once you replace that.
Why temporary_assign can get constant LiveView pages.
As a result of you possibly can solely outline the anticipated habits when new parts come, and for those who don`t have this characteristic, for now, you possibly can stop sort of a bug sooner or later with just a few methods to suppose in your parts once you use temporary_assign and phx-updates.
Easy methods to use temporary_assign to get constant LiveView Pages.
With out temporary_assigns instance
If you happen to use temporary_assigns and add new parts to your display screen, the default habits can be prepended and doesn’t matter the ID.
…Dwell do`
def mount(_, _, socket) do
messages = Enum.map(1..3, &%{id: &1, username: “gus #{&1}”, textual content: “pumpkin #{&1}”})
socket = assign(socket, messages: messages)
{:okay, socket}
finish
def handle_info({:u_msg, message}, socket) do
messages] finish)
finish
`
…html.heex
<%= self |> :erlang.pid_to_list %>
<ul>
<%= for message <- @messages do %>
<li>
<p><span><%= message.username %>:</span> <%= message.textual content %></p>
</li>
<% finish %>
</ul>
`
iex(4)> pid = pid(“0.698.0”)
iex(5)> msg = %{username: “gus 234234”, textual content: “pumpkin 1”, id: :rand.uniform(10_000)}
%{id: 870, textual content: “pumpkin 1”, username: “gus 234234”}
iex(6)> ship pid, {:u_msg, msg}
{:u_msg, %{id: 870, textual content: “pumpkin 1”, username: “gus 234234”}}
iex(7)> ship pid, {:u_msg, msg}
{:u_msg, %{id: 870, textual content: “pumpkin 1”, username: “gus 234234”}}
iex(8)>
`
Solely temporary_assigns instance
After defining what property ingredient is temporary_assign and what’s going to occur after receiving a brand new ingredient, LiveView will delete each ingredient and embrace the brand new one occurring as a result of now we now have began utilizing the default habits exchange. Now, outline what you anticipate when a brand new ingredient is added to your listing utilizing the helpful article LiveView documentation gives us on the hyperlink beneath.
https://hexdocs.pm/phoenix_live_view/dom-patching.html
def mount(_, _, socket) do
messages = Enum.map(1..3, &%{id: &1, username: "gus #{&1}", textual content: "pumpkin #{&1}"})
socket = assign(socket, messages: messages)
{:okay, socket, temporary_assigns: [messages: []]}
finish
`
msg = %{username: “gus #{:rand.uniform(10_000)}”, textual content: “pumpkin #{:rand.uniform(10_000)}”, id: :rand.uniform(10_000)}
%{id: 9282, textual content: “pumpkin 7151”, username: “gus 5213”}
iex(35)> ship pid, {:u_msg, msg} {:u_msg, %{id: 9282, textual content: “pumpkin 7151”, username: “gus 5213”}}
iex(36)>
`
The ability of temporary_assigns and DOM patching.
While you use phx-update with temporary_assign, magic occurs. You’ll be able to outline easy methods to order your parts, not repeat the identical ingredient in your display screen and outline one of the best habits on your person by merely including phx-update.
After all, it is advisable embrace an ID attribute in your phx-update, and each ingredient in your listing should even have an ID attribute.
`
`
Have a look an strive by your self 😀
`
iex(33)> ship pid, {:u_msg, msg}
{:u_msg, %{id: 6719, textual content: “pumpkin 2150”, username: “gus 8319”}}
iex(34)> msg = %{username: “gus #{:rand.uniform(10_000)}”, textual content: “pumpkin #{:rand.uniform(10_000)}”, id: :rand.uniform(10_000)}
%{id: 9282, textual content: “pumpkin 7151”, username: “gus 5213”}
iex(35)> ship pid, {:u_msg, msg} {:u_msg, %{id: 9282, textual content: “pumpkin 7151”, username: “gus 5213”}}
iex(36)>
`
After this text, I hope you perceive how necessary it’s to make use of temporary_assigns and phx-update. See you subsequent time BYE!!!
Social networks: