4 ms·

I’ve been playing with webcomponents for a month or two and really love them. I do wish that IntelliJ would play nice with the formatting of them though. Quest

I’ve been playing with webcomponents for a month or two and really love them. I do wish that IntelliJ would play nice with the formatting of them though. Question: when and or if they gain in adoption, could you see them replacing react? If not, what’s the use-cases that you believe they wouldn’t work for?

asurty 4y ago
IMO they are complimentary to react. Frameworks like react/angular/backbone/vue solve the problem of creating a single page application with a nice architecture and sharing code between components within the SPA. Web components solve the problem of sharing code between any application. There are opportunities to share code (eg/ data binding) and I believe that is the case (they use the same underlying browser APIs where available)
- pjmlp 4y ago
  With exception of React, all those frameworks have options to generate WebComponents for their component model.
  - asurty 4y ago
    That is cool, didn't realize that! I wonder why React lags behind ( ? )
    - pjmlp 4y ago
      I think it is a culture issue, as far as I understand the underlying issue, the React community is not so impressed with having to deal with Web Components.
      - dmitriid 4y ago
        Realistically, there's almost no community that is impressed with having to deal with Web Components. In this discussion I keep reiterating: there are multiple reasons why none of the major frameworks and very few of the new frameworks have WCs as their foundation. At best they can consume/embed them and perhaps compile to them. And even that is rife with problems.
        pjmlp 4y ago
        If we ignore the fact that everyone else supports them, regardless if they are their foundation or not. https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/
        dmitriid 4y ago
        > everyone else supports them That's what I said: At best they can consume/embed them and perhaps compile to them. > regardless if they are their foundation or not. And the fact that they are not forming the foundation of these frameworks should be examined and fixed, not ignnored. However, wc proponents ignore this entirely.
        pjmlp 4y ago
        Maybe because those frameworks don't want to be rewritten from scratch? It is like asking why so many graphics engines get written, instead of using raw OpenGL/Vulkan calls and extension spaghetti all over the place.
        dmitriid 4y ago
        > Maybe because those frameworks don't want to be rewritten from scratch? The absolute vast majority of new frameworks don't use web components as the foundation. Perhaps instead of burying their heads in the sand people pushing web components would should finally start asking why?
        pjmlp 4y ago
        Usually I use https://angular.io/guide/elements https://angular.io/guide/elements, https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue https://vuejs.org/guide/extras/web-components.html#using-cus... or https://lit.dev/ https://lit.dev/ I only need to ask why, when I have to deal with React based stuff.
        4y ago
lordgroff 4y ago
Anywhere you actually need React (and also React lite solutions like Preact or Alpine), which is essentially where your page isn't just a static page, web components by themselves don't do anything to handle the complexity of state. But what they allow you to do is to use the same component in whatever framework you pick.
- bobthepanda 4y ago
  Yeah, what I like about React is how declarative component writing is, and how you delegate state changes to escape hatches. Plain old HTML is supposed to be declarative but updating with vanilla JS quickly gets you into the weeds. I tried to get into WebComponents, but the MDN tutorial has you writing a lot of `document.createElement` and `document.appendChild`, which is the sort of imperative stuff I don't like about vanilla JS DOM manipulation.
  - vagrantJin 4y ago
    > delegate state changes to escape hatches Ay. Can you please explain what this means in simple, 5th grader English?
    - bobthepanda 4y ago
      React says what things should be, given a limited state. (These elements read X, and update when X changes.) Vanilla JS says how to do things (find these HTML elements and update them by doing X). It is much simpler to track and mutate a state object, than it is to find all the nodes you need to update and update appropriately.

asurty 4y ago

IMO they are complimentary to react. Frameworks like react/angular/backbone/vue solve the problem of creating a single page application with a nice architecture and sharing code between components within the SPA. Web components solve the problem of sharing code between any application. There are opportunities to share code (eg/ data binding) and I believe that is the case (they use the same underlying browser APIs where available)

pjmlp 4y ago
With exception of React, all those frameworks have options to generate WebComponents for their component model.
- asurty 4y ago
  That is cool, didn't realize that! I wonder why React lags behind ( ? )
  - pjmlp 4y ago
    I think it is a culture issue, as far as I understand the underlying issue, the React community is not so impressed with having to deal with Web Components.
    - dmitriid 4y ago
      Realistically, there's almost no community that is impressed with having to deal with Web Components. In this discussion I keep reiterating: there are multiple reasons why none of the major frameworks and very few of the new frameworks have WCs as their foundation. At best they can consume/embed them and perhaps compile to them. And even that is rife with problems.
      - pjmlp 4y ago
        If we ignore the fact that everyone else supports them, regardless if they are their foundation or not. https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/
        dmitriid 4y ago
        > everyone else supports them That's what I said: At best they can consume/embed them and perhaps compile to them. > regardless if they are their foundation or not. And the fact that they are not forming the foundation of these frameworks should be examined and fixed, not ignnored. However, wc proponents ignore this entirely.
        pjmlp 4y ago
        Maybe because those frameworks don't want to be rewritten from scratch? It is like asking why so many graphics engines get written, instead of using raw OpenGL/Vulkan calls and extension spaghetti all over the place.
        dmitriid 4y ago
        > Maybe because those frameworks don't want to be rewritten from scratch? The absolute vast majority of new frameworks don't use web components as the foundation. Perhaps instead of burying their heads in the sand people pushing web components would should finally start asking why?
        pjmlp 4y ago
        Usually I use https://angular.io/guide/elements https://angular.io/guide/elements, https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue https://vuejs.org/guide/extras/web-components.html#using-cus... or https://lit.dev/ https://lit.dev/ I only need to ask why, when I have to deal with React based stuff.
        4y ago

lordgroff 4y ago

Anywhere you actually need React (and also React lite solutions like Preact or Alpine), which is essentially where your page isn't just a static page, web components by themselves don't do anything to handle the complexity of state. But what they allow you to do is to use the same component in whatever framework you pick.

bobthepanda 4y ago
Yeah, what I like about React is how declarative component writing is, and how you delegate state changes to escape hatches. Plain old HTML is supposed to be declarative but updating with vanilla JS quickly gets you into the weeds. I tried to get into WebComponents, but the MDN tutorial has you writing a lot of `document.createElement` and `document.appendChild`, which is the sort of imperative stuff I don't like about vanilla JS DOM manipulation.
- vagrantJin 4y ago
  > delegate state changes to escape hatches Ay. Can you please explain what this means in simple, 5th grader English?
  - bobthepanda 4y ago
    React says what things should be, given a limited state. (These elements read X, and update when X changes.) Vanilla JS says how to do things (find these HTML elements and update them by doing X). It is much simpler to track and mutate a state object, than it is to find all the nodes you need to update and update appropriately.