5 ms·

I feel like web components are more true to the original intent of the web instead of these SPA frameworks in javascript. You define your page with an XML docu

I feel like web components are more true to the original intent of the web instead of these SPA frameworks in javascript. You define your page with an XML document of UI components and javascript exists for animation and data fetching. I could be wrong but that's just what it seems like to me.

dmitriid 7y ago
Nope. You define your page with custom html tags that won't even render properly without Javascript. And then you need Javascript for literally everything: initialising the component, data fetching, inserting data into the DOM, updating data in the DOM etc.
- nickthemagicman 7y ago
  When I used SPA's it was basically web components inside of javascript so seemed like a layer of unnecessary indirection? I'm SURE web components allow a non-js fallback, or that should be introduced into the spec. See here for progressive enhancement of web components https://googlechromelabs.github.io/howto-components/howto-tabs/ https://googlechromelabs.github.io/howto-components/howto-ta... Dont' SPA's require defining multiple components? A non-js component inside of the html page and a JSX component or whatever inside of the SPA.
  - dmitriid 7y ago
    > When I used SPA's it was basically web components inside of javascript so seemed like a layer of unnecessary indirection? In vast majority of cases it's nowhere near "basically web components". > I'm SURE web components allow a non-js fallback, or that should be introduced into the spec. They don't. All they can do is render static content inside if they have any. > See here for progressive enhancement of web components I fail to see where you see progressive enhancement. It's literally dozens of lines of Javascript code. If you disable JS on that page, you'll get just the static content with no functionality. > Dont' SPA's require defining multiple components? A non-js component inside of the html page and a JSX component or whatever inside of the SPA All you do is attach the root node of an SPA to any element in the DOM. A common approach would be: <body> <div id="app"></div> </body> // elsewhere in JS code X.render(document.getElementById('app'), rootNode) where X is your framework of choice.
    - Spivak 7y ago
      > They don't. All they can do is render static content inside if they have any. What would a non-JS fallback look like that isn't this? Where would the functionality come from if not JS?
      - dmitriid 7y ago
        Not just functionality. Even the styles are broken if you disable JS. That's not "graceful degradation". It's full loss of functionality. Whereas graceful degradation is Graceful degradation is the ability of a computer, machine, electronic system or network to maintain limited functionality even when a large portion of it has been destroyed or rendered inoperative. However, I was primarily responding to "javascript exists for animation and data fetching". As you clearly see, it exists for way more than just that.
        nickthemagicman 7y ago
        > Even the styles are broken if you disable JS. This is outright false "If JavaScript does not run, the element will not match :defined. In that case this style adds spacing between tabs and previous panel." https://googlechromelabs.github.io/howto-components/howto-tabs/ https://googlechromelabs.github.io/howto-components/howto-ta... The styles still run....
        svieira 7y ago
        The styles defined _in_ the web component do not though (none of the `flex` styles are there). If the component was any more complicated than a pair of `<slot />` elements then the DOM structure would also completely change (and any ::part and ::theme targets would be gone too). When JS is disabled you are left with a bunch of arbitrary tags in a structure that doesn't match the structure they have when JS is enabled. That said, I don't think there's a good answer to this problem. Components-as-macros would run without JS, but then you have the LISP problem with composing macros (maybe this is a solved problem, but I haven't read Common Lisp's spec or used Racket in anger).
- Spivak 7y ago
  It seems odd to rail against custom HTML tags requiring code to drive them. Unless you want custom tags to basically just be text-replacement macros for built-in elements you're gonna need some code somewhere to actually make them work. In a parallel universe where web components came first the built-in tags would themselves be web components backed by JS instead of having native implementations.
  - dmitriid 7y ago
    I was primarily responding to "javascript exists for animation and data fetching". Javascript is the core of WebComponents for better or for worse.
    - nickthemagicman 7y ago
      Not accurate at all. Native Web Components are a core spec in the BROWSER. A web component can be completely styled and created without Javascript.
      - dmitriid 7y ago
        ANd what would be the purpose of such a web component? ;)
        nickthemagicman 7y ago
        Progressive Enhancement...
