6 ms·

Isomorphic Web Components

91 points by Fudgel 2y ago

keybored 2y ago
[flagged]
- bloomingkales 2y ago
  I’ve been reflecting a lot on life lately and it’s occurred to me from time to time, especially looking at some of my career work, that I’ve been spending a lot of time on bullshit. Like gosh, I feel like they’ve been talking about the right way to hydrate these components forever and it still feels like such an unnatural solution. I’ll leave it at that.
- echelon 2y ago
  As much fun as it can be to poke friendly fun at the frontend folks, their problem domain surface area is actually large enough to demand lots of terminology.
- revskill 2y ago
  It is a way of life too: having fun.
- wildpeaks 2y ago
  If you're referring to the word "isomorphic", it was quite trendy a decade ago although I hadn't heard it in a few years.
  - wruza 2y ago
    I prefer using “cross-end” in my code comments.
    - edflsafoiewq 2y ago
      That's a much better term.
Etheryte 2y ago
I don't really think server-side rendering is an important reason why most people don't use web components. Most web applications that use components of any sort are largely SPAs of some variety and don't care one bit about server-side rendering. In my opinion, the main reason web components aren't widely used is that the alternatives are just better. I'm yet to see a strong case being made where web components are favorable for a reason other than purism.
- afavour 2y ago
  From my personal experience the lack of SSR is one reason I don’t use web components. But that said there isn’t a particularly persuasive case to use them either, other than it being nice to use standards.
- pier25 2y ago
  > Most web applications that use components of any sort are largely SPAs How did you get to that conclusion? Honestly asking because my hunch is that it would be the opposite. > I'm yet to see a strong case being made where web components are favorable for a reason other than purism. IMO it's wrong to see web components as a universal solution to all client-side use cases. Web components are amazing for distributing widgets to third party users. From users authoring HTML in any number of environments to a way to plug modern JS stuff into SSR backend frameworks. Back in 2016 I worked in library of widgets for interactive education ebooks. People producing the ebooks could barely write HTML so being able to add interactivity with configurable custom tags was extremely easy for them. Currently I'm working in an embeddable and customizable audio player with web components. Typically you'd use iframes which are quite heavy and have serious limitations. In both use cases, web components were the right choice.
  - DrFell 2y ago
    Websites built with JavaScript frameworks need SSR because of SEO. Applications don't, so most are SPAs, because they can be. The fully decoupled SPA is a special architecture. Complexity isn't just lessened, a lot of it vanishes. Poof, bye bye headaches. If you can use it, you do, and most web applications can, so they do.
potsandpans 2y ago
Only partially related to the blog post, but... The thing that is lost on me with all of these webcomponents solutions is that they inevitably rely on tagged templates to do the heaviest lifting. I don't want to write strings, I want to write statically analyzable code. IDEs do some heavy lifting here for visual hints, and there are a few html-in-js linting solutions, but none of them are very compelling.
- Onavo 2y ago
  Well since the letter x is taken, we can use w for web components. So a component file with tagged HTMl strings should have the extension .tsw or .jsw
- madeofpalk 2y ago
  This too was my roadblock in the article > You’d be forgiven for thinking you were looking at a React component! Frankly, I don’t see a fundamental difference between these and frameworks like Svelte or Vue Regardless of whether you should be forgiven for thinking it’s a react component, it omits it’s biggest strength - JSX is just JavaScript function calls, and thus can be composed as JavaScript and type checked as java/typescript. This to me is the fundamental difference between React/JSX and other approaches. Any framework that gives up on type checking for the view layer is a non-starter in my books.
  - CharlieDigital 2y ago
    The fundamental differences are quite stark. Vue, Svelte, web components, and vanilla only execute code that is marked as a callback. Example: let x = 0 var counter = computed(() => ... ) In this Vue snippet of an SFC, the callback in the computed executes in reaction to some change without invoking the assignment of x (obviously a trivial case here). DOM + JavaScript is the same React invokes the entire component function and all calls and allocations in the path of the component function. The mental model is inverted in a sense. This is one of the reasons React generally performs more poorly in both speed and space.
