So I have been playing around with LiveView at least and managed to build a simple kanban-like board with it. I have several questions before I publish the example code, as I suspect I may not be doing everything correctly (or i may be).
- Are nested comprehensions / dynamics supported?
If I have two loops, nested within each other in my LiveView, the dynamicsc transferred over the wire contain one huge blob of HTML that consists of result of iteration over inner loop. Am I doing something wrong here?
def render(assigns) do
~L"""
<div class="row boards">
<%= for column <- @columns do %>
<div class="column">
<div class="board-column dropzone" data-column-id="<%= column.id %>">
<h4><%= column.title %></h4>
<div class="board-tickets dropzone">
<%= for ticket <- column.tickets do %>
<div class="ticket" data-ticket-id="<%= ticket.id %>">
<div class="drop-ghost"></div>
<h5 draggable="true" data-ticket-id="<%= ticket.id %>" class="ticket-title"><%= ticket.title %></h5>
</div>
<% end %>
<div class="drop-ghost"></div>
</div>
</div>
</div>
<% end %>
</div>
"""
end
From the Chrome Dev Tools I can figure out that this is inedeed assigning huge chunk of HTML instead of nested dynamics in a response over WebSocket:
Note that I have 1000 items in the list here so the size is big anyway.
- If the above is expected behavior, what is the way to work it around?
I am currently rendering not one, but N LiveViews: each for own column of my Kanban Board. If I do that, and do not have nested comprehensions in my LiveViews, the dynamics are assigned only the text values as expected, and not huge chunk of HTML. Is this the workaround I should be doing now?
- Do we have a plan on how to handle collection updates?
The problem here is that with a huge lists, that still takes time to transfer this say 1000 dynamics over the wire. @chrismccord mentioned in his heynote on ElixirConf EU that there is a plan to improve it. Do we know how?
I was thinking we could be sending either JSON diff/patch (maybe with library similar to GitHub - benjamine/jsondiffpatch: Diff & patch JavaScript objects ?) or something like JSON operation transforms (GitHub - JoshData/jot: JSON Operational Transformation (JOT) ?).
