Inspector (other tools) react vs web components

Hello.

I see that Babylon tries to closely follow web standards in regards to things related to graphics and core engine areas. However, developer tools use React instead of platform-native web components.

Wanted to ask is there a specific reason for doing so? My guess is at the time when the inspector started web components were not a widely supported spec and React was filling that gap.

Is using web components something the team wants to look at? If yes I can prepare a small proof of concept to look at. I was thinking about Microsoft’s own FAST element or Google’s Lit (ex Polymer).

Hey,

that’s an amazing suggestion. your assumption is (partly) correct. We chose react over polymer (there was no lit back then) because it was simpler to get the result we were expecting for. There is also the “global” state which we use extensively, and we do our best not to pollute the globalThis object (though we sometimes do that…)

Using react has its downsides, but we have already built a lot of tools based on that, and though we don’t really like external dependencies, react is the one dependency we have on many of our tools (like the NME or the playground).

As the inspector is not a website but is expected to be included inside a host, using web components does make sense. It will be interesting to see how you can implement the inspector using web component. I have to say that I can’t promise to actually use any suggested code, and that we will also need to talk about this internally and see if it fits everyone in the team.

2 Likes

Yes, I looked through the code that already exists, and it seems like a massive investment to change all the tools. However, migration can be done in steps by first factoring out standard components, reusing them, and migrating tool by tool.

Do you have any preference towards Lit or FAST (it’s similar, just from Microsoft)? One bonus of FAST is they have abstract controls with no styling with accessibility implemented. https://explore.fast.design/

I’ll research more in the coming weeks and post my updates.

1 Like