Phoenix Live View is a library for building interactive user interfaces with Elixir and Phoenix. It allows for building web UIs that feel like native apps by using push updates from the server instead of full page reloads. LiveView maintains interactive states and user sessions with the server through a process called a live connection. Some key features of LiveView include live templates to update parts of pages, lifecycle hooks to control updates, and a small JavaScript size.

1. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir

2. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Project Overview
Oct/18, 2018
Phoenix Live View
20862 Lines (58067 +, 37204 -)
LINES
461
COMMITS
57
AUTHORS
Chris McCord, José Valim,
Gary Rennie, Alex Garibay, & Scott Newcomer
MAINTAINERS

3. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
A live view...

4. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
A live view...

5. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Live Views Features

6. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Stateless Requests VS Live Views

7. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Use Cases

8. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Use Cases

9. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Life Cycle

10. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Life Cycle

11. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Live View Anatomy

12. Phoenix Live View Setup
Elixir Mexico City
Meetup
Phoenix Live Views
Elixir

13. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Phoenix Live View Setup
* 192c3cd hace 8 semanas Carlo Gilmar Step 9 Import live css
* 011d500 hace 8 semanas Carlo Gilmar Step 8: Enable live reload in dev mode
* 5907daa hace 8 semanas Carlo Gilmar Step 7: Connecting the socket in app.js
* f02fdaf hace 8 semanas Carlo Gilmar Step 6: Adding JS live view dependency
* c493485 hace 8 semanas Carlo Gilmar Step 5 Adding websocket in endpoint
* 196edd9 hace 8 semanas Carlo Gilmar Step 4: Adding imports in main Web file
* 979d855 hace 8 semanas Carlo Gilmar Step 3: Adding plugs in router
* 942aff2 hace 8 semanas Carlo Gilmar Step 2 Adding signing salt and engine template
* ecb8c8d hace 8 semanas Carlo Gilmar Step 1: Adding live view dep
* 124a1bd hace 8 semanas Carlo Gilmar First commit

14. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Live View Engine
%Phoenix.LiveView.Rendered{
static: ["foo", "bar", "baz"],
dynamic: ["left", "right"]
}

15. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Live View Engine
<%= for point <- @points do %>
x: <%= point.x %>
y: <%= point.y %>
<% end %>
%Phoenix.LiveView.Comprehension{
static:
["n x: ", "n y: ", "n"],
dynamics:
[
["1", "2"],
["3", "4"]
]
}

16. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
JS size
29K
LiveView.js + morphdom
88K
Vue 2.5.20
112K
React 16.6.3 + React DOM
468K
Ember 3.0.0.beta.2

17. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Elixir Projects
Phoenix
Live Views
Texas

18. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir

19. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir

20. Elixir Mexico City
Meetup
Phoenix Live Views
Elixir
Thanks!