Phoenix LiveView is typically enough to build an app, but there are times where it is necessary to boost performance or get access to browser-native behavior only available to JavaScript.
Luckily, LiveView has an escape hatch for these scenarios: hooks!
Join me as I walk through the process of building a simple countdown timer app with LiveView, and then improve it with a little JS.
Links
Screen recording software I use (affiliate): https://screen.studio/@Yy75o
Project source repo: https://github.com/ChristianAlexander/phx-countdown
LiveView JS interop docs: https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks-via-phx-hook
Timestamps
Intro - 00:00
DEMO - 00:48
Scaffold Project - 01:22
Build with LiveView - 03:50
Push from the server - 05:50
Phoenix Hooks - 09:36
Refactor into reusable component - 15:09
Conclusion: just build stuff - 18:31