
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.
Marked As Solved

SophieDeBenedetto
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.
Popular Prag Prog topics










Other popular topics










Latest in PragProg
Latest (all)
Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /js
- /rails
- /python
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /haskell
- /emacs
- /svelte
- /onivim
- /typescript
- /crystal
- /c-plus-plus
- /tailwind
- /kotlin
- /gleam
- /react
- /flutter
- /elm
- /ocaml
- /vscode
- /opensuse
- /centos
- /ash
- /php
- /deepseek
- /zig
- /scala
- /html
- /debian
- /nixos
- /lisp
- /agda
- /sublime-text
- /textmate
- /react-native
- /kubuntu
- /arch-linux
- /ubuntu
- /revery
- /manjaro
- /spring
- /django
- /diversity
- /nodejs
- /lua
- /slackware
- /c
- /julia
- /neovim