LiveView provides rich, real-time user experiences with server-rendered HTML.
How to make fast modern application with websockets which will not take your lifetime. Source code: https://github.com/oliver-kriska/rubyslava_elixir Live app: https://rubyslava-liveview.fly.dev/

1. Phoenix LiveView
LiveView provides rich, real-time user experiences with server-rendered HTML.
How to make fast modern application with websockets which will not take your lifetime.
Oliver Kriška, Rubyslava 26.01.2022
https://twitter.com/quatermain32

2. • inspired by Phoenix Channels
• bi-directional communication
• client/server events
• events are simple messages
• client/server hooks
• client and server state synchronization
•
fi
le uploads/direct uploads
• telemetry
• components
• url state manipulation (live_redirect
/ live_patch, …)
• tests
• v0.1.0 Aug 25, 2019
• v0.17.6 Jan 18, 2022

3. Phoenix Channels
Basics

4. Phoenix Channels
Code

5. Phoenix LiveView
Basic code

6. Phoenix LiveView
Simple update

7. HEEx/~H sigil
HTML-safe, HTML aware syntax source
f
iles and component-friendly

8. Client Hooks
Custom client-side JavaScript

9. Components
“Function components”, custom element

10. Components
Modal

11. Components
Slots, “inner content”

12. JS Commands
Phoenix.LiveView.JS

13. LiveComponent
“Stateful components”, LiveView’s child

14. LiveComponent
Events

15. LiveComponent
Optimizations, N+1 queries

16. Demo
LiveView, PubSub, Agent, esbuild, Tailwind, Phoenix LiveDashboard
https://rubyslava-liveview.
fl
y.dev/ https://github.com/oliver-kriska/rubyslava_elixir

17. Phoenix LiveView
LiveView provides rich, real-time user experiences with server-rendered HTML.
How to make fast modern application with websockets which will not take your lifetime.
Oliver Kriška
https://twitter.com/quatermain32
https://rubyslava-liveview.
f
ly.dev/
https://github.com/oliver-kriska/rubyslava_elixir
https://hexdocs.pm/phoenix_live_view
https://hexdocs.pm/phoenix_pubsub
https://www.phoenixframework.org/
https://hexdocs.pm/phoenix_live_dashboard
https://
f
ly.io/