ryana

ryana

LiveView Organization Question: Should I have this function component as an intermediary?

I am building my first Phoenix site. I’ve gone through most of the “Programming Phoenix LiveView” Bruce A. Tate and Sophie Benedetto and read a lot of the LiveView docs, but I’m stumbling a bit on organizing some code. Specifically on the relationship whether I should use a function component or not.

I’m building a site to hold video tutorials for my clients. Users see an archive of videos. They can favorite videos from this screen.

In the first iteration I have a video archive LiveView that contains a video card LiveComponent. After reading “Programming Phoenix LiveView” I thought it might be better to have the video card be a function component, and isolate the favorite icon and favoriting functionality in its own LiveComponent.

LiveView → LiveComponent
or
LiveView → FunctionComponent → LiveComponent

Is one approach considered more correct than the other?

Most Liked

mindok

mindok

All of what @DaAnalyst said, but I’ll add one more thing…

Function components work in “dead views” (can’t recall where we all landed on what to call them - I’m talking about traditional view/controller architecture) whereas LiveComponents don’t.

From a dependency flow point of view, I’d personally only really consider invoking a LiveComponent from a function component if that function component was defined in (or very close to) the LiveView module that calls it. Project level function components should be kept clean enough to be used anywhere, including traditional view/controller pages, and should therefore not have LiveComponents in them.

DaAnalyst

DaAnalyst

It’s hard to tell by your description, but here’s a hint:

Use function components for:

  • reusing a (reoccurring) part of the template
  • breaking an otherwise large template into smaller organizational parts
  • validating (to a certain extent) the attributes and/or defining their default values (in LiveComponents you need to do this one yourself)
  • note: they can’t keep or manage any state

Therefore, if you really want to wrap a LiveComponent into a function component, you can.

Where Next?

Popular in Questions Top

Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&query=perfume&page=2, I would like to get: ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement