<story><title>The Failed Promise of Web Components</title><url>https://lea.verou.me/2020/09/the-failed-promise-of-web-components/</url></story><parent_chain><item><author>nwienert</author><text>Web Components are a total mess and impossible to build anything of significance with. I can&amp;#x27;t even imagine how anyone would get anything done with them. It&amp;#x27;s like an Angular developer, an artist, and a mid-2010s neural net walked into a bar and sketched out a spec by taking shots and passing it clockwise.&lt;p&gt;Separation of languages is a silly way to separate things. You&amp;#x27;re building &lt;i&gt;components&lt;/i&gt;: logic, structure and style are coupled. SwiftUI adopts the React model, and it succeeds because of it. One can build an app in React&amp;#x2F;SwiftUI in about 1&amp;#x2F;2 the time spent &amp;quot;separating concerns&amp;quot;, and build systems still extract things out to be clean and performant, there&amp;#x27;s no sacrifice being made there. CSS is a shitshow and a total mess especially on large teams.&lt;p&gt;React has nothing to do with how performant an app is and if anything speeds them up compared to anything previously, you may be confusing the power and ease with which it enables development as getting some drunk on building larger apps, but that&amp;#x27;s only because of how effective it is. Twitter is a good example, great performance. It&amp;#x27;s way more about the team than the tool, though certainly it will get easier over time to have the defaults be better at optimization for smaller teams who are ambitious.&lt;p&gt;Most of the super bloated websites I see are basically news sites and other less-techy sites that are stuffed with ad tracking and have no tree shaking. The majority of React apps build with Webpack which supports tree shaking and lazy loading out of the box, plus React makes it possible to pre-render your entire app and deliver it as HTML that hydrates.</text></item><item><author>jeroenhd</author><text>I&amp;#x27;m a strong proponent of separation of duties on the web (style and visuals in CSS, layout in HTML, anything interactive in JS). Enabling data binding in HTML would only serve to blur those lines.&lt;p&gt;With some minimal JS, you can update each web component already. Is writing nameField.innerText = response.name really that difficult? What problem does it solve to make a standard for it? As for (de)serialization, JS has built-in support for JSON and XML. HTML attributes are everything but rickety in my opinion, as any decent parser will allow you to access them as if they are a normal dictionary. Put JSON in them if you really want to encode complex data in attributes, although you probably shouldn&amp;#x27;t.&lt;p&gt;I strongly believe the abhorrent overuse of React and other such libraries on the web is the sole reason our computers have gotten hundreds of times faster but the web is only slightly as quick. I don&amp;#x27;t see a place in web standards for a React-style functional design because of the specific rules each of these libraries have.</text></item><item><author>brundolf</author><text>This post is needlessly snarky, but I don&amp;#x27;t disagree with the basic premise.&lt;p&gt;Here&amp;#x27;s what killed web components: lack of native databinding on the web. That&amp;#x27;s the reason the standard is useless without JS. Any modular, dynamic, modern UI requires databinding, which means it&amp;#x27;s going to bring in a framework anyway, which means that self-contained widgets are &lt;i&gt;all&lt;/i&gt; going to bring in their own frameworks, which means that instead of one large framework on the page you have five or six, all of them stitched together through rickety HTML-attribute APIs and custom value-parsing strategies because HTML attributes are just strings.&lt;p&gt;I fail to grasp why databinding hasn&amp;#x27;t made it into a web standard yet. The web has a long tradition of feeling out features in the JS world before adopting the successful ones into the platform. jQuery turned into querySelector() and fetch(), CommonJS modules blazed the trail that led to ES modules, etc. And this next paradigm is more than ready to get standardized. Not only would it make the dream of web components possible, it would eliminate the need for a whole lot of the JavaScript out there and even make UIs faster, since reactivity logic would be implemented natively.&lt;p&gt;It&amp;#x27;s such an obvious, ubiquitous improvement to the web that I can only assume there&amp;#x27;s some fundamental implementation roadblock I&amp;#x27;m missing.</text></item></parent_chain><comment><author>isochronous</author><text>Weird, because we&amp;#x27;re using web components at my workplace to build complex web applications.  We use Lit-Element as a base class and have come up with a top-down functional state pattern for data that removes the need for two-way binding.  If a sub-component needs to update its state due to DOM interaction, it just fires off an event with info about that DOM interaction, and the data store for that component (another web component) does the necessary state modification, then fires off a &amp;quot;state-changed&amp;quot; event that tells all associated components to update their state from the &amp;quot;master&amp;quot; store (one line of code).  All of the data elements use pure functions to do state modification, so doing complex operations is simply a matter of composing the appropriate functions.  I&amp;#x27;ve not used react myself other than playing with a few demos, but another developer on my team says the pattern is very similar to how react stores work, and the core modules that drive it are like 100 lines of code.</text></comment>
<story><title>The Failed Promise of Web Components</title><url>https://lea.verou.me/2020/09/the-failed-promise-of-web-components/</url></story><parent_chain><item><author>nwienert</author><text>Web Components are a total mess and impossible to build anything of significance with. I can&amp;#x27;t even imagine how anyone would get anything done with them. It&amp;#x27;s like an Angular developer, an artist, and a mid-2010s neural net walked into a bar and sketched out a spec by taking shots and passing it clockwise.&lt;p&gt;Separation of languages is a silly way to separate things. You&amp;#x27;re building &lt;i&gt;components&lt;/i&gt;: logic, structure and style are coupled. SwiftUI adopts the React model, and it succeeds because of it. One can build an app in React&amp;#x2F;SwiftUI in about 1&amp;#x2F;2 the time spent &amp;quot;separating concerns&amp;quot;, and build systems still extract things out to be clean and performant, there&amp;#x27;s no sacrifice being made there. CSS is a shitshow and a total mess especially on large teams.&lt;p&gt;React has nothing to do with how performant an app is and if anything speeds them up compared to anything previously, you may be confusing the power and ease with which it enables development as getting some drunk on building larger apps, but that&amp;#x27;s only because of how effective it is. Twitter is a good example, great performance. It&amp;#x27;s way more about the team than the tool, though certainly it will get easier over time to have the defaults be better at optimization for smaller teams who are ambitious.&lt;p&gt;Most of the super bloated websites I see are basically news sites and other less-techy sites that are stuffed with ad tracking and have no tree shaking. The majority of React apps build with Webpack which supports tree shaking and lazy loading out of the box, plus React makes it possible to pre-render your entire app and deliver it as HTML that hydrates.</text></item><item><author>jeroenhd</author><text>I&amp;#x27;m a strong proponent of separation of duties on the web (style and visuals in CSS, layout in HTML, anything interactive in JS). Enabling data binding in HTML would only serve to blur those lines.&lt;p&gt;With some minimal JS, you can update each web component already. Is writing nameField.innerText = response.name really that difficult? What problem does it solve to make a standard for it? As for (de)serialization, JS has built-in support for JSON and XML. HTML attributes are everything but rickety in my opinion, as any decent parser will allow you to access them as if they are a normal dictionary. Put JSON in them if you really want to encode complex data in attributes, although you probably shouldn&amp;#x27;t.&lt;p&gt;I strongly believe the abhorrent overuse of React and other such libraries on the web is the sole reason our computers have gotten hundreds of times faster but the web is only slightly as quick. I don&amp;#x27;t see a place in web standards for a React-style functional design because of the specific rules each of these libraries have.</text></item><item><author>brundolf</author><text>This post is needlessly snarky, but I don&amp;#x27;t disagree with the basic premise.&lt;p&gt;Here&amp;#x27;s what killed web components: lack of native databinding on the web. That&amp;#x27;s the reason the standard is useless without JS. Any modular, dynamic, modern UI requires databinding, which means it&amp;#x27;s going to bring in a framework anyway, which means that self-contained widgets are &lt;i&gt;all&lt;/i&gt; going to bring in their own frameworks, which means that instead of one large framework on the page you have five or six, all of them stitched together through rickety HTML-attribute APIs and custom value-parsing strategies because HTML attributes are just strings.&lt;p&gt;I fail to grasp why databinding hasn&amp;#x27;t made it into a web standard yet. The web has a long tradition of feeling out features in the JS world before adopting the successful ones into the platform. jQuery turned into querySelector() and fetch(), CommonJS modules blazed the trail that led to ES modules, etc. And this next paradigm is more than ready to get standardized. Not only would it make the dream of web components possible, it would eliminate the need for a whole lot of the JavaScript out there and even make UIs faster, since reactivity logic would be implemented natively.&lt;p&gt;It&amp;#x27;s such an obvious, ubiquitous improvement to the web that I can only assume there&amp;#x27;s some fundamental implementation roadblock I&amp;#x27;m missing.</text></item></parent_chain><comment><author>jeroenhd</author><text>I have never used SwiftUI so I can&amp;#x27;t comment on it. However, separation of concerns doesn&amp;#x27;t need to take extra development time. Inlining all CSS and JS is like dropping the MVC model because creating all the necessary classes is taking too much time; focusing on short term gains only lead to a mediocre end result, one that nobody wants to maintain five years down the line.&lt;p&gt;Good React is fine for large applications, but not for websites. Even in applications a few lines of Javascript and a rendering backend can replace entire JS frameworks. Try disabling Javascript for a day and you can see how many pages just become a white screen because whatever is replacing the browser&amp;#x27;s renderer isn&amp;#x27;t loading.&lt;p&gt;&amp;gt; Twitter is a good example, great performance.&lt;p&gt;I agree that it&amp;#x27;s a great example, but it performs horribly for me. I use their website on my phone and videos rarely play back properly, content jumps around while navigating, empty screens and loading bars are everywhere. Sometime I just have to reload because the Twitter website decided it doesn&amp;#x27;t want to load images anymore. Nitter links, on the other hand, load instantly, including image and video content, because of its minimalist approach.&lt;p&gt;Server side rendering is a welcome improvement because it means the developer doesn&amp;#x27;t offload the website&amp;#x27;s calculations to their visitors. I&amp;#x27;m fine with whatever framework people pick on the server, as long as my browser doesn&amp;#x27;t get its rendering engine replaced by the fancy framework for the week.</text></comment>