upvote
Ah...you're scratching at some scabs with this totally reasonable question.

We learned some tough lessons with media-chrome[1] and Mux Player, where we tried to just write web components. The React side of things was a bit of a thorn, so we created React shims that provided a more idiomatic React experience and rendered the web components...which was mostly fine, but created a new set of issues. The reason we chose web components was to not have to write framework-specific code, and then we found ourselves doing both anyway.

With VJS 10 I think we've landed on a pretty reasonable middle ground. The core library is "headless," and then the rendering layer sits on top of it. Benefit is true React components and nice web components.

[1] https://github.com/muxinc/media-chrome

reply
Web components sound neat until you try to make styling and SSR behave across a mess of app setups, and then you're burning time on shadow DOM quirks, hydration bugs, and framework glue instead of the player itself. Most users do not care. A plain JS lib with a decent API is easier to drop into an old stack, easier to debug, and less likely to turn us into free support for someone's anicent admin panel.
reply
This is such an elegant summary of why WCs are painful. I wish I had summarized it so well. I'm on the Video.js team and I wrote about my journey on this front as well [1].

[1]: https://www.mux.com/blog/6-years-building-video-players-9-bi...

reply
Is it not a web component, per se? Per the article, all the React stuff does seem to bake down to HTML Custom Elements, that get wired up by some client-side JS registering for them. That client-side JS is still a "web component", even if it's embedded inside React SPA code bundle, no?

If you mean "why do I need React / any kind of bundling; why can't I just include the minified video.js library as a script tag / ES6 module import?" — I'm guessing you can, but nobody should really want to, since half the point here is that the player JS that registers to back the custom elements, is now way smaller, because it's getting tree-shaken down to just the JS required to back the particular combination of custom elements that you happen to use on your site. And doing that requires that, at "compile time", the tree-shaking logic can understand the references from your views into the components of the player library. That's currently possible when your view is React components, but not yet possible (AFAIK) when your view is ordinary HTML containing HTML Custom Elements.

I guess you could say, if you want to think of it this way, that your buildscript / asset pipeline here ends up acting as a web-component factory to generate the final custom-tailored web-component for your website?

reply
You certainly can just add it to a <script> tag and then not do any of that.
reply
[dead]
reply