Programming Phoenix LiveView Book Club!

[AstonJ]

Welcome to our Programming Phoenix LiveView Book Club!

The book was recently updated for Phoenix 1.7 and LiveView 0.18 so we thought it was about time we had a book club on it!

The book cub is being led by @code-shoily and @mariusbutuc and participants are:

• @arcyfelix

• @BartOtten

• @codeanpeace

• @cpgo

• @Dabsy

• @dr.a

• @ericdouglas

• @experimentix

• @JuanjoA

• @Kurisu

• @m4hi2

• @Mostalive

• @Nefcairon

• @nietaki

• @Pal

• @pdgonzalez872

• @Swamy

• @Tbobbe

• @tradfursten

• @ivanhercaz

• @olivegarden

• @Hallski

• @akalan

• @gbarkhatov

Everyone is welcome to join the book club or to simply comment on anything you find interesting

[m4hi2]

Hello everyone! Looking forward to mastering Live View with you all!

[code-shoily]

Hello everyone. I have not started reading yet. Got the flu … Will do from the weekend if I fully recover by then

This is the plan I have regarding how I’ll proceed with the reading

• Will have a summary of a chapter once done, focusing on my thoughts, learnings and feeling about what I learned.

• Since I am treating this as part of mg deep dive into LV, I will dig elsewhere in the web on topics related to the chapters I just read (i.e related articles, discussions, tutorials) so we can dive deeper and have good supplement per chapter

• Aside from the ‘Pento’ app mentioned in the book, I will create a Playground like LV app where I will post snippets and share with y’all. Any aha moment Ot discoveries would be codified as snippets

That’s it. Also a reminder that there is an errata page on DevTalk and if you find any bugs or outdated information you know where to report and help the author.

I am looking forward to learning with you all. LiveView is a tech stack close to my heart and I am super excited to colearn it and brush up and strengthen my skills.

[dr.a]

Hi all… I’ve made my way through to the “your turn” section where the reader is invited to complete the game. While the book has been relatively accessible to a :noob like myself, generating my own code feels like a step beyond my sphere of confidence. If anyone feels like sharing code or tips, you’d have an audience of at least me

[ivanhercaz]

Hi! I have curiosity: what is done in book club?

[AstonJ]

There are no hard or fast rules Iván, tho we generally encourage people to post at least one update per chapter, and welcome others to join in with the conversation when they encounter anything of interest

Check out our latest book clubs here: bookclubs and here are our older ones book-club

[ivanhercaz]

Oh! All right, with your explanation and looking the past bookclubs I already understand the idea. I will try to participate

Thank you, @AstonJ!

[m4hi2]

Are you stuck where the author asks you to complete the code so that the time updates with each event trigger? If so, then in your mount/3 function add the time key with value time() like score and message. Then, inside the template, use @time instead of time(). Update the handle_event/3 func as well, doing the same as message and score for time.

Hope that helps.

Please Note: I intentionally left the instructions a little vague, so that you have some room to explore.

Sorry, just noticed there is a separate Your Turn section.

[m4hi2]

I’m a little bit confused. With the exercise part, I’m having difficulties with live_patch/3
I’m getting this error:

warning: Routes.live_path/2 is undefined (module Routes is not available or is yet to be defined)
  lib/pento_web/live/wrong_live.ex:46

I’m pulling the LiveView behaviour properly according to this post. still no luck.

Here’s the code if it helps.

[cpgo]

Did you generated a fresh phoenix project?
Just copied you wrong_live.ex and ran it on my project and it worked fine

Edit: I forgot to mention that I already completed a few chapters, I think I skipped ahead a bit because I was curious on how to implement JS interop

Really liking it so far, but I wish it was possible to embed a LiveView on an existing “DeadView” to make it possible to slowly port some features to LiveView, maybe thats possible but I cant find a exact answer to this.

[m4hi2]

Yes, the pheonix project was generated fresh.

[m4hi2]

So, out of curiosity, I generated another Phoenix project, with mix phx.new project and the results are unfortunately same

[code-shoily]

Today is being such a hectic day! I still didn’t get the time to try out the chapter. But looking at your code, what is Routes? I don’t see any Routes being aliases on pento_web.ex? Maybe they changed it on 1.7 and you might wanna try the new way of patching? Like mentioned here?

[cpgo]

Thats strange, this is the repo you are using right? GitHub - m4hi2/pento: Example Project in Programming Phoenix LiveView
Just cloned it and it worked fined (after setting the DB_USER and DB_PASS env vars)

[ericdouglas]

Hi everyone! Very excited to be part of this bookclub

This will be special to me since I currently work as a javascript/frontend developer, writing React applications for the past few years, but I listened about Elixir years ago and the language together with the Erlang VM changed my brain forever hehe

I’m genuinely very, very interested to see what possibilities LiveView brings to us to write rich clients (SPA-like) but cohesive applications using one language and one framework, for both the backend and frontend.

I did not start to read the book yet but I’ll this week

[code-shoily]

so, if you visit here: phoenix_live_view/helpers.ex at main · phoenixframework/phoenix_live_view · GitHub you’ll see that live_path no longer exists in 0.18. Which is why you were getting that error. Instead, you can go to pento_web.ex and set use Phoenix.Router, helpers: true, followed by using wrong_live instead of live_path. Like this:

<%= if @over do %>
  <%= live_redirect to: Routes.wrong_path(@socket, :guess) do %>
    <button>Try again!</button>
  <% end %>
<% end %>

or something like that. Or you could just use the new way and do a

<%= if @over do %>
  <.link href={~p"/guess"}>Try Again</.link>
<% end %>

instead.

EDIT: Got to check out why live_path wasn’t working though. I get the same error as you btw. However, I’d prefer using compiled routes and .link.

[m4hi2]

This is strange indeed. Specially since @code-shoily is also facing the same error. I think it’s time to compare Elixir version.

Here’s mine:

Erlang/OTP 25 [erts-13.2] [source] [64-bit] [smp:12:12] [ds:12:12:10] [async-threads:1] [jit:ns]

Elixir 1.14.3 (compiled with Erlang/OTP 25)

I’ve tried this code in both macOS and Ubuntu 20.04.

[code-shoily]

They are running it off your repo so it’s likely their deps are same (unless you didn’t commit lock file). And I don’t think Elixir or Erlang version has anything to do with it

[m4hi2]

True. I did commit the lock file. Then it’s more strange that @cpgo is not getting the error, but both me and you are getting it

[ericdouglas]

Just started today reading the book!

I’ll share my learning strategy so maybe it can be useful to someone.

It consists of 4 steps:

1. Read/watch the resource
2. Copy the resource
3. Transform the resource
4. Build a project to validate and consolidate what I learned

1 - Read/watch
In this step, I consume the resource “passively”, without coding.

If I found the content not so good in this first step, I finish there and do not go to the next steps…

2 - Copy the resource
In this step, I copy the content (code) in the exact way the author of the book/course created it. Do not fight with the content. It also prevents you to make a small variation that later will become incompatible with the previous work.

3 - Transform the resource
In this step, I consume the resource again, but now creating a new project that is similar to the one taught. This will force your mind a bit but not too much…

E.g: the book taught you to create a to-do list, so in this step, you will create a book management system, something slightly more difficult.

4 - Build a project to validate and consolidate what I learned
In this final step, you should think about a new project that will use what you learned and maybe add some additional features to go beyond a little more to push your knowledge a little more and help you internalize better what you studied.