logoalt Hacker News

jjcmtoday at 12:23 AM4 repliesview on HN

Out of curiousity, why not distribute this as a webcomponent? It's a perfect use case for it - a semantic object that has built in controls / chrome.


Replies

mmccluretoday at 12:47 AM

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

hrmtst93837today at 9:22 AM

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.

derefrtoday at 12:25 AM

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?

show 1 reply
hrmtst93837today at 7:36 AM

[dead]