I’ve been hopping around trying to learn Phoenix/Phoenix LiveView. Phoenix I think I finally got my head wrapped around but finding good resources on LiveView that is up-to-date is proving difficult. I always go to the documentation first but LiveView’s docs…are not really helping me that much.
I’ll give some examples of stuff I’m struggling with but I’d prefer some resources I can turn to so I don’t have to keep bothering people with questions.
I’m watching this video on creating a twitter clone with LiveView. It’s three years old so I expect some info to be outdated but that’s usually fine as when I run into something that doesn’t work I can usually refer to the docs.
Seems like Heex has changed a lot
In the video they are using stuff like;
<%= for post <- @posts do %>
//...
<% end %>
but when opening up what I got from mix phx.gen.live I’m seeing things like
<.table
id="posts"
rows={@streams.posts}
row_click={fn {_id, post} -> JS.navigate(~p"/posts/#{post}") end}
>
<:col :let={{_id, post}} label="Username"><%= post.username %></:col>
//...
So, I tried to figure out what @streams was but couldn’t really find anything by searching for it in the docs that explains it. There is a stream/4 function but that doesn’t seem to be the same thing.
The generated code also seems to not really use <%= %> syntax and instead uses <.thing>< /.thing> or <:something></:something> syntax. I’m really not sure what’s happening here. I found one section in the docs that mentioned
Or when using function components:
<.show_name name={@user.name} />
But doesn’t go on to explain what a function component is. I’m not really sure how to iterate over my posts. When doing for post <- @posts I get back an %{id, post} struct but not sure how I pattern match on that in heex.
Also, no idea what things like <:col and <:action are doing. I know it’s refering to some kind of atom but do I need to use this syntax now? Should any HTML element I create be named as an atom? <:div> instead of <div>?
PubSub vs Stream?
In the video they use PubSub to do real time updates, this seems to have been replaced by streams. So like…what is a stream? I can’t really find anything in the docs. Playing with the code I’ve kind of figured out what they’re doing. There doesn’t seem to be any concrete examples or explanations on them in the docs though. Am I missing something or is it just supposed to be obvious and I’m dumb?
I’m sure I’ll run into more
This has just been what i’ve run into going through this one tutorial (which I haven’t even finished yet). I tried looking at some of the community resources they suggest in the github but a lot of those are behind expensive paywalls (listed as free though) or books you need to buy. I haven’t gone through the full list yet though, so I’ll keep searching.
