Phoenix LiveView - Making modern web apps without JavaScript

https://www.meetup.com/elixirbelgrade/events/261344984/

Transcript

1. Phoenix LiveView: Making modern web apps without JavaScript Miloš Mošić https://milosmosic.com 1 / 27
2. Who am I? 2 / 27
3. Who am I? Senior Software Engineer at Mainframe 3 / 27
4. Who am I? Senior Software Engineer at Mainframe Worked with Elixir & Phoenix since 2014 4 / 27
5. Who am I? Senior Software Engineer at Mainframe Worked with Elixir & Phoenix since 2014 Helped spread Elixir by introducing it into Evercam 5 / 27
6. Who am I? Senior Software Engineer at Mainframe Worked with Elixir & Phoenix since 2014 Helped spread Elixir by introducing it into Evercam Gave a talk at the first Elixir Conf EU 6 / 27
7. What is Elixir? 7 / 27
8. What is Phoenix? 8 / 27
9. What is Phoenix LiveView? 9 / 27
10. What is Phoenix LiveView? A brand new library for Phoenix 10 / 27
11. What is Phoenix LiveView? A brand new library for Phoenix Made by the Phoenix creator, Chris McCord 11 / 27
12. What is Phoenix LiveView? A brand new library for Phoenix Made by the Phoenix creator, Chris McCord Not released yet 12 / 27
13. What is Phoenix LiveView? 13 / 27
14. What would you use Phoenix LiveView for? 14 / 27
15. Killing JavaScript 15 / 27
16. How does it work? 16 / 27
17. Simple example 17 / 27
18. defmodule DemoWeb.ImageView do use Phoenix.LiveView def render(assigns) do ~L""" <form phx-change="update"> <input type="range" min="10" max="630" name="width" value="<%= @width %>" /> <%= @width %>px <fieldset> White <%= radio_tag(name: :bg, value: "white", checked: @bg) %> Black <%= radio_tag(name: :bg, value: "black", checked: @bg) %> Blue <%= radio_tag(name: :bg, value: "blue", checked: @bg) %> </fieldset> </form> <br/> <img src="/images/phx.png" width="<%= @width %>" style="background: <%= @bg %>;" /> """ end def radio_tag(assigns) do ~L""" <input type="radio" name="<%= @name %>" value="<%= @value %>" <%= if @value == @checked, do: "checked" %> /> """ end def mount(_session, socket) do {:ok, assign(socket, width: 100, bg: "white")} end def handle_event("update", %{"width" => width, "bg" => bg}, socket) do {:noreply, assign(socket, width: String.to_integer(width), bg: bg)} end end 18 / 27
19. def deps do [ {:phoenix_live_view, github: "phoenixframework/phoenix_live_view"} ] end https://github.com/phoenixframework/phoenix_live_view 19 / 27
20. defmodule DemoWeb.ImageView do use Phoenix.LiveView end 20 / 27
21. def render(assigns) do ~L""" <form phx-change="update"> <input type="range" min="10" max="630" name="width" value="<%= @width %>" /> <%= @width %>px <fieldset> White <%= radio_tag(name: :bg, value: "white", checked: @bg) %> Black <%= radio_tag(name: :bg, value: "black", checked: @bg) %> Blue <%= radio_tag(name: :bg, value: "blue", checked: @bg) %> </fieldset> </form> <br/> <img src="/images/phx.png" width="<%= @width %>" style="background: <%= @bg %>;" /> """ end 21 / 27
22. def radio_tag(assigns) do ~L""" <input type="radio" name="<%= @name %>" value="<%= @value %>" <%= if @value == @checked, do: "checked" %> /> """ end def mount(_session, socket) do {:ok, assign(socket, width: 100, bg: "white")} end def handle_event("update", %{"width" => width, "bg" => bg}, socket) do {:noreply, assign(socket, width: String.to_integer(width), bg: bg)} end 22 / 27
23. Example one more time 23 / 27
24. How does it work? 24 / 27
25. Wait, holding an open websocket connection for every single page? 25 / 27
26. https://phoenixframework.org/blog/the-road-to-2-million-websocket-connections 26 / 27
27. Thank You! Questions? 27 / 27