A Better Pattern for Reusable LiveView Components
summary
Pattern claims LiveComponent-like behavior while giving direct mailbox access by combining attach_hook/4 hooks with function components, keeping each widget in one module: a state struct, LiveView hooks for handle_event/handle_info/handle_params, and a pure render function. Demo shows multiple independent chat widgets on one page, PubSub subscriptions and URL-param-driven topics, and a recommended PubSub manager for reference counting to avoid duplicate messages. Also covers stream pruning pitfalls and when to keep streams decoupled from widget state.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:14Widget challenges
- 3:59LiveView hooks foundation
- 5:25Widget blueprint and state
- 7:33Live demo: corporate chat
- 9:43Single widget module
- 10:04Implementing the three hooks
- 14:04PubSub pitfalls and fixes
- 15:10Streams and memory efficiency
- 17:58Final recommendations
- 18:18Resources and closing
- 18:38Q&A
related talks
35mKeynote: Fireside Chat on LiveView, (...)
34m5 Patterns for Better Components
01h 13mKeynote: Phoenix LiveView - Interactive Apps without Javascript
09mCommunicating Between Components
38mRe-usable GUI Components with Re-frame and Atomic Design
48mCoding LiveView
35mAdvanced patterns in building React Components
33mRefactoring Volatile Views into Cohesive Components