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

Phoenix LiveView, finally

Simon Prévost
May 08, 2019
Technology
0
40

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
80
Git & GitHub 101
simonprev
0
200
Intro Elixir
simonprev
1
55

Other Decks in Technology

See All in Technology
The Rise of LLMOps
asei
7
1.5k
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
120
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
630
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
120
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
120
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
A designer walks into a library…
pauljervisheath
204
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
The World Runs on Bad Software
bkeepers
PRO
65
11k

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 .