Add performance description for Drab.Live
safwanolaimat opened this issue · comments
Hello All
this first time i use drab
i have basic example
i have table and clock label
the first time you open the page the table will contain 10 rows
the value of the clock from backend
everything working perfectly till now
when i rendered 1000 rows in the table the clock being too slow it take more than 3 seconds to render the clock again
Thanks
That would be easier if you put some code samples, please.
If you use Drab.Live, having the long html may be tricky as it must re-render it all the time you update. Please consider using the other technique to update the page, like Drab.Element. See https://elixirforum.com/t/drab-is-slow-in-production/17826/8
@grych
maybe this question and the related elixiforum post could be a suggestion to add to the wiki documentation two new chapters, the first describing both by text and visually through some Sequence Diagrams, the Drab operations behind the scenes (compilation, rendering, handshaking, etc); the second chapter about the performances (how to keep the performances good, errors to avoid, some benchmarks, ...). I think it could be useful as a reference for both newbie and seasoned Drab developers, and to reduce the learning curve needed to master this package.
What do you think? I can help undertaking some parts.
@grych
i am just new to drab so how to update assigns without reload all the page ?
Yes, please! I believe it is documented in the Engine part, how Drab does re-render of the page, but it is always good to have it described.
I will also update documentation of Drab.Live and Drab.Core with the performance part.
i am just new to drab so how to update assigns without reload all the page ?
This is not about reload the page. Drab does not reload the page (in the browser), it updates the changed part. But to do it, in needs to re-render the page on the server side. If the page is big, it takes time.
Please read the manual in https://tg.pl/drab and documentation to find out how it works.
Yes, please!
ok! I'll submit some drafts next days
@grych its too small but
but every poke to browser all the assigns reloaded
Please update with some code snippets. I can't guess what's the issue..
defhandler start_clock(socket, sender) do
socket |> poke(clock: DateTime.utc_now() |> Time.to_iso8601())
start_clock(socket, sender)
end
i put this index.html.drab
<%= for u <- @uploads do %>
<% IO.inspect("LOG") %>
<%= end %>
every time clock update the uploads assign also rerendered
Don't you do the infinite loop in start_clock?
every time clock update the uploads assign also rerendered
can you post the exact template?
every time clock update the uploads assign also rerendered
Because you can see the "LOG" in the console? This is correct, because every time you update anything the page is re-rendered in the backend. It does not mean that the page in the browser is being update at that part.
@grych
okay
how to update assign without update the whole page ?
There is no way. After you change the assign, the whole page must be re-rendered.
See my first comment:
If you use Drab.Live, having the long html may be tricky as it must re-render it all the time you update. Please consider using the other technique to update the page, like Drab.Element. See https://elixirforum.com/t/drab-is-slow-in-production/17826/8
@safwanolaimat
here you will find the source of a simple app that allows you to compare the Drab performances of different page designs and Drab techniques under different load conditions, and choose which can be better to use in your specific case. Coming soon also the online version.