Greeting
Hello #devElixir!!! Welcome to #FullStackElxpro
Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer
I am Gustavo and today's theme is: Getting Started Using Hooks with Phoenix and Liveview
Do you want to learn Elixir in three months? https://elxpro.com/sell
_ps: You can follow the article with VIDEO
Want to learn more about elixir on a Telegram channel?
https://elxpro.com/subscribe-elxcrew
What are Hooks with Liveview?
The hook is nothing more than a "hook", where you can send events to the server and vice versa.
What is the Difference between Hooks and Liveview in everyday life?
The main difference is that hooks are a way to send and receive data from the frontend/backend to the browser using a javascript syntax with Elixir, it looks a lot like a LiveView page or nothing new. But the biggest difference is that on a day-to-day basis Liveview takes care of almost all this work, the Hook is a way where you need to manipulate the DOM for something very specific that using LiveView would be almost impossible. The most common example is to listen to the page and wait that when you reach the end, load new elements, Javascript gives you this very easy resource, the hook will help you send it to your server. Another example would be manipulating a map, accessing geolocation resources, BlueTooth, wifi among others only with the browser, and hooks will help you in these processes. While Liveview will be responsible for everyday work like CRUD, real-time, tables, notifications, backend, and common frontend interaction.
Why is understanding Hooks important?
As I mentioned above, some events and access to Browser resources so that it is possible through Javascript and understanding about Hooks gives you the flexibility to work with Liveview and Elixir without losing functionality.
What are the advantages of using Hooks?
In my experience, the main advantage is access to computer resources such as Geolocation, Bluetooth, wifi... among others and you can check with the images below.
Geolocation
https://www.w3schools.com/html/html5_geolocation.asp
console.log(navigator)
Where to start?
The first step is always to understand when there is a need for the hook, understanding the need and LiveView cannot supply, start with a hook see documentation
Determine the main elements of a Hook
The main elements of a hook are id and phx-hook="HookName" as shown in the image below:
<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />
<div id="mirror"></div>
After the definition you will receive the first error in your browser as follows:
Create a folder structure for hooks and Create your hook
In assets/js/app.js create a possibility to access hooks. The ideal is always separate hooks in dough as they can make a mess.
After defining the hooks file call, and creating a file to always point the hooks as you can see the image, in the hooks folder create hooks. See the image below.
And now create the hook as defined in input as MirrorValues and now and call the Js class,
What was created is simply a function with the name of the Hook, where mounted was executed when our element was added to our screen.
And what our hook does is nothing less than simply taking the input data and including it in a div.mirror tag
Is there any exception where Hooks is not good?
When starting to replace Liveview heavy lifting is not indicated.
Wrap up:
I hope you enjoyed this article and it helped you to know when/not to use hooks :D
Social networks:
Top comments (2)
I'm working with several charts on a Phoenix dashboard. Right now they're not "live".
Do you recommend using Hooks to push new data with chart.js for example?
yes of course!! it is much more simpler :D Hooks is one of the best tools that I have been seen :D.