Using React with importmaps on Rails 7

[Ron_Lavi]

Thanks for taking the time to watch the videos!

@Dewar

But if I understand the two videos above correctly, import maps alone would require us all (foreman, katello, and all other plugins) to restructure almost every component, switch to CSS from scss, and would likely require a ton of other random replace/rewrites of imported component libraries.

I have the same concerns, as for the scss - looks like there’s a way to handle that on Rails assets pipeline: The Asset Pipeline — Ruby on Rails Guides

as for the React render/returned JSX that needs to be wrapped by htm function,
I was thinking that we could add a centralized render wrapper in core that would take care of it,
but then it is still a lot of work to update each and every component we use, and probably means we can’t import directly from Patternfly(?)
but maybe we can use a modified version of React that parse the JSX as a htm string,
not sure if that would work well, but I am sure it’s a very ugly solution.
so, in this case, we could use the other suggestion of esbuild.

@Dewar

If the problem is node modules and not wanting to repeat them in each plugin, have we considered using something like single-spa or other micro-frontend infrastructures with import maps within the parent?

I’ve done that before and although the parent had a bit of a bulky node_modules file, all child apps were fed from there, meaning a single node_modules to rule them all. Micro-frontends also support parent state much in the same way we have our redux stores passed around today.

The benefit of that path would be that the majority of the front-end codebase could be left alone, it would just be creating a new framework to patch things into.

TLDR: If you are planning on a rewrite of all our front-end applications, we should probably also consider some more proven web technologies no?

I also suggested it in the past, but from my understanding, the architecture of Foreman and plugins is a bit more complex, here is one of the main discussions: An Independent UI for Foreman and Plugins - Discussion and Investigation