Watching Phoenix LiveView Talk by Chris McCord

Learning Resources Talks
,
1

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.

9 Likes
2

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

6 Likes
3

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

4 Likes
4

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
5

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html#content

6

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

2 Likes
7

This feels like a good starter for JS.

1 Like
8

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

1 Like
9

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.

10

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)

EDIT:

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: @post.id,
-    title: @page_title,
-    action: @live_action,
-    post: @post,
-    return_to: Routes.post_show_path(@socket, :show, @post) %>
+  <.modal
+    component={DemoWeb.PostLive.FormComponent}
+    id={@post.id}
+    title={@page_title}
+    action={@live_action}
+    post={@post}
+    return_to={Routes.post_show_path(@socket, :show, @post)} />
 <% end %>
2 Likes