Programming Phoenix LiveView: errata and remarks Version B2.0

Community PragProg Customers
,
1

The generated iex result below should list products instead of product for the metadata. (page 67)

iex> product = %Product{}
 %Pento.Catalog.Product{
 __meta__: #Ecto.Schema.Metadata<:built, "product">,
 …
}

The mount/3 function that is generated is different from the one used in the example, this might be confusing if you are familiar with the way pipes are used in Elixir. (Page 87)

def mount(_params, _session, socket) do
 {:ok,
 socket
 |> assign(:greeting, "Welcome to Pento!") # add this line
 |> assign(:products, list_products())}
end

Instead of

{:ok, assign(socket, :products, list_products())}

These few lines of code are a bit different from what we’ve seen before,… (Page 98)

Actually we have already seen this exact code 2 pages earlier, starting on page 96.
Suggestion: introduce the repeated code with: “Here’s the line of code that calls the modal component from the index template again:”

That means the component must implement a handle_event/3 function for the “close” event, which is does here: (Page 103)

Should be “… which it does here:”

Notice there’s an :id key, as well as a :component key that specifies the FormComponent (Page 106)

It is unclear what the :component_key is.

2

Hello! Thank you so much for your feedback, we really appreciate it :slight_smile:

Let’s go through it one thing as a time:

The generated iex result below should list products instead of product for the metadata. (page 67)

You are totally right! You’ll find this fixed in the next Beta release. Thanks for pointing it out :slight_smile:

The mount/3 function that is generated is different from the one used in the example, this might be confusing if you are familiar with the way pipes are used in Elixir. (Page 87)

Good catch! In fact this code snippet does change the way the generated mount/3 function calls assign in order to add the products to the socket. You’ll find this updated for clarity in the next Beta release.

Actually we have already seen this exact code 2 pages earlier, starting on page 96.
Suggestion: introduce the repeated code with: “Here’s the line of code that calls the modal component from the index template again :”

Yep you are right that we’ve shown you this code snippet already. I’ll add some language to clarify that in the next release.

Should be “… which it does here:”

Nice catch! Will fix in the next release.

It is unclear what the :component_key is.

The :component key points to a value of the component that will be rendered in the modal–FormComponent. I’ll add some language to clarify this but we also go into greater detail just a bit further on in the chapter.

Thanks again!

4

P9 TYpo/Grammar:

You’ll see how LiveView let’s you move fast by offering elegant patterns for code organization, and you’ll find that LiveView is the perfect fit for SPA development.

Let’s should be lets (no apostrophe)

5

P27 - grammar:

shipping features that delivering value to your users.

delivering should be deliver

6

P27 - lack of answers

In this - and subsequent - “Give it a try” sections, it would be very useful to have the answers, both to confirm whether we got it right and to assist if/when we get stuck

7

P41 - Spelling.

Confiirm should be confirm

8

P51 - grammar:

Then, we renew the session for security sake, adding

for security sake should be for the sake of security (or similar)

9

P56 - comment:

When you say "Add a migration and a field…

At this point, you haven’t actually explained how one might go about adding a migration. So those of us that are familiar with Ecto and how to do migrations will be able to work this out. However, those that aren’t are likely to be completely stuck. As this is a book about Liveview, not necessarily Ecto, I can’t see how this exercise really helps with learning Liveview

10

P56 - comment:

when you say: If a logged in user visits the / route, make them redirect to the /guess route.

You haven’t explained how to do redirects yet, so again, I don’t think this “your turn” is appropriate here. I’m assuming that the point if “your turn” is to give people practice on the things that have been explained in the chapter

11

P62 - incorrect path

live “/product/new”, ProductLive.Index, :new:

should be /products/new - not /product/new

12

P67 - you say “The result of our changeset function is…”

  • The last element in the changeset (unique_constraint) is not mentioned or discussed. I assume this is an oversight.
13

P90:
@impl true def mount(_params, _session, socket) do {:ok, assign(socket,:products, list_products())} end

This doesn’t incorporate the :greeting addition we made earlier

14

P95:

“But, whether you click the edit link for the first product on the list or point your browser at the edit route for that product, the ProductLive.Index live view will call handle_params/3.”

It is not clear, from this and the related explanations above, under which circumstances mount is called. Here you say it will call handle_params (although you don’t say anything about mount). Above, you say that pointing your browser at edit will call mount without handle_params.

15

P98:

“Here’s the line of code that calls…”

should be just: “Here’s the of code that calls…”

as its more than a line

16

P99:

“def live_modal(socket, component, opts) do path = Keyword.fetch!(opts, :return_to) modal_opts = [ id: :modal, return_to: path, component: component, opts: opts ] live_component(socket, PentoWeb.ModalComponent, modal_opts) end”

I don’t think we’ve met Keyword.fetch! before. Whilst the name makes it pretty obvious what it does, it might be worth a mention/explanation.

17

P103:

"The modal component markup adds a few LiveView bindings to listen for close events: phx-capture-click=“close”, phx-window-keydown=“close”, and phx-key=“escape”.

It’s not clear how phx-key=“escape” results in a close event. Is this something automagically done by live_component?

18

P103:

because the phx-target is set to the @id assignment,

Where/how is it set?

19

P106:

“Notice there’s an :id key, as well as a :component key that specifies…”

This is a bit unclear - you appear to be referring to the index.html.leex code snippet above - but there is no :component key in that

20

P106:

“Look at the call to live_component/3 in the modal component’s markup…”

It would be worth mentioning that this markup appears in /live/product_live/modal_component.ex. I got there in the end, but it took a bit of brow-furrowing.

21

LiveView Layers: The Form Component:

I found the discussion in this section extremely difficult to follow. It took a number of passes for it to sink in. You may wish to have another look at the overall flow.