Phoenix Liveview using livecomponents for everything

[gXuEubhxAgHEd]

Hi,

First question here, but long time lurker

I have made a medium size project with liveview and 99% loving it!

A while back… I needed to incorporate lots of functionality in various liveviews, so I started putting things on livecomponents.

I wondered if I could put all the liveview’s code ( not basic html, but everything with events and specific code ) into livecomponents, and all went well and works perfectly. Now mostly ??all?? of my liveviews are almost empty skelletons with just livecomponents on them.

My question: Is this good practice?? Is there anything livecomponents lose in comparison to being directly on the liveviews?

Thanks !

EDIT: typoos

[sergio]

Sounds good to me.

I remember reading in the docs somewhere that it’s recommended you create components as functions, and not as their own modules.

In React you would have a bunch of components each in their own file. In Liveview you have one module with a bunch of functions.

button.js
form.js
textarea.js

vs

FormElements.ex

Is this still the case?

[llama]

I tend to have separate modules for “main” components and then smaller components either grouped under those main component modules or into their own logical modules, such as buttons.ex, if they are used all over the place. I don’t know if it’s best practice, but it seems to work.

[trisolaran]

@sergio

I remember reading in the docs somewhere that it’s recommended you create components as functions, and not as their own modules.

@llama

I tend to have separate modules for “main” components and then smaller components either grouped under those main component modules or into their own logical modules, such as buttons.ex, if they are used all over the place. I don’t know if it’s best practice, but it seems to work.

The OP is talking about live components, not function components. Each live component is its own module, and they can’t be grouped into a module.

@gXuEubhxAgHEd

My question: Is this good practice?? Is there anything livecomponents lose in comparison to being directly on the liveviews?

live components can’t react to changes in URL parameters (they don’t implement the handle_params/3 callback) and can’t receive messages via handle_info/2. However you can use attach_hook/4 to get around these limitations.

[sodapopcan]

It sounds like you have common, stateful functionality you want to share between LiveViews in which case this sounds perfectly reasonable. If, however, you were merely ripping things out into LiveComponents just to have bare-looking LiveViews that always require a jump to another file to get any idea what’s going on, that would be a different story.

[gXuEubhxAgHEd]

@sergio @llama like @trisolaran said, I was talking about live components. From what I gather, that is the goal as best practice is to have <.button <.input <.whatever.

@trisolaran thanks, I managed to work everything out with messaging (send_updates and send). Some things were a little tricky or redesigned a little, but managed to do everything that i did with liveviews, with live components.

@sodapopcan yes, that is my case. It worked wonderfully well in some cases that I needed to incorporate statefull functionality, that I wondered if I should do it everytime on everything.