almirsarajcic

almirsarajcic

Programming Phoenix LiveView: related stateless components in one module

Drawing is done using stateless components that exist in separate modules. For example:

# lib/pento_web/live/pento/board.ex
def render(assigns) do
    ~H"""
    <div id={ @id } phx-window-keydown="key" phx-target={ @myself }>
      <Canvas.draw viewBox="0 0 200 70">
        <%= for shape <- @shapes do %>
          <Shape.draw
            points={ shape.points }
            fill= { color(shape.color, Board.active?(@board, shape.name) ) }
            name={ shape.name } />
        <% end %>
      </Canvas.draw>
      <hr/>
      <Palette.draw
          shape_names= { @board.palette }
          id="palette" />
    </div>
    """
  end

but Phoenix LiveView documentation suggests otherwise:

You must avoid defining a module for each component. Instead, we should use modules to group side-by-side related function components.
Phoenix.Component — Phoenix LiveView v0.20.2

I don’t have much experience with stateless components so I don’t have an opinion on this yet, but I think it would be good if we respected the convention either way: putting them all together or creating separate module for each.

0 629 2

Marked As Solved

SophieDeBenedetto

SophieDeBenedetto

Author of Programming Phoenix LiveView

I think you could say that this approach is still adherent to the official recommendation. You could make a case that drawing the palette, drawing the canvas, etc. are all distinct responsibilities that deserver their own modules. Whereas, for example, it would be appropriate to create something like a shared UserProfile module to house a set of similar function components like display_contact_info/1, display_address/1 etc.

Where Next?

Popular Pragmatic Bookshelf topics Top

edruder
I thought that there might be interest in using the book with Rails 6.1 and Ruby 2.7.2. I’ll note what I needed to do differently here. ...
9 1173 1
New
AleksandrKudashkin
On the page xv there is an instruction to run bin/setup from the main folder. I downloaded the source code today (12/03/21) and can’t see...
2 1425 11
New
cro
I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into ...
7 3487 14
New
brunogirin
When I run the coverage example to report on missing lines, I get: pytest --cov=cards --report=term-missing ch7 ERROR: usage: pytest [op...
0 3958 1
New
brunogirin
When installing Cards as an editable package, I get the following error: ERROR: File “setup.py” not found. Directory cannot be installe...
0 1727 1
New
brunogirin
When trying to run tox in parallel as explained on page 151, I got the following error: tox: error: argument -p/–parallel: expected one...
0 1105 1
New
brunogirin
When running tox for the first time, I got the following error: ERROR: InterpreterNotFound: python3.10 I realised that I was running ...
0 1300 1
New
hazardco
On page 78 the following code appears: &lt;%= link_to ‘Destroy’, product, class: ‘hover:underline’, method: :delete, data: { confirm...
1 1265 2
New
taguniversalmachine
Hi, I am getting an error I cannot figure out on my test. I have what I think is the exact code from the book, other than I changed “us...
0 1761 6
New
SlowburnAZ
Getting an error when installing the dependencies at the start of this chapter: could not compile dependency :exla, "mix compile" failed...
1 1103 10
New

Other popular topics Top

AstonJ
Inspired by this post from @Carter, which languages, frameworks or other tech or tools do you think is killing it right now? :upside_down...
160 3807 49
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
82 6920 31
New
PragmaticBookshelf
“Finding the Boundaries” Hero’s Journey with Noel Rappin @noelrappin Even when you’re ultimately right about what the future ho...
34 3841 21
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
13 3957 4
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
49 4462 14
New
First poster: joeb
The File System Access API with Origin Private File System. WebKit supports new API that makes it possible for web apps to create, open,...
43 3103 21
New
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
4 3745 1
New
CommunityNews
A Brief Review of the Minisforum V3 AMD Tablet. Update: I have created an awesome-minisforum-v3 GitHub repository to list information fo...
0 1782 0
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
14 1353 8
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
0 3570 1
New

Sub Categories: