Phoenix LiveView, hooks et push_event : json_view

Phoenix LiveView est un framework puissant construit sur Elixir et offre une approche innovante pour créer des interfaces Web en temps réel sans avoir besoin de Javascript étendu.

Cependant, l'intégration avec des bibliothèques côté client existantes, comme celles destinées au graphisme, à la visualisation ou au rendu, peut parfois s'avérer un défi.

Dans cet article, nous explorerons comment intégrer Phoenix LiveView aux bibliothèques Javascript qui s'affichent directement dans le DOM.

Nous rencontrerons des hooks, qui nous permettent d'exécuter du Javascript sur certains éléments du cycle de vie d'un élément donné, et comment ces hooks permettent de diffuser des événements (en utilisant push_event en LiveView et pushEvent en Javascript) pour permettre le bidirectionnel communication en temps réel entre le client et le serveur.

Arrière-plan

TLDR : dans Phoenix LiveView, vous pouvez utiliser des hooks et push_event pour transmettre des données et laisser la bibliothèque côté client gérer le rendu.

json-view (démo) - qui affiche les objets JSON sur une page Web sous forme d'arborescence pouvant être développée et réduite - est un bon exemple de la façon dont certaines bibliothèques Javascript côté client prennent le contrôle du rendu dans le DOM et de l'interaction avec celui-ci. .

Travaillons sur un exemple de la façon d'intégrer cela avec les données JSON fournies par le serveur (LiveView). Nous enverrons des données statiques depuis le backend en réponse à un événement, mais ces données peuvent provenir de n'importe quelle source.

Ce qui suit suppose que vous avez configuré un projet Phoenix en utilisant mix phx.new, avec LiveView activé.

Configuration de la bibliothèque

Il existe plusieurs façons d'incorporer un package Javascript dans le Javascript de la page.

Recommander une configuration préférée sort du cadre de cet article, mais il existe deux manières principales :

• assets/vendor - dans le modèle de projet LiveView typique, la barre supérieure est placée dans ce répertoire et incluse dans le fichier de point d'entrée Assets/app/app.js. Cela convient aux bibliothèques plus petites et plus stables en général, en particulier si une version à fichier unique de la bibliothèque est fournie.
• NPM/Yarn - esbuild et webpack peuvent regrouper le fichier node_modules référencé dans un seul fichier de distribution. Cela convient aux bibliothèques plus grandes et plus complexes qui changent plus fréquemment.

Le problème avec json-view

Il existe deux modèles de rendu incompatibles lorsque l'on essaie de combiner les deux bibliothèques.

LiveView suit le modèle déclaratif : vous concevez la vue, déterminez quelles données doivent être affichées et LiveView détermine quels éléments de la page doivent être modifiés lorsque les données sous-jacentes sont modifiées.

Il y parvient en utilisant les attributions de socket dans le rendu :

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

Cependant, les bibliothèques comme json-view fonctionnent sur le modèle impératif. Nous précisons les étapes nécessaires pour afficher les données en Javascript, en dehors de la mise en page du DOM lui-même :

import jsonview from '@pgrabovets/json-view';

const data = '{"name": "json-view", "version": "1.0.0"}'
const tree = jsonview.create(data);
jsonview.render(tree, document.querySelector('.tree'));

Ces deux modèles sont aux antipodes. Nous n'avons apparemment aucun moyen de faire correspondre les deux méthodes de rendu des données (déclaratif et impératif), mais nous avons besoin de bibliothèques comme json-view pour restituer des interfaces riches sur le client.

Fondamentalement, nous devons exécuter du code Javascript lorsque le serveur demande un changement d'état de la page. Jetons un coup d'œil aux hooks, qui permettent de réconcilier ces deux modèles de rendu.

Configuration du crochet

Dans LiveView, les hooks sont le moyen d'assurer une communication bidirectionnelle entre le client (navigateur) et le serveur (LiveView), l'objet principal de la communication étant l'événement.

Les hooks sont définis dans le LiveSocket et attachés à un élément à l'aide de l'attribut phx-hook. Il existe un certain nombre de rappels, mais nous nous concentrerons sur le rappel monté, puisque nous pouvons coordonner tout le reste via des événements. Vous pouvez également fournir des rappels pour d'autres événements du cycle de vie - consultez la documentation.

Dans un rappel comme monté, le hook envoie des événements au backend à l'aide de this.pushEvent et gère les événements du serveur en enregistrant un gestionnaire pour un nom d'événement particulier à l'aide de this.handleEvent.

Il est important de noter qu'un seul hook est autorisé par élément, vous n'avez donc besoin de raisonner que sur un seul flux d'événements entre le client et le serveur.

Avec ces connaissances à l'esprit, définissons un hook JsonView qui enregistre un gestionnaire d'événements, qui appelle finalement jsonview.render sur l'élément pour restituer l'arborescence des données.

