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

Phoenix LiveView, finally

Simon Prévost
May 08, 2019
Technology
0
34

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
78
Git & GitHub 101
simonprev
0
190
Intro Elixir
simonprev
1
53

Other Decks in Technology

See All in Technology
[TimeTree] Aurora から Spanner への 移行の決断と背景
3utama
2
2.6k
やらない事を決めるプロダクト設計
rukiadia
5
3.4k
社内でAWS GameDayを開催しよう
athagi
1
150
One screen, many BottomSheets
keithyokoma
0
150
SSII2024 [OS1] 自動運転における 重要技術とトレンド紹介
ssii
PRO
0
250
Redmineチューニングの実際と限界 - Redmine performance tuning
akahane92
10
15k
クラウドネイティブな省エネサービスの内製開発で、BizDevOpsを実現する / Achieving BizDevOps in in-house development of cloud-native energy-saving services
genkiogasawara
1
270
オブザーバビリティ勉強会で模擬障害対応をやってみた
leveragestech
1
360
JVM言語でもできる、競技プログラミング
dhirabayashi
0
140
go get で考慮している ファイルシステムの挙動について
shinnosuke_kishida
3
640
Gemini in AppSheet_吉積情報株式会社 石見
comucal
PRO
0
2.2k
スケーラビリティの課題解決に向けたココナラのデータベース移行戦略
coconala_engineer
1
420

Featured

See All Featured
The Invisible Side of Design
smashingmag
294
50k
Into the Great Unknown - MozCon
thekraken
16
1.2k
Automating Front-end Workflow
addyosmani
1359
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
21k
What's new in Ruby 2.0
geeforr
338
31k
Building Applications with DynamoDB
mza
89
5.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
5
250
Designing Experiences People Love
moore
136
23k
Docker and Python
trallard
36
2.8k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
What's in a price? How to price your products and services
michaelherold
238
11k
How to name files
jennybc
66
94k

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 .