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

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