Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Phoenix LiveView, finally

Simon Prévost
May 08, 2019
Technology
0
41

Phoenix LiveView, finally

Comment est-ce que Phoenix.LiveView nous amène à créer des comportements riches dans nos applications web sans architecture frontend complexe. Où et comment appliquer les concepts pour bénéficier des forces de BEAM dans votre navigateur.

Simon Prévost

May 08, 2019
Tweet

More Decks by Simon Prévost

See All by Simon Prévost
GraphQL & Absinthe
simonprev
1
81
Git & GitHub 101
simonprev
0
200
Intro Elixir
simonprev
1
55

Other Decks in Technology

See All in Technology
WACATE2024冬セッション資料（ユーザビリティ）
scarletplover
0
210
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
開発生産性向上！ 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
390
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
120
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
380
Fanstaの１年を大解剖！ 一人SREはどこまでできるのか！？
syossan27
2
170
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
150
ハイテク休憩
sat
PRO
2
160
MLOps の現場から
asei
6
650
レンジャーシステムズ | 会社紹介（採用ピッチ）
rssytems
0
150
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
17
14k

Featured

See All Featured
A Philosophy of Restraint
colly
203
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Side Projects
sachag
452
42k
Code Reviewing Like a Champion
maltzj
520
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Bash Introduction
62gerente
608
210k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k

Transcript

  1. Phoenix LiveView, finally. VERSION 1.0 - MAI 2019

  2. Phoenix LiveView, finally MIREGO ACADEMY Objectifs Comprendre pourquoi et comment

    Phoenix LiveView révolutionne le développement d’application server-side riche. Structure Phoenix EEx LiveView Demo 1 2 3 4 Résumé . TITRE Phoenix LiveView, finally TYPE Google slide presentation DURÉE 20 min PRÉSENTATION DONNÉE PAR Simon Prévost AUDIENCE CIBLE Développeur web

  3. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    From: GET "/" To: <html></html>

  4. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    • Internet stuff • Cowboy stuff • Endpoint • Router • Controller • View • Templates Phoenix

  5. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    Endpoint plug(:canonical_host) plug(:force_ssl) plug(:basic_auth) plug(:session)

  6. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    • Internet stuff • Cowboy stuff • Endpoint • Router • Controller • View • Templates Phoenix

  7. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . View

    defmodule AppWeb.MyController do def index(conn, params) do conn |> put_view(AppWeb.MyView) |> render("index.json", params) end end defmodule AppWeb.MyView do def render("index.json", %{a: a, b: b}) do %{result: a + b} end end

  8. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . EEx

    (Embedded Elixir) # template.eex <%= a + b %> # sample.ex defmodule Sample do require EEx EEx.function_from_file(:def, :foo, "template.eex", [:a, :b]) end # iex Sample.foo(1, 2) #=> "3"

  9. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    Templates _ = var!(assigns) {:safe, [( tmp1 = ["" | "<h1>Listing Users</h1>\n\n<ul>\n "] [tmp1 | case(for(user <- Phoenix.HTML.Engine.fetch_assign(var!(assigns), :users)) do {:safe, [( tmp1 = [( tmp1 = ["" | "\n <li> "] [tmp1 | case(user.first_name()) do
  10. None

  11. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    LiveView Templates # template.leex foo <%= @direction_1 %> bar <%= @direction_2 %> baz %Phoenix.LiveView.Rendered{ static: ["foo", "bar", "baz"], dynamic: ["left", "right"] } # ["foo ", "left", " bar ", "right", " baz"]

  12. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    LiveView Concept defmodule AppWeb.Live.MyComponent do use Phoenix.LiveView end

  13. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    LiveView Concept • use GenServer • Declarative events on server-rendered HTML • Messages from client or server • Server-side diff tracking

  14. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    LiveView Concept # app.js import LiveSocket from "phoenix_live_view" let liveSocket = new LiveSocket("/live") liveSocket.connect() # endpoint socket "/live", Phoenix.LiveView.Socket

  15. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    LiveView Life-cycle mount/2 render/1

  16. Phoenix LiveView, finally MIREGO ACADEMY Phoenix LiveView, finally . Phoenix

    LiveView Life-cycle use Phoenix.LiveView def render(assigns) do ~L""" <button phx-click="inc_temperature"> + <%= @count %> </button> """ end def handle_event(:inc_temperature, _value, socket) do new_count = socket.assigns[:count] + 1 {:noreply, assign(socket, :count, new_count) end

  17. Demo

  18. Merci .