Need suggestion to cover client side javascript for liveview

Phoenix Forum Questions / Help
1

Hi friends, if you want to create some complex components for example nested and tree drop down select box with search and etc! what option you select?

For example I do not want to send everything from server to client and if I use hook with pure JS, it is not easy to manage for examples more than 200 components (LiveView JS module is good for basic component, not for managing client state edit DOM + project structure even do the limit function in client side not server side)

I see petal using alpine JS or some friends using ReactJS, VueJS and etc.

I just need your suggestion especially a way that is light and developer friendly. imagine you have about 200 components(some of them stateless and the other stateful in client side).

I really need this so that Elixir Developer doesn’t feel like I’m using frontend js frameworks in phoenix LiveView again.:joy:

Thank you in advance.

1 Like
2

I also use Javascript hooks for such interactions. Indeed, it has some complexity.

Recently, I am thinking to investigate LiveSvelte for this particular part, however, I have not experimented yet.

1 Like
3

I’ve been using AlpineJS with success. There are few integration issues that occurred post LV 0.20.1 but one can work around them.

1 Like
4

Could you name some of these problems please?

5

Unfortunately, there is a bit of a learning curve, especially for Elixir developer when customizing!!

If I do it pure with hook I think I am going to taste XSS :smiley: and after 10 or 12 big component I am going to be dived deep inside black hole

I use ReactJS and Nextjs myself.

6

Sometimes it happens that the Alpine data in a LiveComponent does not get initialized, so you need to have a simple hook initializing it yourself.

In certain cases, you even need to do this on updates (not just on mounted), or otherwise the JS code crashes. Having to do this on updates may be an issue for in such cases (and I am talking about really complex components e.g. LiveComponents within a stream within LiveComponents within a stream, …) the data that gets initialized this way with your hook also gets reset.

Personally, I have managed to circumvent all the issues and the app is working really well in a staging environment (AWS/Kubernetes) and overall, I am satisfied with AlpineJS despite those issues with the integration.

Also, I have agreed with an AlpineJS library developer to check a demo of mine once LV 1.0 final is out, so we can at least understand if it’s really a LV issue or an Alpine issue and if possible to make them work smoothly again.

1 Like
7

Could you share some components that you are using Alpine with LiveView hook? if it is possible?

Update

Why you did not use something like svelte that has less size in bundle size? is there any reason?

8

What XSS issues were you experiencing in your hooks implementation?

9

Can’t share the components. It’s a proprietary platform. But here’s what I do…

const InitAlpine = {
  mounted() {
    Alpine.initTree( this.el);
  },
  updated() {
    Alpine.initTree( this.el);
  }
};

or

const InitAlpineMounted = {
  mounted() {
    Alpine.initTree( this.el);
  }
};

An item LiveComponent

<div
  id={@id} phx-hook={@mutation == :insert && "InitAlpineMounted"} 
  ..
  x-data=".."
  x-init=".."
>
  ..
</div>

I use Alpine and not svelte because it was given to me as a requirement and at the time I started using it neither myself nor the client were aware of a viable LV-svelte integration (still not sure if there was one).

1 Like
10

It is not about LiveView, I was talking about pure js that I want to create and connect to liveview

2 safe functions can be an unacceptable vulnerable :joy:

11

We’ve had good success using Custom Elements AKA Web Components as a means for integrating client JS with LiveView. We’ve put out LiveElements as a library to make this process easier.

3 Likes
12

Sounds good.

As my repeated question, why you do not select svelte or something similar? especially for a page that has complex state!? because web-component as my experience is just as organiser to manage better in filing and prevent duplicating !! not for state and etc, the other one should be managed with listeners manually

13

In general, I’m letting LiveView manage the state and pass it in to the components, which then dispatch (possibly custom) events to be handled in the LiveView. LiveElements helps by both serializing complex props as json, and sending up custom events to LV.

4 Likes
14

I’d made a few attempts. Finally, the solutions that work well for me are: CustomElement and / or hooks to connect React or Svelte.

1 Like
15

Plain old JavaScript.

3 Likes