Using React components in Phoenix LiveView

Blogs & Podcasts Blog Posts
, ,
1

Hi, after experimenting a bit, I wrote a short article and did a mini-demo of an approach I find interesting: a combination of tools like React and Phoenix. I’d like to know your opinion on this approach. Thanks.

https://gabrielwilliamson.com/posts/using-react-components-in-phoenix-live-view

1 Like
2

Good exploration but a better approach, in my opinion, is using a web component. It can be integrated with LiveView better and also forms and so on. Nowadays there’s a myriad of browser APIs which are easy to use from a web component.

2 Likes
3

Absolutely! Web components + Lit (+ a couple of extra directives) and there’s nothing you can’t do.
We’ve just started switching from Alpine to web components and it’s a bliss!

1 Like
4

Wouldn’t call it a bliss but it’s good enough. I say it as a veteran front-ender.

5

It’s a bliss compared to Alpine (and its integration with LiveView)

6

I have written web component, with React…

I am not sure they address the same problem, and they are not mutually exclusive.

State management is something I miss with web components.

7

What exactly do you mean by this? We’re primarily using web components because they can manage their state.

8

I meant communication inter web components… sorry, not state management, but components communications

9

I see.

As a general pattern they promote parent → child communication via properties and child to parent via custom events. However, the former is only applicable when the composition is done within the web components themselves.

In our case (LiveView, where composition is achieved with LiveComponents) my take is the communication between web components need to be designed differently. First, if LiveView is the source of ultimate/eventual truth for the state that is also present server-side, for that part the rendering (or push_event) should have the last say at all levels of nesting. As for a pure client-side state and the communication thereof, the pattern is more like this:

  • parent → children: custom event on window with the children listening
  • child → parent: el.closest( ‘my-parent-web-component’).gimmeWhatIWant() // way faster than custom events

The principal difference is in the underlying intent. Generally, web components are meant to be reusable, universal and isolated which is why they promote loose coupling. In our case with LiveView, where we use web components within a predetermined DOM hierarchy within which they role is to implement the client-side state and behavior, we only need resort to events so we can benefit from their mechanics and no longer to promote a loose coupling (unless, of course, a particular web component is truly generic).

1 Like
10

At the time the recommended solution was to use an event bus.

But my use case was a rich video player…

Liveview manage props, but all the rest is client side.

I wrote a web component for portability, hiding a react interface. That is why I wanted to say it’s not exclusive.

The bonus, it’s also standalone and can use Phoenix channels, it does not need to be hosted on a Phoenix server.

11

The “event bus” is merely a wrapper for dispatching custom events. If performance is a concern and you only need to notify or fetch data from a single specific web component it’s almost always better to do it directly, especially if there’s no need for loose coupling (e.g. when a child knows upfront what class/web component is its target parent). But you can do it whatever way it best suits your needs.

1 Like