- e12e 7y ago
  > You define your page with custom html tags that won't even render properly without Javascript. html5 encourages custom tags, and can be styled with plain CSS?

dmitriid 7y ago

Nope. You define your page with custom html tags that won't even render properly without Javascript. And then you need Javascript for literally everything: initialising the component, data fetching, inserting data into the DOM, updating data in the DOM etc.

nickthemagicman 7y ago
When I used SPA's it was basically web components inside of javascript so seemed like a layer of unnecessary indirection? I'm SURE web components allow a non-js fallback, or that should be introduced into the spec. See here for progressive enhancement of web components https://googlechromelabs.github.io/howto-components/howto-tabs/ https://googlechromelabs.github.io/howto-components/howto-ta... Dont' SPA's require defining multiple components? A non-js component inside of the html page and a JSX component or whatever inside of the SPA.
- dmitriid 7y ago
  > When I used SPA's it was basically web components inside of javascript so seemed like a layer of unnecessary indirection? In vast majority of cases it's nowhere near "basically web components". > I'm SURE web components allow a non-js fallback, or that should be introduced into the spec. They don't. All they can do is render static content inside if they have any. > See here for progressive enhancement of web components I fail to see where you see progressive enhancement. It's literally dozens of lines of Javascript code. If you disable JS on that page, you'll get just the static content with no functionality. > Dont' SPA's require defining multiple components? A non-js component inside of the html page and a JSX component or whatever inside of the SPA All you do is attach the root node of an SPA to any element in the DOM. A common approach would be: <body> <div id="app"></div> </body> // elsewhere in JS code X.render(document.getElementById('app'), rootNode) where X is your framework of choice.
  - Spivak 7y ago
    > They don't. All they can do is render static content inside if they have any. What would a non-JS fallback look like that isn't this? Where would the functionality come from if not JS?
    - dmitriid 7y ago
      Not just functionality. Even the styles are broken if you disable JS. That's not "graceful degradation". It's full loss of functionality. Whereas graceful degradation is Graceful degradation is the ability of a computer, machine, electronic system or network to maintain limited functionality even when a large portion of it has been destroyed or rendered inoperative. However, I was primarily responding to "javascript exists for animation and data fetching". As you clearly see, it exists for way more than just that.
      - nickthemagicman 7y ago
        > Even the styles are broken if you disable JS. This is outright false "If JavaScript does not run, the element will not match :defined. In that case this style adds spacing between tabs and previous panel." https://googlechromelabs.github.io/howto-components/howto-tabs/ https://googlechromelabs.github.io/howto-components/howto-ta... The styles still run....
        svieira 7y ago
        The styles defined _in_ the web component do not though (none of the `flex` styles are there). If the component was any more complicated than a pair of `<slot />` elements then the DOM structure would also completely change (and any ::part and ::theme targets would be gone too). When JS is disabled you are left with a bunch of arbitrary tags in a structure that doesn't match the structure they have when JS is enabled. That said, I don't think there's a good answer to this problem. Components-as-macros would run without JS, but then you have the LISP problem with composing macros (maybe this is a solved problem, but I haven't read Common Lisp's spec or used Racket in anger).
Spivak 7y ago
It seems odd to rail against custom HTML tags requiring code to drive them. Unless you want custom tags to basically just be text-replacement macros for built-in elements you're gonna need some code somewhere to actually make them work. In a parallel universe where web components came first the built-in tags would themselves be web components backed by JS instead of having native implementations.
- dmitriid 7y ago
  I was primarily responding to "javascript exists for animation and data fetching". Javascript is the core of WebComponents for better or for worse.
  - nickthemagicman 7y ago
    Not accurate at all. Native Web Components are a core spec in the BROWSER. A web component can be completely styled and created without Javascript.
    - dmitriid 7y ago
      ANd what would be the purpose of such a web component? ;)
      - nickthemagicman 7y ago
        Progressive Enhancement...
e12e 7y ago
> You define your page with custom html tags that won't even render properly without Javascript. html5 encourages custom tags, and can be styled with plain CSS?