Watching Phoenix LiveView Talk by Chris McCord

I am in middle of watching this. I have to stop every minute and think over what Chris just said.

The amount of info he sends over that youtube video in one minute is more than a page of a book :stuck_out_tongue:

Am i the only one who feels that way?

P.S. : I am 15 minutes past in this video and it’s been more than an hour looking at newly generated phoenix folder and understanding what he is trying to explain.


JS.* is really nice feature! Because things like hide/show and over simple user interactions has required external javascript library like Alpine.js to work without server interactions, but now JS.* will do all of that


This talk and tech is so incredibly awesome. Enjoyed every minute. Slots, JS, and navigating over websockets… super great! ty!!


Great Talk, great new features!

Is the code for the LiveView.JS part (ElixirConf 2021 - Chris McCord - The Future of Full-stack - YouTube) available somewhere?

Or any other material about this?

I’m not sure what’s possible with the tools provided. E.g. can I do sth like this:

<button phx-click={JS.push("clicked", value: someCustomJavascriptFunction()}>
1 Like

I’ve read that, but being lazy, I’d like a working demo-project.


This feels like a good starter for JS.

1 Like

I think that this commit contains the code that Chris used in his talk:

1 Like

Nice, I checked there earlier, but it didnt find any JS usage then. This repo is a real treasure trove, studying it is highly recommended.

Yes thats it, thank you.

Just had a look at this. The demo is there and running but relies on some local files, here are the steps to get it running.

  1. clone and checkout cm-js-cmds branch
  2. in /assets/js/app.js
- import {LiveSocket} from "./phoenix_live_view"
+ import {LiveSocket} from "phoenix_live_view"
  1. in mix.exs
- {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true},
+ {:phoenix_live_view, "~> 0.17.0"},
  1. update deps, setup ecto
  2. demo is at /posts (not on the overview page)


found one more thing to update:

--- a/lib/demo_web/live/post_live/show.html.heex
+++ b/lib/demo_web/live/post_live/show.html.heex
@@ -1,14 +1,16 @@
 <h1>Show Post</h1>
 <%= if @live_action in [:edit] do %>
-  <%= live_modal DemoWeb.PostLive.FormComponent,
-    id:,
-    title: @page_title,
-    action: @live_action,
-    post: @post,
-    return_to: Routes.post_show_path(@socket, :show, @post) %>
+  <.modal
+    component={DemoWeb.PostLive.FormComponent}
+    id={}
+    title={@page_title}
+    action={@live_action}
+    post={@post}
+    return_to={Routes.post_show_path(@socket, :show, @post)} />
 <% end %>