Phoenix LiveView: Making modern web apps without JavaScript Miloš Mošić https://milosmosic.com 1 / 27 

Who am I? 2 / 27 

Who am I? Senior Software Engineer at Mainframe 3 / 27 

Who am I? Senior Software Engineer at Mainframe Worked with Elixir & Phoenix since 2014 4 / 27 

Who am I? Senior Software Engineer at Mainframe Worked with Elixir & Phoenix since 2014 Helped spread Elixir by introducing it into Evercam 5 / 27 

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 

What is Elixir? 7 / 27 

What is Phoenix? 8 / 27 

What is Phoenix LiveView? 9 / 27 

What is Phoenix LiveView? A brand new library for Phoenix 10 / 27 

What is Phoenix LiveView? A brand new library for Phoenix Made by the Phoenix creator, Chris McCord 11 / 27 

What is Phoenix LiveView? A brand new library for Phoenix Made by the Phoenix creator, Chris McCord Not released yet 12 / 27 

What is Phoenix LiveView? 13 / 27 

What would you use Phoenix LiveView for? 14 / 27 

Killing JavaScript 15 / 27 

How does it work? 16 / 27 

Simple example 17 / 27 

defmodule DemoWeb.ImageView do use Phoenix.LiveView def render(assigns) do ~L""" <%= @width %>px 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) %>
""" end def radio_tag(assigns) do ~L""" /> """ 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 

def deps do [ {:phoenix_live_view, github: "phoenixframework/phoenix_live_view"} ] end https://github.com/phoenixframework/phoenix_live_view 19 / 27 

defmodule DemoWeb.ImageView do use Phoenix.LiveView end 20 / 27 

def render(assigns) do ~L""" <%= @width %>px 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) %>
""" end 21 / 27 

def radio_tag(assigns) do ~L""" /> """ 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 

Example one more time 23 / 27 

How does it work? 24 / 27 

Wait, holding an open websocket connection for every single page? 25 / 27 

https://phoenixframework.org/blog/the-road-to-2-million-websocket-connections 26 / 27 

Thank You! Questions? 27 / 27