3 ms·

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-j

• 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).
          • nickthemagicman 7y ago
            I don't think you're accurate on this. They're a browser spec not an drop in library. I don't know why the makers of the browser engine would ship something like that.
            • svieira 7y ago
              Because the browser engine didn’t ship the component, I did (or you, or that guy Harry who doesn’t know what he’s talking about, take your pick). The component only provides its styles when the JS is run (you can look at the definition). There is no way to make a component that doesn’t require JS (HTML imports were one attempt, but they didn’t work out).
  • nickthemagicman 7y ago
    >In vast majority of cases it's nowhere near "basically web components". What else does it do besides render JSX components and manage their state just like a web component except with more indirection? > All you do is attach the root node of an SPA to any element in the DOM. You missed the point of what I was saying The root node is a single node...where do you define the rest of your components? IN JAVASCRIPT. IF you want progressive enhancement you have to define a SECOND SET OF NODES IN HTML. THIS IS REDUNDANT. >I fail to see where you see progressive enhancement. Why don't you actually read the thing? "If JavaScript is disabled, all panels are shown interleaved with the respective tabs. The tabs now function as headings."
    • dmitriid 7y ago
      > What else does it do besides render JSX components and manage their state just like a web component except with more indirection? 1. There many more ways to implement SPA than JSX. 2. WebComponents have exactly zero state management capabilities, and you need to implement your own ways to deal with state So, SPA frameworks provide the following: - state management - optimised/batched updates (they can flush to the DOM efficiently thus avoiding jank, unnecessary re-paints and reflows) - async rendering - easy fallback states for async data fetching - data fetching - data propagation (for example, from parent to a deeply nested child) - data binding - render targets other than HTML (example, canvas, webgl, native mobile apps) I'm definitely missing more. None of the above are provided by web components, and you will need to bring your own frameworks/libs to cover all those points.
      • nickthemagicman 7y ago
        Some of those aren't SPA specific. They're just javascript. Some are done by external libraries like redux. Some are benefits, however, two way data flow is a janky model in itself that could possbily be done away with by a nice data structure imo. Also, this SPA cargo cult has been around a lot longer than Web Components which have just the past year or two become cross browser compatible. I expect great things from them. Web Components and their associated libraries can and will do all of those as they grow.