LiveView and Web Components
summary
Argues that Web Components extend LiveView by becoming first‑class UI elements and shows a working autocomplete + Google Maps demo. LiveElements converts custom elements into LiveView functional components, auto‑serializes complex assigns as JSON and wires custom events to the Phoenix custom event hook. Demonstrates wrapping libraries like FullCalendar, notes LiveView can rereplace elements and cause flicker and gives workarounds such as phx-update="ignore" and using the LiveElements macro or the alternative LiveState channel approach, which runs in production.
AI-written summary · about
chapters (10)
- 0:00LiveView and Web Components intro
- 2:29Web Components benefits
- 5:16Custom Elements with LiveView
- 9:55Live Elements library
- 10:56Web Components demo
- 17:19LiveView challenges
- 19:28Custom Elements tips
- 20:30Live State alternative
- 21:58Live State demo
- 23:24Closing & Q&A
related talks
01h 13mKeynote: Phoenix LiveView - Interactive Apps without Javascript
35mKeynote: Fireside Chat on LiveView, (...)
40mThe Power & Performance of Phoenix LiveView
44mWhat's new in LiveView
55mLiveViewJS is the anti-SPA library for reactive app development in NodeJS and Deno
39mBeyond Liveview: Real Time Features With Liveview
51mBuilding web applications with Web Components
48mImproving your phoenix liveview experience with surface