Has anyone seen Building Tetris on Elixir/LiveView?

Chat / Discussions
, ,
1

Groxio is building a series targeted to beginner and intermediate Elixir developers at grox.io/series/quad. The first seven are free, and the rest will go for 10 bucks. The proceeds will go to fund coding diversity mentoring programs. I would love comments on the approaches, as I’ll use the same approach in the prag book.

In general, it’s the course my mentees to through (or the first part). I seem to have success teaching these concepts:

  • Understand pattern matching first
  • Organize modules into like concepts around DATA
  • Organize code around the data concepts, with as many reducers over that type as possible
  • Write tests as pipelines

Then, the LiveView discussion becomes easy:

  • In LiveView, build a static screen first, with hardcoded data in mount
  • Change the hardcoded data as your functions later will to flesh out your render
  • If needed, extract render-text text into views

And next:

  • Replace hardcoded mount with dynamic content (your true model)
  • Change the data with handle_event and handle_info
  • Keep the handle-callbacks skinny. If necessary have adapter functions in the Live module

Finally:

  • Optimize the liveview difs, and tighten them up
  • Extract common components
  • Implement data rehydration concerns
  • Implement pubsub concerns

Does the approach seem sound?

10 Likes
2

I like the game and saw yesterday a little.
I will buy this month for sure it’s a nice price.

4 Likes
3

Does anyone have any comments about the teaching approach to LiveView specifically, and Elixir in general? Basically, my approach is to get students to reducers, and using them in the context of an API. Once I can get them there, it gets easier.

Comments?

1 Like
4

Are reducers the functionally pure way to interact with your data structure (like a brick or board)? I’m only on the second video but I plan on watching these soon. I’m happy to give more specific feedback once I’m the whole way through it.

If yes, I think that’s pretty sound. It’s much easier to think about the problem in bite size chunks rather than tackling it all at once. I think that learning to decompose the problem (what are the reducers and functional core of my app going to be?) is one of the most important—but also subtly difficult—parts of learning to write good applications.

2 Likes
5

yep… it’s a little cloudy in Elixir because Enum.reduce takes an accumulator as the SECOND argument, but we tend to build modules with the target item as the FIRST argument. So… we’re looking at something like:

brick
|> rotate(90)
|> right
|> down

to move the conceptual model of the brick. At another level, we use a points module. Not a struct, but applies to functions we’re using to manipulate a list of points:

def rotate(points, 90) do
  points 
  |> transform #{x, y} to {y, x}
  |> mirror
end
def rotate(points, 0), do: points
def rotate(points, degrees) do
  rotate(
    rotate(points, 90), 
    degrees - 90
  )
end

rotate on points is a reducer.
On brick: rotate, right, left, down are all reducers.

-bt

2 Likes
6

This looks really nice and was exactly the sort of thing I was hoping you’d do Bruce!

I think I am going to go through it after the Phoenix book :003:

Just a couple of quick questions…

  • Is the $10 for the complete course (or is it $10 per video)
  • Is there a time limit on that offer? (Should we buy now or is it ok to wait a little while?)
  • Is there a time limit on access to the course once you’ve bought it?

Finally, do you want us to move this thread to the #courses section? People (especially newcomers) are more likely to browse those sections. If so let me know and we’ll make some edits and move it there :023:

7

$10 for all of them :slight_smile:

Basically, I had to make them for the mentoring program as there’s one of me and four groups, and someone came up with the idea of selling them to support the program.

-bt

3 Likes
8

Just finished the course, easy to follow and I learned a bunch while building the app. Highly recommended if you are already mid-level-ish in the language. And it’s a good introduction to LiveView.

4 Likes
9

I’m a newbie in this language. And I think it’s a good starter.
I’m on ep 3 for now. :slight_smile:

2 Likes
10

Do you mean by “reducers” functions that takes and returns Ecto.Changesets and Plug.Conns (and the like) that typically always return the same data structure as its first parameter?

I mean this applies if I consider a reducers as functions that take two parameters and apply (or use) the second parameter in order to return a transformed version (or not) of the first parameter (like Redux in front-ends with DOM States and events…)

As an Elixir beginner (coming from Ruby), it took me some efforts to grasp the fact that those kind of functions works well with data structure that have both inputs and outputs (like Plugs.Conn, or Ecto.Changeset) and it seems that this is a big “pattern” in FP and used almost everywhere.

So, I think (at least for me) that this is indeed something really important to teach/learn particularly for custom data structures (in contrast to Plugs, and Changesets, where we simply use them rather to design them…)

So I hope I will learn a lot from these videos…

Edit: I just realized that you are Bruce Tate… Thank you for the videos BTW…

1 Like
11

Hello @redrapids,
To answer to the question of the topic, now I took the course…
Well… I’m kinda left hungry for more, particularly regarding the “LiveView” parts…
I mean, the course name is “Phoenix Liveview Tetris in Elixir” but it happens to me as if it was “Tetris in Elixir”.

I learn more about Liveview in this video of you https://www.youtube.com/watch?v=-wzabRyc-0M (saw on the forum) and even more in this one from Chris McCord https://www.youtube.com/watch?v=8xJzHq8ru0M

For example, I expected to see more about the mechanisms that allow to start from the custom attribute written in the HTML part of Phoenix all the way down to the Elixir part where the events are handled.

