I’ve an hybrid Elm application where most things are in Elm. The division of the app that highlights an issue, is that the API for back-end communication is all in Elm. The amount of data received from back-end is large and needs to be available in both sides, in Elm and for the JS components.
The JS components are using React and OpenLayers - map components. On large data sets things start to get really sluggish. As far as I understand one of the problems is that data over ports means: encoding + copy.
What (experimental) options could be considered to expose data in Elm’s model (one way: elm -> js) to JS components without and extra copy ?
First off, where does the object cloning originate? Is it the port’s Json encoder or passing the data to the port’s function? If the latter, could you expose your React component as a web component (with polymer if needed as a polyfill) and pass the data as an attribute? Also, do you actually need ALL the data in both places, or is there a reasonable substitute? If you don’t need all the data all the time, maybe you could put it in IndexedDB and query for the data you need as you need it?
These suggestions may or may not be helpful, I haven’t dealt with this exact issue, just trying to give you some ideas in the hopes it might spark something else. Good luck!