3 ms·

I love writing Web Components, but they're never going to really be a thing. The promise was that we could create native components without any dependencies at

I love writing Web Components, but they're never going to really be a thing. The promise was that we could create native components without any dependencies at all but it just hasn't worked out that way. Shadow DOM support, the real killer feature, is patchy at best without polyfills. Orchestrating them into any kind of complex app still requires some kind of framework to handle things like passing down props and event binding, which at that point you might as well go full on (React/Angular/Vue) + Webpack/Babel. The dream of being able to share reusable components breaks down the moment your designer wants an extra 5 pixels of padding here or there. It's fun to use them for small things but it's just not viable as an alternative to frameworks.

reustle 8y ago
(sorry, I'm not well versed in some of these things) Would it make sense for React to start using this native web-component at some level moving forward, to improve efficiency ? Maybe another library will replicate most of Reacts features but is powered by this native (faster/cleaner) technology?
- wwright 8y ago
  afaik web components are mostly about encapsulation and semantics; they let you box up arbitrary HTML, JS and CSS and put a little bow on top so that it looks like one “custom” HTML tag to the rest of the document. (I could be misremembering.) React is mostly about life cycles, propagation, and composition. The first two are orthogonal to web components afaik. The third has some overlap, but it’s mostly complementary with web components (once again, afaik.)
- paulddraper 8y ago
  Angular has kept web component compatibility as a high priority. You can publish angular components as web components, and even leverage native functionality like shadow Dom.
yesimahuman 8y ago
Strongly disagree. We (Ionic) built our new version directly on top of Web Components and they are certainly a thing for us and our users building real apps on top. Plus, they are a huge reason why we now support React and Vue and plain JS. Frankly, this has been transformational for our project and for our business. I'm completely sold. One problem with the WC debate is people constantly compare the raw Web Component collection of APIs to a framework, when in reality, you'll add in libraries or extras on top of your Web Components to get similar functionality (like Stencil: http://stenciljs.com/ http://stenciljs.com/), but you'll likely not build apps with them as much as you'll build components to share with others. In that sense, the killer app for Web Components is actually Design Systems, not SPAs. I disagree with the idea that Web Components replace your framework, however. They solve different problems! For Ionic as a cross-platform Design System, they are a major asset.
- benforreal 8y ago
  I'm glad to hear this take. I came from Angular v1 and got sick of the framework churn, so jumped over to Web Components around 2015/2016 instead of going React. I abandoned Polymer pretty quickly around v0.6 because things were changing too much and just went plain vanilla JS + Web Components. I've been building applications since then with just Web Components and couldn't be happier. Unfortunately I just don't have enough experience with React to debate any of these points - I guess I just have to leave it that React is a need I don't have.
- KuhlMensch 8y ago
  > In that sense, the killer app for Web Components is actually Design Systems, not SPAs. My read too
spankalee 8y ago
> The promise was that we could create native components without any dependencies at all This isn't true at all, and it's a big misperception about web components. Web components are pretty low level APIs that expose a few abilities that the browser natively has: defining a tag name, hooking into element lifecycles, creating an encapsulate DOM subtree. Web commonness have no opinion on rendering, state management, etc. and leave other aspects, like responding to property changes, to existing features like JavaScript accessors. It's expected that developers will use libraries to help implement web components, but the libraries won't have to implement a component model, or DOM composition, or CSS scoping. So they'll be smaller and more focused, and the overall product will be faster have fewer proprietary parts.
colordrops 8y ago
Shadow DOM is now supported across all major browsers. Also, don't understand your padding comment. Web Components are style-able.

reustle 8y ago

(sorry, I'm not well versed in some of these things) Would it make sense for React to start using this native web-component at some level moving forward, to improve efficiency ? Maybe another library will replicate most of Reacts features but is powered by this native (faster/cleaner) technology?

wwright 8y ago
afaik web components are mostly about encapsulation and semantics; they let you box up arbitrary HTML, JS and CSS and put a little bow on top so that it looks like one “custom” HTML tag to the rest of the document. (I could be misremembering.) React is mostly about life cycles, propagation, and composition. The first two are orthogonal to web components afaik. The third has some overlap, but it’s mostly complementary with web components (once again, afaik.)
paulddraper 8y ago
Angular has kept web component compatibility as a high priority. You can publish angular components as web components, and even leverage native functionality like shadow Dom.

yesimahuman 8y ago

Strongly disagree. We (Ionic) built our new version directly on top of Web Components and they are certainly a thing for us and our users building real apps on top. Plus, they are a huge reason why we now support React and Vue and plain JS. Frankly, this has been transformational for our project and for our business. I'm completely sold. One problem with the WC debate is people constantly compare the raw Web Component collection of APIs to a framework, when in reality, you'll add in libraries or extras on top of your Web Components to get similar functionality (like Stencil: http://stenciljs.com/ http://stenciljs.com/), but you'll likely not build apps with them as much as you'll build components to share with others. In that sense, the killer app for Web Components is actually Design Systems, not SPAs. I disagree with the idea that Web Components replace your framework, however. They solve different problems! For Ionic as a cross-platform Design System, they are a major asset.

benforreal 8y ago
I'm glad to hear this take. I came from Angular v1 and got sick of the framework churn, so jumped over to Web Components around 2015/2016 instead of going React. I abandoned Polymer pretty quickly around v0.6 because things were changing too much and just went plain vanilla JS + Web Components. I've been building applications since then with just Web Components and couldn't be happier. Unfortunately I just don't have enough experience with React to debate any of these points - I guess I just have to leave it that React is a need I don't have.
KuhlMensch 8y ago
> In that sense, the killer app for Web Components is actually Design Systems, not SPAs. My read too

spankalee 8y ago

> The promise was that we could create native components without any dependencies at all This isn't true at all, and it's a big misperception about web components. Web components are pretty low level APIs that expose a few abilities that the browser natively has: defining a tag name, hooking into element lifecycles, creating an encapsulate DOM subtree. Web commonness have no opinion on rendering, state management, etc. and leave other aspects, like responding to property changes, to existing features like JavaScript accessors. It's expected that developers will use libraries to help implement web components, but the libraries won't have to implement a component model, or DOM composition, or CSS scoping. So they'll be smaller and more focused, and the overall product will be faster have fewer proprietary parts.

colordrops 8y ago

Shadow DOM is now supported across all major browsers. Also, don't understand your padding comment. Web Components are style-able.