Phoenix LiveView Demystified

Phoenix LiveView is here to empower developers to build rich, real-time user experiences in Elixir without needing to write JavaScript. At the surface, this may seem like magic, but a closer look reveals how Phoenix leverages the primitives of the platform, with some front-end help from Morphdom.js, to make this programming model a compelling choice for beginners or experts alike.

Starting from the server to the browser, we’ll explore what makes Phoenix LiveView possible. Along the way, we’ll learn tips and tricks to make the most of your LiveView applications while seeing how Phoenix Channels and LiveEEx templates power the internals. We’ll also learn how LiveView is an abstraction over GenServer, giving us resiliency in the browser. Finally, we’ll cover how Phoenix LiveView interacts with JavaScript to provide bidirectional communication of events between the server and the browser.

Whether you’re a new or seasoned Elixir developer, you’ll leave with a new mental model of how Phoenix LiveView works to drive real-time user experiences all from server-rendered HTML.

Transcript

1. Phoenix LiveView Demystified
2. Alex Garibay DockYard | Phoenix Core @_alexgaribay alexgaribay
3. Phoenix LiveView [is a library that] enables rich, real-time user experiences with server- rendered HTML. ” “
4. Less of this
5. More of this!
6. But how?
8. Live EEx Phoenix Channels JavaScript
9. Live EEx
10. clock.html.leex ~L""" <p>The time is <%= @time %>.</p> """
11. Live EEx at Compile-time
12. ~L""" Hello, <%= @name %>. """
13. [ "Hello, ", {:@, [line: 11], [{:name, [line: 11], nil}]}, "." ] ~L""" Hello, <%= @name %>. """
14. # Statics and Vars [ "Hello, ", {:arg0, [], Phoenix.LiveView.Engine}, "." ] # Dynamics [ {:=, [], [ {:arg0, [], Phoenix.LiveView.Engine}, {{:., [], [Phoenix.LiveView.Engine, :to_safe]}, [], [{:@, [line: 11], [{:name, [line: 11], nil}]}]} ] } ]
15. arg0 = case(Phoenix.LiveView.Engine.changed_assign?(__changed__, :name)) do true -> case(__prints__) do %{0 => {_, _} = print} -> Process.put({Phoenix.LiveView.Engine, :fingerprint}, print) %{} -> :ok end case(Phoenix.LiveView.Engine.fetch_assign!(assigns, :name)) do %{__struct__: Phoenix.LiveView.Rendered} = other -> other {:safe, data} -> data bin when is_binary(bin) -> Plug.HTML.html_escape_to_iodata(bin) other -> Phoenix.HTML.Safe.to_iodata(other) end false -> nil end
16. %Phoenix.LiveView.Rendered{ static: [ "Hello, ", "." ], dynamic: [ ] fingerprint: 216187664090110924469697367378888494464 } arg0
17. %Phoenix.LiveView.Rendered{ static: [ "Hello, ", "." ], dynamic: [ ] fingerprint: 216187664090110924469697367378888494464 } "ElixirConf"
18. iodata nil %Phoenix.LiveView.Rendered{} %Phoenix.LiveView.Comprehension{}
19. <%= for point <- @points do %> x: <%= point.x %> y: <%= point.y %> <% end %>
20. <%= for point <- @points do %> x: <%= point.x %> y: <%= point.y %> <% end %> points = [ %{x: 1, y: 2}, %{x: 3, y: 4} ] !20
21. %Phoenix.LiveView.Comprehension{ static: [ "\n x: ", "\n y: ", "\n" ], dynamics: [ ["1", "2"], ["3", "4"] ] }
22. Mounting to the DOM
23. # In a router live "/", ClockLive # In a controller live_render(conn, ClockLive, session: %{}) # In a template live_render(conn, ClockLive, session: %{})
24. <div id="phx-xeR6nJ8t" data-phx-session="SQyY.g3QACZAN8XasAQ.RnkD" data-phx-view="MyAppWeb.ClockLive"> <!-- rendered LiveView template --> </div>
25. <div id="phx-xeR6nJ8t" data-phx-session="SQyY.g3QACZAN8XasAQ.RnkD" data-phx-view="MyAppWeb.ClockLive"> <!-- rendered LiveView template --> </div>
26. <div id="phx-xeR6nJ8t" data-phx-session="SQyY.g3QACZAN8XasAQ.RnkD" data-phx-view="MyAppWeb.ClockLive"> <!-- rendered LiveView template --> </div>
27. <div id="phx-xeR6nJ8t" data-phx-session="SQyY.g3QACZAN8XasAQ.RnkD" data-phx-view="MyAppWeb.ClockLive"> <!-- rendered LiveView template --> </div>
28. <div id="phx-xeR6nJ8t" data-phx-session="SQyY.g3QACZAN8XasAQ.RnkD" data-phx-view="MyAppWeb.ClockLive"> <!-- rendered LiveView template --> </div>
29. <div id="phx-xeR6nJ8t" data-phx-session="SQyY.g3QACZAN8XasAQ.RnkD" data-phx-view="MyAppWeb.ClockLive"> <!-- rendered LiveView template --> </div> container: {:p, class: "rounded"}
30. <p class="rounded" id="phx-xeR6nJ8t" data-phx-session="SQyY.g3QACZAN8XasAQ.RnkD" data-phx-view="MyAppWeb.ClockLive"> <!-- rendered LiveView template --> </p> container: {:p, class: "rounded"}
31. Phoenix Channels
32. socket "/live", Phoenix.LiveView.Socket
33. channel "lv:*", Phoenix.LiveView.Channel
34. "lv:phx-xeR6nJ8t"
35. "lv:phx-xeR6nJ8t" %{ # Params from JavaScript LiveSocket object "params" => %{ "timezone" => “America/Denver" }, # data-phx-session "session" => "SQyYk.g3QACZAN8XasAQ.RnkD" }
36. "lv:phx-xeR6nJ8t" %{ # Params from JavaScript LiveSocket object "params" => %{ "timezone" => “America/Denver" }, # data-phx-session "session" => "SQyYk.g3QACZAN8XasAQ.RnkD" }
37. "lv:phx-xeR6nJ8t" %{ # Params from JavaScript LiveSocket object "params" => %{ "timezone" => “America/Denver" }, # data-phx-session "session" => "SQyYk.g3QACZAN8XasAQ.RnkD" }
38. "lv:phx-xeR6nJ8t" %{ # Params from JavaScript LiveSocket object "params" => %{ "timezone" => "America/Denver" }, # data-phx-session "session" => %{ id: "phx-xeR6nJ8t", parent_pid: nil, router: MyAppWeb.Router, session: %{}, view: MyAppWeb.ClockLive } }
39. <button phx-click="my_click_event" phx-value="button's value" > Click </button>
40. <button phx-click="my_click_event" phx-value="button's value" > Click </button> %Phoenix.Socket.Message{ event: "event", join_ref: "1", payload: %{ "event" => "my_click_event", "type" => "click", "value" => "button's value" }, ref: "2", topic: "lv:phx-xeR6nJ8t" }
41. <button phx-click="my_click_event" phx-value="button's value" > Click </button> %Phoenix.Socket.Message{ event: "event", join_ref: "1", payload: %{ "event" => "my_click_event", "type" => "click", "value" => "button's value" }, ref: "2", topic: "lv:phx-xeR6nJ8t" }
42. <button phx-click="my_click_event" phx-value="button's value" > Click </button> %Phoenix.Socket.Message{ event: "event", join_ref: "1", payload: %{ "event" => "my_click_event", "type" => "click", "value" => "button's value" }, ref: "2", topic: "lv:phx-xeR6nJ8t" }
43. <button phx-click="my_click_event" phx-value="button's value" > Click </button> %Phoenix.Socket.Message{ event: "event", join_ref: "1", payload: %{ "event" => "my_click_event", "type" => "click", "value" => "button's value" }, ref: "2", topic: "lv:phx-xeR6nJ8t" } view_module.handle_event("my_click_event", "button's value", socket)
44. JavaScript
45. ❤
46. import LiveSocket from "phoenix_live_view" let liveSocket = new LiveSocket("/live") liveSocket.connect()
47. import LiveSocket from "phoenix_live_view" let liveSocket = new LiveSocket("/live") liveSocket.connect()
48. import LiveSocket from "phoenix_live_view" let liveSocket = new LiveSocket("/live") liveSocket.connect()
49. const selector ='[data-phx-view]:not([data-phx-parent-id])' document.querySelectorAll(selector)
50. let parent = null let href = window.location.href let view = new View(lvContainer, liveSocket, parent, href) view.join()
51. let parent = null let href = window.location.href let view = new View(lvContainer, liveSocket, parent, href) view.join()
52. let parent = null let href = window.location.href let view = new View(lvContainer, liveSocket, parent, href) view.join()
53. { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } }
54. { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } }
55. { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } }
56. { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } }
57. let {rendered} = { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } } let static = rendered.static
58. let {rendered} = { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } } let static = rendered.static static[0] + rendered[0] + static[1]
59. "<p>The time is " + "10:10" + ".</p>\n"
60. { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } }
61. { "rendered": { "0": "10:10", "static": [ "<p>The time is ", ".</p>\n" ] } } { "diff": { "0": "10:11" } }
62. { "rendered": { "0": "10:11", "static": [ "<p>The time is ", ".</p>\n" ] } }
63. Morphdom.js
64. var morphdom = require('morphdom') var source = document.createElement('p') source.innerHTML = 'The time is 10:10.' // '<p>The time is 10:10.</p>' var desired = '<p>The time is 10:11.</p>' morphdom(source, desired)
66. Putting It All Together
68. GET /
69. <HTML></HTML>
71. WS /live
73. { "rendered": { … } }
74. { "rendered": { … } }
76. "click"
77. "click"
78. { "diff": { … } }
79. { "diff": { … } }
81. Live EEx Phoenix Channels JavaScript
82. Thanks for listening! @_alexgaribay alexgaribay