- spankalee 2y ago
sirwhinesalot 2y ago
Great stuff, but if you are writing your own components just stick to light DOM and do not write code to generate DOM elements for the component to look right. Let's say you are making a splitter component. Do not do this: <my-splitter> <div slot="left"> <my-handle slot="handle"> <div slot="right"> </my-splitter> With some divs on the inside assigned to slots. Instead do this: <my-splitter> <div data-slot="left"> <my-handle data-slot="handle"> <div data-slot="right"> </my-splitter> Looks almost the same right? Except the one at the bottom is trivially server-side rendered. *It already is*. Stay on the light side.
deleted 2y ago
[deleted]
egeozcan 2y ago
Lit has an experimental SSR plugin: https://lit.dev/docs/ssr/overview/ https://lit.dev/docs/ssr/overview/ I also sort of made SSR work under next.js (not to be mixed with server-components), but that took a lot of hacks and going off the beaten path: https://www.npmjs.com/package/@lit-labs/nextjs https://www.npmjs.com/package/@lit-labs/nextjs
deleted 2y ago
[deleted]
nilslice 2y ago
Enhance is super cool and the fact that it can be called from basically any server language makes web components really powerful & reusable. I work on one of the underlying libraries that provide it said portability, Extism, and I love to see how WebAssembly actually bring some of the coolest parts of the web browser into other applications. https://github.com/extism/extism https://github.com/extism/extism
yakshaving_jgt 2y ago
Front-end people keep using the word “isomorphic”. I don’t think it means what they think it means. To me, two types of values are isomorphic if they share the same cardinality. The isomorphism between two isomorphic types is a pair of morphisms (functions) that when composed one after the other is the same as doing nothing. This word is a couple hundred years old, so it long predates front-end development. It has a pretty specific and established meaning in mathematics. It’s not right to use this word when you just mean “shared code”.
- jakelazaroff 2y ago
  Author here! If a group of people use a word and also all understand what others in the group are saying when they use it, then the word does in fact mean what they think it means :)
- gbjma 2y ago
  I have no math background but can read ancient Greek pretty fluently. “Isomorphic” is simply a Greek compound word meaning “same shape.” The reason people use “isomorphic” for server side rendering + hydration is that you can create an application where all the components have the “same shape” in various ways (i.e., the same source code, arguments, templating, etc.) A technical term having a different meaning in two different fields doesn’t mean that the version with which you’re more familiar is correct and everyone else is wrong. That would be like commenting on an article entitled “Syrian rebel forces take Damascus” to say “National-security people keep using the word ‘forces’. I don’t think it means what they think it means. To me, force equals mass times acceleration.”
  - yakshaving_jgt 2y ago
    That's such a silly analogy it's tantamount to constructing a straw man. I don't have a background in mathematics either, but I think it's quite clear that the use of "isomorphic" here as a stand in for code sharing is forced, to say the least. It's the same kind of silliness as using the term "tree shaking" in place of dead code elimination (which is, you know, an established technical term in the same field). In this instance however, instead of using a fancy-sounding word (which I think is a little pretentious), they've gone with an analogy with a less obvious meaning (what are you shaking from the tree? Are the good bits falling off also?).

91 points by Fudgel 2y ago

keybored 2y ago

[flagged]

bloomingkales 2y ago
I’ve been reflecting a lot on life lately and it’s occurred to me from time to time, especially looking at some of my career work, that I’ve been spending a lot of time on bullshit. Like gosh, I feel like they’ve been talking about the right way to hydrate these components forever and it still feels like such an unnatural solution. I’ll leave it at that.
echelon 2y ago
As much fun as it can be to poke friendly fun at the frontend folks, their problem domain surface area is actually large enough to demand lots of terminology.
revskill 2y ago
It is a way of life too: having fun.
wildpeaks 2y ago
If you're referring to the word "isomorphic", it was quite trendy a decade ago although I hadn't heard it in a few years.
- wruza 2y ago
  I prefer using “cross-end” in my code comments.
  - edflsafoiewq 2y ago
    That's a much better term.

Etheryte 2y ago

I don't really think server-side rendering is an important reason why most people don't use web components. Most web applications that use components of any sort are largely SPAs of some variety and don't care one bit about server-side rendering. In my opinion, the main reason web components aren't widely used is that the alternatives are just better. I'm yet to see a strong case being made where web components are favorable for a reason other than purism.

afavour 2y ago
From my personal experience the lack of SSR is one reason I don’t use web components. But that said there isn’t a particularly persuasive case to use them either, other than it being nice to use standards.
pier25 2y ago
> Most web applications that use components of any sort are largely SPAs How did you get to that conclusion? Honestly asking because my hunch is that it would be the opposite. > I'm yet to see a strong case being made where web components are favorable for a reason other than purism. IMO it's wrong to see web components as a universal solution to all client-side use cases. Web components are amazing for distributing widgets to third party users. From users authoring HTML in any number of environments to a way to plug modern JS stuff into SSR backend frameworks. Back in 2016 I worked in library of widgets for interactive education ebooks. People producing the ebooks could barely write HTML so being able to add interactivity with configurable custom tags was extremely easy for them. Currently I'm working in an embeddable and customizable audio player with web components. Typically you'd use iframes which are quite heavy and have serious limitations. In both use cases, web components were the right choice.
- DrFell 2y ago
  Websites built with JavaScript frameworks need SSR because of SEO. Applications don't, so most are SPAs, because they can be. The fully decoupled SPA is a special architecture. Complexity isn't just lessened, a lot of it vanishes. Poof, bye bye headaches. If you can use it, you do, and most web applications can, so they do.

