Phoenix LiveView Optimization Guide

Intro

Phoenix LiveView is very attractive for real-time & rich interactive web app. I have worked with LiveView for 2 years and very like it.

For the first project I worked, I make some mistakes by misunderstand about it. After spend time to deep dive into LiveView I can work well with LiveView and see more way to improve & optimize it. Now I share it, hope people can go faster than me.

Phoenix LiveView and how it works and how to optimize it

I take a lit of bit about LiveView and how it works for us can have a same view about LiveView.

LiveView in runtime separated to two phases:

• First phase is regular HTTP get request from client and server response full HTML for client (in case Javascript(JS) is disable user can see some thing, friendly with search engine).


• Second phase is run by JS in client and data pipe between client & server is WebSocket(WS).

State of LiveView is isolated but we can easily add a pipe by Phoenix PubSub or Registry module to share some data for all LiveViews in system.

LiveView has some callbacks to handle events from both client and other process. In case for newbie I just show event flow for major events and ignore some layer, event, loop wait,...

. Async will spawn another process to run async task then LiveView can send a fast response to client and update data when it's ready.

To optimize a big data list we can use stream. It save time for LiveView in first time render & we still can update/insert or delete it in the future (like chat app or list of a lot items). After send to client LiveView process doesn't handle stream data in memory then we can save a lot of memory.

For other things like update to 3rd lib we can use hook, common case is update GPS route to Google map.

And a thing we need to remember is LiveView is server side rendering, LiveView uses a ton of techniques to optimize (see how LiveView optimizes render at Dashbit blogs) it but small thing we still need to remember. That is avoid render big list of DOM in dynamic content(code LiveView will execute every state changed). Bring it to static contend if can!

Conclusion

From above optimization guide LiveView can easy support for a mount of data and still get fast response, rich interactive and real-time features.

So things we need to memory:

• Async operation for fast response to client, data will be pushed later.


• Stream for large list need to update/insert/delete later.


• Using hook for special things.


• Using connected?/1 to ignore things in first phase (regular get request).