Phoenix LiveView

A brief introduction and overview of the new Phoenix LiveView library for creating dynamic experiences with server-rendered HTML templates.

Transcript

1. Phoenix LiveView! Desmond Bowe ElixirLA Meetup 4/17/2019
2. LiveView!
3. “enables rich, real-time user experiences with server-rendered HTML. LiveView powered applications are stateful on the server with bidrectional communication via WebSockets, offering a vastly simplified programming model compared to JavaScript alternatives. While modern JavaScript tooling enables sophisticated client applications, it often comes at an extreme cost in complexity and maintainability. There’s a common class of applications where rich experiences are needed, but full single-page applications are otherwise overkill to achieve the bits of required rich interaction. This applies to broad use-cases, including simple real-time updates, client-side style validations with immediate feedback, autocomplete inputs; and it can go as far as real-time gaming experiences. LiveView fills this gap and challenges what’s possible with server-rendered applications.” https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript LiveView!
4. Some Bullet Points What it Is • simple tool for simple problems • uses familiar Elixir patterns, like message passing and EEx-Like templates What it Is Not • tool for elaborate SPAs • CSS replacement you don't need to reach for react/vue/ember/knockout/etc.
5. De-duplicate form logic so there's no validation on the client. This enables some interesting analytics options. For example, you can see exactly what people type in and refine your UX accordingly. Because the WebSocket connection is maintained, roundtrips are faster and need less computation. The server needs more RAM to support this, as we’ll see later.
6. How Does It Work? app.js create LiveSocket connection socket listener endpoint.ex LiveView module def App.TweetCount do use Phoenix.LiveView def mount(session, socket), do: … def render(socket), do: <template> data router.ex or controller.ex or template.eex renderer
7. LiveView Modules • a process • responds to messages and holds the template in its state • smartly re-renders only the parts of the template that need updating • template is rendered statically at first, which gives us a nicer onload experience and helps with SEO • implements mount/2 and render/1
8. Updating Templates When you update the state of a LiveView, it automatically re-renders its template (if it needs to).
9. Changing State • Client submits events • phx-submit, phx-focus, phx-blur, phx-keydown, phx-keyup, phx-click • Server pushes updates • update socket assigns on LiveView module • handle_info callback
10. Changing State Common Scenarios: • Use Phoenix PubSub • Set a timer to send yourself a message
13. Pay Attention! LiveView is not free. Each process uses RAM.
14. Just as Phoenix expands the ability of a small team to build a performant system, LiveView expands the ability of of a small team to build dynamic experiences without frontend specialists. In Conclusion
15. thanks. questions?