#Phoenix liveview hooks how to#
#Phoenix liveview hooks code#

Once the LiveView blog replaces the Gatsby blog, it’ll be 100 again. But you can also contribute by commenting on this article or creating an issue at phoenix-liveview-collection repo. Gatsby: Elixir Phoenix LiveView: The SEO hit on the Phoenix app is because of a canonical URL not being correct. I plan to keep this article updated as I find more examples and demos.

#Phoenix liveview hooks code#

The final code for this walkthrough can be found here.įirst, we’ll add the LiveDashboard dependency to our Phoenix app: # mix.Amazing demos and experiments that people are building with Phoenix LiveView.

#Phoenix liveview hooks how to#

Upcoming posts in this series take a closer look at the out-of-the-box Telemetry events offered by Phoenix and Ecto, walkthrough how to add our own Telemetry events and more. JavaScript for Trello Clone by Pedro Ideas were building with. Phoenix LiveView documentation about JavaScript interoperability Walk-Through of Elixir LiveView Elixir School Another approach: LiveView Trello clone by Pedro Assunção. For a deeper dive on Telemetry events, check out our series of posts on Instrumenting Phoenix with Telemetry. Phoenix LiveView Hook Demo Phoenix LiveView resources. The metrics we’ll define match up to some out-of-the-box Telemetry events emitted by Phoenix and Ecto. Note: The term Hooks comes from Phoenix/LiveView which this project is based on and whose client library. The current JS hooks do not provide a way to clean up 3rd party JS components before LiveView manipulates the DOM. In this post, we’ll set up a Telemetry supervisor that implements a set of metrics definitions for Telemetry events. LiveView has Hooks for these types of situations. Phoenix version (mix deps): 1.4.11 Phoenix LiveView version (mix deps): locked at e1d9ee1 NodeJS version (node -v): v12.13.1 NPM version (npm -v):6.12.1 Operating system: MacOS Sierra Actual behavior. The Quantum app doesn’t do much–it really just exists to be measured. We’ll be working with the Phoenix app we set up for our Telemetry series of blog posts, Quantum. Some components also implement additional functionality, for example the Auth component. The library is called supabase-surface, and provides Surface components which are styled after Supabases component library for React. Now lets write the behavior part of the component in live.py: from reactor import Component class XCounter(Component): templatename x. In the front-end morphdom (just like in Phoenix LiveView) is used to apply the new HTML. In this post, we’ll add LiveDashboard to our Phoenix app, examine the out-of-the-box features and take a look under the hood to understand how LiveDashboard hooks into Telemetry events in order to visualize them. We started developing a component library for Phoenix LiveView applications that use Surface. These are custom events triggered by reactor in different instants of the life cycle of the component.

LiveView hooks are a complete game changer, and open the doors to a whole new world of applications that can be built with this amazing technology. We’ll be using Phoenix v1.6 and React v17 - v18 is out already, but is still new enough for me to get away with using the old one for this post. This post is a merge of sorts of this repo and this article, which had 90 of the answers.

The recent release of the LiveDashboard library allows us to visualize our application metrics, performance and behavior in real-time.

Because Custom Elements are real DOM elements, they can be created from LiveView just like any other. The LiveView hook mechanism is described in LiveView’s docs.