import { Socket } from 'phoenix';
import jsonview from '@pgrabovets/json-view';

const JsonViewHook = {
  mounted() {
    this.handleEvent("render_json", ({ data }) => {
      this.el.innerHTML = "";
      const tree = jsonview.create(data);
      jsonview.render(tree, this.el);
    });
  }
}

const liveSocket = new LiveSocket(
  "/live",
  Socket,
  {hooks: { JsonView: JsonViewHook }, ...}
 );
...

Nous faisons plusieurs choses dans ces plusieurs lignes de code :

1. Nous définissons un objet JsonViewHook avec une fonction montée. Cette fonction sera appelée lorsque l'élément avec ce hook sera monté dans le DOM.
2. À l'intérieur de monté, nous avons mis en place un écouteur d'événement pour un événement personnalisé appelé "render_json". Cet événement sera déclenché depuis notre LiveView.
3. Lorsque l'événement est reçu, il attend qu'un paramètre data contenant le JSON soit rendu.
4. Nous effaçons le contenu existant de l'élément.
5. Nous utilisons jsonview.create et jsonview.render pour restituer les données JSON dans notre élément.

Pour utiliser ce hook - il suffit d'ajouter l'attribut phx-hook avec le nom du hook ("JsonView") à un élément :

<div>



<h2>
  
  
  Sending events to the server
</h2>

<p>We’ll just need to trigger an event from the backend to provide this data. We’ll leave this outside the scope of this article for now - perhaps a button could trigger an event to the backend? - but you could use this.pushEvent from the mounted hook like so:<br>
</p>

<pre class="brush:php;toolbar:false">mounted() {
  this.pushEvent("send_json", {});
}

pour envoyer un événement au serveur LiveView qui peut être géré avec handle_info. La section pertinente de la documentation LiveView couvre plus de possibilités avec this.pushEvent, y compris un scénario dans lequel une fonction de gestionnaire peut être spécifiée pour gérer directement une charge utile de réponse.

Envoi d'événements depuis le serveur

push_event/3 est le moyen de transmettre un événement de LiveView au navigateur. Il peut être appelé à tout moment - y compris lors du montage - bien qu'une bonne pratique consiste à s'assurer que la page et tous ses éléments sont dans un état connu avant d'envoyer ces événements. Sinon, des événements seront supprimés silencieusement lors de la configuration de la page - une voie sûre vers l'imprévisibilité !

Écrivons une clause handle_event pour un événement que nous pourrions recevoir du client, qui transmet un événement au client :

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

C'est ça ! Et il y a de la flexibilité ici aussi. L'enregistrement des gestionnaires d'événements avec des noms à la fois sur le client et sur le serveur marque une séparation claire entre la gestion de l'événement et la façon dont l'événement est déclenché.

Poursuite de l'intégration

Nous avons vu un exemple simple d’intégration entre client et serveur. Une extension courante de cela consisterait à étendre certaines mises à jour à certains éléments, via l'utilisation de paramètres d'événement et d'attributs d'élément. Cela permet de réduire le nombre d'événements inutiles et le travail des gestionnaires.

Cette gestion des événements peut également être étendue pour une intégration plus étroite de la bibliothèque côté client avec le backend. Par exemple, ces bibliothèques Javascript émettent généralement des événements d'interaction utilisateur de niveau supérieur. Notre exemple de bibliothèque, json-view, ne fait pas cela, mais une bibliothèque de graphiques comme chart.js le fait.

Cependant, du point de vue de l'interaction utilisateur, un aller-retour vers le serveur pour le traitement doit généralement être évité. En règle générale, toute mise à jour de rendu basée sur des événements serait gérée par la bibliothèque de rendu côté client.

Mais capturer l'activité des utilisateurs pour d'autres raisons est un cas d'utilisation courant. Cela inclut la surveillance, la journalisation et l’analyse. Ceux-ci ne nécessitent pas de réponse, donc pushEvent depuis un hook peut être idéal pour ce type de traitement asynchrone sur le serveur.

Conclusion

L'intégration de puissantes bibliothèques Javascript côté client qui nécessitent un contrôle sur le DOM est un élément clé de la création d'interfaces utilisateur riches et dynamiques. Toutes les mises à jour des pages n'ont pas besoin d'être effectuées en temps réel, et conserver LiveView offre donc un moyen puissant mais simple de continuer à contrôler l'état des autres pages.

Se familiariser avec les hooks LiveView et leurs événements associés permet de les intégrer aux données provenant du serveur. Il est également important de noter que toutes les interactivités utilisateur ne nécessitent pas un aller-retour vers le serveur, et les interfaces que vous créerez seront plus flexibles et réactives lorsque vous utiliserez de puissantes bibliothèques Javascript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!