DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Elxpro
Elxpro

Posted on

Descubra como utilizar Hooks com Phoenix e Liveview

Saudacao

Seja muito bem vindo, seja muito bem vinda ao #FullstackElxpro

Aqui nΓ³s discutimos as estratΓ©gias e dicas de sua jornada de aprendizado em Elixir. Isso Γ© do zero atΓ© a sua primeira vaga como desenvolvedor elixir

Eu sou o Gustavo e o tema de hoje Γ©: Descubra como utilizar Hooks com Phoenix e Liveview

_ps: Voce pode acompanhar o artigo com o video

Quer aprender mais sobre elixir em um canal do Telegram?
https://elxpro.com/elxcrew-org-yt-descr

O que sao Hooks com Liveview?

O hook nada mais e do que um "gancho", onde voce pode enviar eventos para o servidor e vice e versa.

Qual a Diferença entre Hooks e Liveview no dia a dia?

A principal diferenca e que os hooks e uma maneira de enviar e receber dados do frontend/backend para o browser utilizando uma sintaxe de javascript com Elixir, parece muito com uma pagina em liveview ou nada de novo. Mas a maior diferenca e que no dia a dia o Liveview se encarrega de quase todo esse trabalho o Hook e uma maneira onde voce precisa de manipular o DOM para algo bem especifico que utilizando liveview seria quase impossivel. O exemplo mais comum e ouvir a pagina e esperar que ao chegar no fim, carregar novos elementos, o Javascript te da esse recurso muito facil o hook vai te ajudar a enviar para o seu servidor. Outro exemplo seria manipular um mapa, acessar recursos de geolocalizacao, bluetooth, wifi entre outros apenas com o browser, e o hooks vai te ajudar nesses processsos. Enquanto o Liveview vai ficar responsavel pelo trabalho cotidiano como, CRUD, Realtime, tabelas, notificacoes, interacao backend e frontend comum.

Por quΓͺ entender sobre Hooks Γ© importante?

Como eu mencionei acima, alguns eventos e acessos a recursos do Browser so e possivel atravez do Javascript e entender sobre Hooks te da flexibilidade de trabalhar com Liveview e Elixir sem perder as funcionalidades.

Quais as vantagens de usar Hooks?

Na minha experiencia a principal vantagem e acessar os recursos do computador como: Geolocalizacao, Bluetooth, wifi... entre outros e voce pode conferir com as imagens abaixo.

Geolocalizacao

https://www.w3schools.com/html/html5_geolocation.asp

console.log(navigator)

Enter fullscreen mode Exit fullscreen mode

Image description

Por onde começar?

O primeiro passo e sempre entender quando ha a necessidade do hook, entendendo a necessidade e o liveview nao consegue suprir, comece com um hook vide a documentacao

Determine os elementos principais de um Hook

Os elementos principais de um hook sao: id e phx-hook="HookName" conforme a imagem abaixo:

<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />

<div id="mirror"></div>
Enter fullscreen mode Exit fullscreen mode

Apos a definicao o voce vai receber o primeiro erro no seu browser conforme a imagem abaixo:

Image description

Crie uma estrutura de pasta para hooks e Crie o seu hook

Em assets/js/app.js crie a possibilidade de acessar hooks. O ideal e sempre deixar hooks separados em pasta pois pode se tornar uma bagunca.

Image description

Apos definir a chamada do arquivo de hooks, o interessante e criar um arquivo para sempre apontar os hooks como voce pode ver a imagem, na pasta hooks criar os hooks. Veja a imagem abaixo.

Image description

E agora criar o hook como foi definido no input como MirrorValues e agora e so chamar a classe Js,

Image description

O que foi criar e simplemente uma funcao com o nome do Hook, onde chama o mounted que e executado quando o nosso elemento esta adicionado na nossa tela.

E o que nosso hook faz nao e nada mais nada menos que simplemente pegar o dado do input e incluir em uma tag div.mirror

Existe alguma exceção em que Hooks não é bom?

Quando comeca a substituir o trabalho pesado do Liveview nao e indicado.

Finalizacao:

Eu espero que voce tenha gostado desse artigo e tenha te ajudado a saber quando/nao utilizar hooks :D

Redes Sociais:

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.