potsandpans 2y ago

Only partially related to the blog post, but... The thing that is lost on me with all of these webcomponents solutions is that they inevitably rely on tagged templates to do the heaviest lifting. I don't want to write strings, I want to write statically analyzable code. IDEs do some heavy lifting here for visual hints, and there are a few html-in-js linting solutions, but none of them are very compelling.

Onavo 2y ago
Well since the letter x is taken, we can use w for web components. So a component file with tagged HTMl strings should have the extension .tsw or .jsw
madeofpalk 2y ago
This too was my roadblock in the article > You’d be forgiven for thinking you were looking at a React component! Frankly, I don’t see a fundamental difference between these and frameworks like Svelte or Vue Regardless of whether you should be forgiven for thinking it’s a react component, it omits it’s biggest strength - JSX is just JavaScript function calls, and thus can be composed as JavaScript and type checked as java/typescript. This to me is the fundamental difference between React/JSX and other approaches. Any framework that gives up on type checking for the view layer is a non-starter in my books.
- CharlieDigital 2y ago
  The fundamental differences are quite stark. Vue, Svelte, web components, and vanilla only execute code that is marked as a callback. Example: let x = 0 var counter = computed(() => ... ) In this Vue snippet of an SFC, the callback in the computed executes in reaction to some change without invoking the assignment of x (obviously a trivial case here). DOM + JavaScript is the same React invokes the entire component function and all calls and allocations in the path of the component function. The mental model is inverted in a sense. This is one of the reasons React generally performs more poorly in both speed and space.
spankalee 2y ago

sirwhinesalot 2y ago

Great stuff, but if you are writing your own components just stick to light DOM and do not write code to generate DOM elements for the component to look right. Let's say you are making a splitter component. Do not do this: <my-splitter> <div slot="left"> <my-handle slot="handle"> <div slot="right"> </my-splitter> With some divs on the inside assigned to slots. Instead do this: <my-splitter> <div data-slot="left"> <my-handle data-slot="handle"> <div data-slot="right"> </my-splitter> Looks almost the same right? Except the one at the bottom is trivially server-side rendered. *It already is*. Stay on the light side.

deleted 2y ago

[deleted]

egeozcan 2y ago

Lit has an experimental SSR plugin: https://lit.dev/docs/ssr/overview/ https://lit.dev/docs/ssr/overview/ I also sort of made SSR work under next.js (not to be mixed with server-components), but that took a lot of hacks and going off the beaten path: https://www.npmjs.com/package/@lit-labs/nextjs https://www.npmjs.com/package/@lit-labs/nextjs

deleted 2y ago

[deleted]

nilslice 2y ago

Enhance is super cool and the fact that it can be called from basically any server language makes web components really powerful & reusable. I work on one of the underlying libraries that provide it said portability, Extism, and I love to see how WebAssembly actually bring some of the coolest parts of the web browser into other applications. https://github.com/extism/extism https://github.com/extism/extism

yakshaving_jgt 2y ago

Front-end people keep using the word “isomorphic”. I don’t think it means what they think it means. To me, two types of values are isomorphic if they share the same cardinality. The isomorphism between two isomorphic types is a pair of morphisms (functions) that when composed one after the other is the same as doing nothing. This word is a couple hundred years old, so it long predates front-end development. It has a pretty specific and established meaning in mathematics. It’s not right to use this word when you just mean “shared code”.

jakelazaroff 2y ago
Author here! If a group of people use a word and also all understand what others in the group are saying when they use it, then the word does in fact mean what they think it means :)
gbjma 2y ago
I have no math background but can read ancient Greek pretty fluently. “Isomorphic” is simply a Greek compound word meaning “same shape.” The reason people use “isomorphic” for server side rendering + hydration is that you can create an application where all the components have the “same shape” in various ways (i.e., the same source code, arguments, templating, etc.) A technical term having a different meaning in two different fields doesn’t mean that the version with which you’re more familiar is correct and everyone else is wrong. That would be like commenting on an article entitled “Syrian rebel forces take Damascus” to say “National-security people keep using the word ‘forces’. I don’t think it means what they think it means. To me, force equals mass times acceleration.”
- yakshaving_jgt 2y ago
  That's such a silly analogy it's tantamount to constructing a straw man. I don't have a background in mathematics either, but I think it's quite clear that the use of "isomorphic" here as a stand in for code sharing is forced, to say the least. It's the same kind of silliness as using the term "tree shaking" in place of dead code elimination (which is, you know, an established technical term in the same field). In this instance however, instead of using a fancy-sounding word (which I think is a little pretentious), they've gone with an analogy with a less obvious meaning (what are you shaking from the tree? Are the good bits falling off also?).