Also a better explanation of the whole flow (including the JS parts) and all the life cycles (from the first HTTP request, to the mount of the WebSocket, and the rest) would be really appreciated.

Even if there is no need to write JS with LiveView, there is still some JS involved, it would have been also great if those default JS parts included by Phoenix were a little explained particularly how LiveView is different from regular WebSockets.

I also expected to learn more about the events and the whole process (including morphdom) as it’s a little explained by Chris on his video.

In that video above (where LiveView was quite new at that moment) you explained, that many events are handled by Phoenix but it’s even easier to add custom events… So I would have expected this part to be present in the course too.

But maybe it’s me and there is no need to talk more about LiveView, I don’t know…

Anyway, it was not that expensive at least, so no regret for me…

And by the way, many thanks for all the effort put into all these learning resources…

1 Like
12

The link of “[Project repo, branch by branch, base]” at the bottom of this page is https://grox.io/series/github.com/groxio-learning/tetris-video but should be GitHub - groxio-learning/tetris-video: Tetris implementation for Youtube video series.

But there is also GitHub - groxio-learning/tetris: Coding Lions project for LiveView and GitHub - groxio-learning/tetris-ui: User interface for Tetris user interface series… Should any show the final “product”? I would like to see what we build first.

1 Like
13

Good feedback. Sorry you didn’t find what you were looking for.

Quick question. Did the free videos in the series and the name of the problem give you a hint of what was coming? I hope you don’t feel mislead!

My intention (as a mentor teaching this problem and as a business selling it) is for programmers to bet better by seeing others wrestle with a problem real time, and to show what’s possible.

What you are looking for is definitely in plan for me this year. Later this year, I’ll be releasing the LiveView pragprog book and some companion content that will cover diff comparisons and techniques, the different ui hooks including possibly javascript, forms, components and more.

I am pretty sure it won’t be for ten bucks though :slight_smile: We are wrestling whether to make it available to all annual Groxio subscribers, and making the annual subscription more comprehensive.

In any case, thanks for the feedback!

3 Likes
14

Thanks! I’ll catch that up.

15

Thanks for taking the time to answer…
Indeed I first watched the first 7 free videos… And since they explained how to deal with the “domain” part (the Tetris game related stuff) I thought that the remaining paid 14 videos will be related to Phoenix and LiveView… But besides some very little parts (if I don’t have a crappy sense of the time and to do estimation I would say maybe 10 minutes accumulated) where everything is set, those episodes still dealt with Tetris.
It was for sure interesting, but not really related to LiveView imho.

Well, they indeed used LiveView but I can’t call this course a course on LiveView. Anyway, I’m impatient to see more materials from Groxio… Particularly related to Elixir/Erlang/OTP

1 Like
16

Thanks for the insight.

I would like to offer a counter perspective. I could have built an app in LiveView that built all of this code, or most of it, into the view. Some of the examples are built in this way. Doing so would have given the appearance of being a video about LiveView. That approach would have been misguided.

Coding a nontrivial LiveView or OTP will be like what I presented most of the time. If you build something nontrivial, the hard part won’t be the LiveView. It will be the pure core of what your building.

Layering your code into pure elixir for consumption in LiveView IS the problem. It’s the separation of boundary and pure code, the use of reducers, and the like that separate a good codebase from a poor one.

It’s very much like designing elixir systems for OTP. It’s not a book about OTP. It’s a book about building things that uses OTP, and it should be.

5 Likes
17

Had the same impression, but it is definitely a good thing how little work was required to make it render with live-view.

@redrapids you not only show the “pragmatic” way of building Tetris with elixir and LiveView, but you also give a small window on your “thought process” while designing the game’s API. It is not a “perfect” tutorial… mistakes, retries, decision changes are abundant :purple_heart:

2 Likes
18

Yep. It’s like a pairing session with me. Many coding videos start with a completed solution in mind. This one started with a blank canvas. There are up sides and down sides. The up side is that you get to see the decisions I made, as I made them. the down side is that you only get to see a single problem context, and you have to suffer through the mistakes I made right along with me!

Thanks for your comments.

4 Likes
19

Wait!
Indeed I didn’t even talk about that part… But the format of the course itself is indeed great and even more than I expected!
That process of building from scratch is by far the best way to show things imho, since as you said it’s almost as a pair programming session… And it enforces the reader to almost think at the same time than the instructor which is way more involving than simply monkey typing already written stuff.

And this format remind me the course from Dave Thomas (Elixir for Programmers), so definitely a great thing!

As I said (at least I believe I said) in my first feedback, overall I was not unhappy with the course…
Since LiveView is relatively new I just expected more material on that specific topic (like what Chris described in his talk)

To be honest this kind of concern is where we as developer need to bring solution… The rest is indeed the job of the framework. So I couldn’t agree more with this. And again, all the process around the domain part was indeed very valuable (more than some reference-like description of LiveView… So in a sense, a course without that separation of concerne with more LiveView related stuff would be indeed less valuable)

Indeed, this is why I said above that maybe there is no need to talk more about LiveView… I just learnt more about LiveView in Chris talk than here, this is just what I wanted to say… Not that the course doesn’t worth the money… Quite the opposite regarding the very accessible $10.

Anyway, I love Elixir and all the ecosystem and i’m just hungry for more valuable resources!
Thank you all btw…

3 Likes