Back to Browse

Extending Phoenix LiveView with Hooks

3.9K views
Jun 10, 2024
19:10

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

Download

0 formats

No download links available.

Extending Phoenix LiveView with Hooks | NatokHD