Présentation de Frédérick Capovilla dans le cadre du Web à Québec (WAQ) 2021. Piste développement.

1. Phoenix LiveView
Web interactif côté serveur

2. Architecture initiale
HTML + JS
Serveur web
Navigateur

3. Application Javascript
HTML JSON
HTML + JS
Framework Javascript

4. Une autre approche?
HTML + JS
Websocket

5. Phoenix LiveView
Elixir
Phoenix
Websockets

6. Code d’une LiveView
defmodule MyAppWeb.HelloWorldLive do
use Phoenix.LiveView
def mount(_session, socket) do
{:ok, assign(socket, message: "Hello WAQ!!!")}
end
def render(assigns) do
~L"""
<div>Message: <%= @message %></div>
"""
end
end

7. Code d’une LiveView
defmodule MyAppWeb.HelloWorldLive do
use Phoenix.LiveView
def mount(_session, socket) do
{:ok, assign(socket, message: "Hello WAQ!!!")}
end
def render(assigns) do
~L"""
<div>Message: <%= @message %></div>
"""
end
end

8. Code d’une LiveView
defmodule MyAppWeb.HelloWorldLive do
use Phoenix.LiveView
def mount(_session, socket) do
{:ok, assign(socket, message: "Hello WAQ!!!")}
end
def render(assigns) do
~L"""
<div>Message: <%= @message %></div>
"""
end
end

9. Utiliser une LiveView
# Template
<%= Phoenix.LiveView.live_render(@conn, DemoWeb.HelloWorldLive ) %>
# Routeur
live "/hello", DemoWeb.HelloWorldLive
# Controlleur
Phoenix.LiveView.Controller.live_render(conn, DemoWeb.HelloWorldLive )

10. Ajouter de l’interactivité
def render(assigns) do
~L"""
<div>Message: <%= @message %></div>
<button phx-click="add_message">
Ajouter WAQ!!!
</button>
"""
end
def handle_event("add_message", _value, socket) do
message = socket.assigns.message <> "WAQ!!!"
{:noreply, assign(socket, message: message)}
end

11. Ajouter de l’interactivité
def render(assigns) do
~L"""
<div>Message: <%= @message %></div>
<button phx-click="add_message">
Ajouter WAQ!!!
</button>
"""
end
def handle_event("add_message", _value, socket) do
message = socket.assigns.message <> "WAQ!!!"
{:noreply, assign(socket, message: message)}
end

12. Fonctionnement
GET /home
HTML + JS
liveSocket.connect()
Socket connecté
phx-click
Fragments HTML

13. Réponse serveur
["1", "4", "lv:phx-FHOaenCt", "phx_reply", {
"response": {
"diff": {
"0": "Hello WAQ!!!WAQ!!!WAQ!!!"
}
},
"status": "ok"
}]

14. Partager des informations entre les utilisateurs
def mount(_session, socket) do
Phoenix.PubSub.subscribe(MyApp.PubSub, "topic")
{:ok, assign(socket, message: "Hello WAQ!!!" )}
end
def handle_info(%{message: message}, socket) do
{:noreply, assign(socket, message: message)}
end
def handle_event("add_message", _value, socket) do
message = socket.assigns.message <> "WAQ!!!"
Phoenix.PubSub.broadcast(MyApp.PubSub, "topic", %{message: message})
{:noreply, socket}
end

15. Partager des informations entre les utilisateurs
def mount(_session, socket) do
Phoenix.PubSub.subscribe(MyApp.PubSub, "topic")
{:ok, assign(socket, message: "Hello WAQ!!!")}
end
def handle_info(%{message: message}, socket) do
{:noreply, assign(socket, message: message)}
end
def handle_event("add_message", _value, socket) do
message = socket.assigns.message <> "WAQ!!!"
Phoenix.PubSub.broadcast(MyApp.PubSub, "topic", %{message: message})
{:noreply, socket}
end

16. Partager des informations entre les utilisateurs
def mount(_session, socket) do
Phoenix.PubSub.subscribe(MyApp.PubSub, "topic")
{:ok, assign(socket, message: "Hello WAQ!!!")}
end
def handle_info(%{message: message}, socket) do
{:noreply, assign(socket, message: message)}
end
def handle_event("add_message", _value, socket) do
message = socket.assigns.message <> "WAQ!!!"
Phoenix.PubSub.broadcast(MyApp.PubSub, "topic", %{message: message})
{:noreply, socket}
end

17. Résultat

18. Avantages
Simple
Performant
Temps réel

19. Limitations
Pas de “hors-ligne”
Latence
Mémoire serveur

20. Cas d’utilisation
Formulaires dynamiques
Tableaux de bord
Outils collaboratifs
Jeux multijoueur

21. Conclusion
HTML + JS
Websocket