It's possible to mix with frameworks library like React or Nextjs?

It’s possible to mix with frameworks library like React or Nextjs?

It absolutely is possible!

1 Like

I need example of code that plotlyjs and firebase incorporate in to ELM to provide image components that must handle 5MB photo size change every 1 second or less without CLS issue and not fetch only TCP socket and And second component that utilize plotlyjs to provide plot using webgl working 7 days and preserve points several million points.

Sorry, but I’m not really sure what your question is

:ok::+1:No problem - it’s rather complex.

I am not ChatGPT so I took a while to disassemble your sentences. Here is my interpretation:
You want to draw a chart using plotlyjs and somehow firebase is also involved, probably as a data source.

First of all: what is stopping you from doing this in raw js or typescript? If you want to use libraries from the js ecosystem, it might be painful to integrate with Elm.
Especially if you have other frameworks involved as well for some reason.

If you still want to integrate Elm as your logic engine or something there are essentially two options that could make sense here:

  1. Integrate your chart as a webcomponent and use Html.node to render it inside of Elm. You can then choose if the webcomponent has the responsibility of fetching the data itself, or if you want Elm to do that and then pass in the data using a

  2. Replace plotlyjs with elm-webgl and skip the webcomponent part, but pay the price of potentially rewriting your chart shaders. Also to get firebase data inside of Elm, you might need to use ports as I am not aware of any Elm wrapper for that.

The CLS (content layout shift I presume) part is your own responsibility. Just set a fixed canvas size?

If the part of Firebase you’re using is Cloud Fire store, there is IzumiSy/elm-firestore. It’s not complete, but it was enough for the project I needed it for.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.