A Web Components Bedtime Story

A Web Components Bedtime Story

Table of contents

No heading

No headings in the article.

When Apple single-handedly put Flash in the dirt to give way for HTML5. Then later realized together with Meta that developers needed more than divs and form elements. And without Flash, they only had one choice — JavaScript

Initially, JS was great because it allowed you to sprinkle in bits of interactivity and dynamic data into your website. But over time, as the applications we built became more complex developers had to rely on..you guessed it……More JavaScript to manage all that complexity by swapping out semantic HTML for JS, it made sites slower, broke assistive technology like screen readers and most importantly, (at least for Google) made it difficult for search engine to parse and index the content.

So what was the solution? Web Components. The simplicity of HTML combined with the power of JS. But still, authoring them is a nightmare. Some said: “A whole page of that, your brain doesn’t know it, but your heart can tell. Your heart goes — It’s not working”

webc.png

Writing low level DOM was so painful that Google created a JS framework called Polymer to make it easier and faster to make custom elements. the solution Browser vendors came up with to eliminate the need for frameworks was too difficult to use without a framework.

wa.jfif

Web components are fine in all the ways that don’t matter. — ralph Waldo Emmerson

The real challenge in building interactive UI isn’t just building components, it’s managing the flow of data throughout the entire application. Of all the problems WCs set out to solve, they missed the most important one. In the meantime, devs at Facebook released React — a deeply pragmatic solution that offered devs an easier way to build components and a more intuitive way to manage state. It’s no wonder React was so hated when it came out. It was everything that the platform was against -

fx.jfif — a framework where everything was written in JS. But by rethinking the best practices of the time, React was able to solve real problems for real developers who are building real applications.

Nonetheless, Google’s Web components aren’t yet out of the picture. Something Lit is being worked on. (Pun very much intended)

lit.png I am watching and very much interested in what the future holds for Lit especially Developer adoption.