Programming Phoenix LiveView (PragProg)

Learning Resources Books
, , , ,
1

Bruce A. Tate @redrapids and Sophie DeBenedetto @SophieDeBenedetto

edited by Jacquelyn Carter @jkcarter

The days of the traditional request-response web application are long gone, but you don’t have to wade through oceans of JavaScript to build the interactive applications today’s users crave. The innovative Phoenix LiveView library empowers you to build applications that are fast and highly interactive, without sacrificing reliability. This definitive guide to LiveView isn’t a reference manual. Learn to think in LiveView. Write your code layer by layer, the way the experts do. Explore techniques with experienced teachers to get the best possible performance.

Instead of settling for traditional manuals and tutorials, get insights that can only be learned from experience. Start with the Elixir language techniques that effortlessly marry your client templates and server side handlers. Design your systems with the right layers in the right places so that your code is easier to understand, change, and support. Explore features like multi-part uploads and learn how to comprehensively test your live views. Roll into advanced techniques to tie your code to other services through the powerful publish-subscribe interface.

LiveView brings the most important programming techniques from the popular Elm and JavaScript React frameworks to Elixir. You’ll experience firsthand how to harness that power by working side-by-side with some of the first LiveView users. You will write your programs to change data on the server, and you’ll see how LiveView efficiently detects those changes and reflects them on the web page. Start from scratch, use built-in generators, and craft reusable components. Your single-purpose reducers will transform server data that your renderers can turn into efficient client-side diffs.

Don’t settle for knowing how things work. To get the most out of LiveView, you need to know why they work that way. Co-authored by one of the most prolific authors and teachers in all of Elixir, this book is your perfect guide to one of the most important new frameworks of our generation.

Bruce Tate is a programmer and CEO of Groxio where he is helping to redefine how computer languages are taught and learned. He’s the author of Seven Languages in Seven Weeks and Programming Phoenix, among other titles and has been involved with Elixir from the very beginning. He’s written more than 10 books.

Sophie DeBenedetto is an engineer at GitHub. She is a former graduate of, and teacher at, The Flatiron School and has a love of coding education. She has been an active member of the Elixir community for several years—she is co-organizer of, and speaker at, different Elixir conference around the world, a podcast host, and a blogger.

Don’t forget you can get 35% off with your Devtalk discount! Just use the coupon code “devtalk.com" at checkout :+1:

Posted via Devtalk (see this thread for details).

36 Likes
3

I just wanted to say, the book cover is so beautiful. :heart:
I am looking forward to reading it.

5 Likes
4

I have read 2.5 books from your publishing so far (still reading the elixir one) and found them very useful at the right level. I will look into this one too!

If you would like to take some feedback for the other books and maybe address one of the issues I am actually having with whole Live concept please have a look into my question, post.

Question around Live, Channels, Presence

5

The Pragmatic Bookshelf has made an incredible difference in my ability to jump into Elixir and Phoenix programming with very little prior programming experience.

I’ve been looking forward to this book ever since I heard Bruce mention it on a podcast. Will there be a print version of the final book via Bookshop?

Thank you for all that you do :heart:

3 Likes
6

yeah, it should be on t-shirt!

1 Like
7

I’m a simple man, when I see a PragProg Elixir related book I buy it

16 Likes
8

I’m going through this book and it’s fantastic. Thank you!

With the “Give It a Try” at the end of each chapter, do you intend to have these discussed somewhere? It would be good to see how different people tackle the tasks.

9

Are the answers to the “Give it a Try” sections available yet?

10

Spotlight with @SophieDeBenedetto just went live… and you can win a copy of her book by leaving a comment or asking her a question there:

:003:

11

The beta version of this book looks excellent, but in late October of 2021 it’s a real challenge for someone new to the ecosystem to use the book because the versions of Phoenix and LiveView used in it are quite dated. I’m sure the authors will be updating it since they label it clearly as a beta.

I spent my Saturday morning figuring out how to get a Phoenix app generated that matches the book’s versions, because the file structure has changed a lot since Phoenix 1.5.x and LiveView 0.15.1 and it makes the book impossible to follow for a newbie otherwise. I initially tried mapping it to Phoenix 1.6.2 but it was just too difficult for me.

Super hot tip: install phx_new version 1.5.9 to generate the site. This should give you the version of LiveView in the book and the folder structure and filenames will match.

Second hot tip: After generating the site, I couldn’t get the node dependencies to install on an M1 mac because the node_sass C++ compilation step failed. I tried various things but my solution was to reach over and grab my Intel Macbook Pro, which won’t be an option for most people.

Aside from my frustrations trying to get my environment to match the book’s, this seems like the best way for a newcomer to learn the foundations of LiveView. The new heex templating system seems fairly straightfoward, but I need to learn the basics and I work better with a book than a zillion separate YouTube videos or API docs.

3 Likes
12

liveview hasn’t reached 1.0 and there is a lot going on right now. An update for the book covering the (ground)breaking changes in .16 and .17 would be great.

4 Likes
13

Hey @dustin!

Thank you very much for the hot tips! Finally got around to starting on the book myself, and was met with issues when trying to set it all up on a brand new M1 pro MacBook. Mainly related to phoenix moving from npm to esbuild to manage assets with the newest version.

Regarding your second hot tip, I managed to get the project up and running on my m1 mac, without having to move back to my old intel macbook. :slight_smile:

This isn’t my first time tackling with node_sass compilation issues, as I work on JS projects at my day job. Without going too much in depth, I managed to get around it by rolling back to an earlier node and npm version. Specifically node v14.18.1 that uses npm v6.14.15. Node 16+ and npm 7+ “always” crashes on projects with node_sass dependencies. :man_shrugging:

  • nvm install node v14 Install node v14.18.1 with nvm in a rosetta terminal.
  • Swap back to a “m1 terminal” and cd into desired folder
  • nvm use v14
  • mix phx.new pento --live

Then you should be able to move on to ecto.create and start on the book proper.

You could probably do everything in a rosetta terminal, but for some reason running my iTerm in rosetta mode adds a second delay to absolutely anything I do in there shrug

1 Like
14

Thanks a ton @brehen. I pondered playing with the node version since I use nvm too, but when it “just worked” on my old laptop I was happy for now. Hopefully the combination of my struggle and your solution will help future readers.

15

Would like to add a +1 to what @dustin and @Sebb have said here, updates to include the latest LiveView changes would be very valuable. In particular updating all the LEEx templates to HEEx and covering the new lifecycle hooks would be a big improvement.

Some coverage of JS Commands would be a great addition too.

I recently returned to the book after making it halfway through a couple of months ago, now considering dropping it again and just waiting for the official release next year, given a lot of examples are now out of date.

@redrapids and @SophieDeBenedetto have written a great guide to the LiveView framework here, unfortunately they have their work cut out for them with the updates needed following all the progress on LiveView this year.

1 Like
16

Yes indeed we will be doing a big update to latest Phoenix and Phoenix LiveView versions before this book goes into Alpha so stay tuned!

31 Likes
17

Will this book be updated for Phoenix 1.6 and LiveView 0.16?
@SophieDeBenedetto

Edit: Oh, my question is already answered in the previous reply. :slight_smile:

18

Although it is clear from the title of the book “[…] without writing any javascript”, I think that it would have been great to discuss hooks, Alpine as well as Tailwind, which seem to be essential elements of the PETAL stack.
Are there any plans to add any relevant chapter(s)?
Alternatively, is anyone aware of a book that covers these topics?

BTW, I do enjoy reading this book (as any book from Pragmatic Bookshelf)!

2 Likes
20

This is the code I wrote in the first chapter’s your turn section which doesn’t work. What am I missing?

defmodule PentoWeb.WrongLive do
  use Phoenix.LiveView, layout: {PentoWeb.LayoutView, "live.html"}

  def mount(_params, _session, socket) do
    {:ok, assign(socket, score: 0, message: "Make a guess", rand_num: :rand.uniform(10))}
  end

  def render(assigns) do
    ~H"""
    <h1>Your score: <%= @score %></h1>
    <h2>
      <%= @message %>
      <br>
      It's <%= time() %>
    </h2>
    <h2>
      <%= for n <- 1..10 do %>
        <a href="#" phx-click="guess" phx-value-number={n}><%= n %></a>
      <% end %>
    </h2>
    """
  end

  def time() do
    DateTime.utc_now() |> to_string()
  end

  def handle_event("guess", %{"number" => guess}=_data, socket) do

    cond do
      guess == socket.assigns.rand_num ->
        message = "Your guess: #{guess}. You won! :)"
        {
          :noreply,
          assign(
            socket,
            message: message
          )
        }

      true ->
        message = "Your guess: #{guess}. Wrong. Guess again."
        score = socket.assigns.score - 1
        {
          :noreply,
          assign(
            socket,
            message: message,
            score: score
          )
        }
    end

  end
end

Question # 2, (not related to LiveView, but Elixir)

Why it doesn’t compile when I write

{
  :noreply,
  assign(
    socket,
    message: message,
    score: score
   )
  }

outside the cond?
The compilation error is:

** (CompileError) lib/pento_web/live/wrong_live.ex:44: undefined function message/0 (expected PentoWeb.WrongLive to define such a function or for it to be imported, but none are available)

Question # 3:
Are the solutions to the exercises available somewhere?

@SophieDeBenedetto

21

I’m still waiting…
Will somebody please reply my question?

22

What does that describe for you? Follow that path.
Sorry its just not fresh in my head, but trying to read the error this is what its telling me.