Web Components Are Revolutionary

You may have heard about Web Components, the upcoming group of browser standards that allow for developers to create their own custom elements. If not, maybe you've heard of Polymer or X-Tags. What you haven't realized is that Web Components represent the most important new browser technology since AJAX.

At first blush, Web Components may seem like a sensible and evolutionary step. It's taking practices that have been widely adopted by the front-end community and bringing them browser-native. While this is both a boon and a good idea, it's nothing your favorite framework doesn't more or less let you do. Days, weeks, or even months later, it finally sinks in.

A World of Silos

In author Hugh Howey's post-apocalyptic "Wool" universe, mankind lives in massive vertical silos underground. The air above ground is so toxic that those who venture outside die in a matter of minutes. Each silo is completely isolated from the others. Each silo is unable to communicate or share knowledge with the others. Each silo is toiling away solving the same issue dozens of times.

This is a surprisingly apt metaphor for front-end development today. Developers place bets on their silo of choice (jQuery, Angular, Backbone, Ember) and their application lives using whatever plugins and libraries are available in their particular framework silo. The barren, unusable above-ground is vanilla JavaScript: a harsh, unfriendly world of browser quirks and frustrating APIs that quickly suffocate even the most determined developers.

The fundamental issue is that we're building applications on a foundation built for documents. The web has become the dominant application platform in spite of its origin, not because of it. Each framework is forced to construct its own source of truth, its own engine of application state that is naturally opaque to all other frameworks.

So why are Web Components so revolutionary? Because with Web Components, we aren't building a newer, shinier silo. Instead, we're terraforming the land above and making it habitable for the first time in history.

Going Native

The greatest strength of Web Components isn't the Shadow DOM, nor HTML Imports, nor even Custom Elements. It's greatest strength is how these pieces all work together to make the DOM itself a viable source of truth and engine of application state.

For the first time it will be reasonable to have components built with different frameworks interoperate perfectly. You'll be able to mix and match X-Tags, Polymer, and vanilla custom elements as well as elements that come from new, yet unreleased frameworks. No more rewriting jQuery plugins for Angular, or Backbone extensions for Ember. No more toiling alone in silos. It's time to come up for air.

This is all possible because custom elements work just like any other element. Events, properties, attributes, it all works just like you'd expect. In addition, the Shadow DOM allows library developers to keep a messy internal state while exposing a simple public API.

Frameworks will continue to exist, but their purpose will be different. It's highly likely that Angular and Ember, for example, will embrace Web Components once they become widely browser-supported. Instead of building facilities for application development from the ground up, however, they'll be enhancing powerful native facilities with conveniences, structure, and syntax sugar. You will be able to mix and match the parts of these frameworks that best suit your application's needs without having to worry about whether X library supports Y framework.

Mashup Masterpiece

It won't just be front-end frameworks that are revolutionized by Web Components. Companies that offer third-party APIs for web integration will be able to scrap their complex proprietary JavaScript loading paradigms and switch to Web Components as a basis for integration.

After a simple HTML import you will be able to use a <google-map> element, a <facebook-login> element, or a <disqus-comments> element. Even non-widget integrations will be made easier through custom elements that can fetch API data, perform authentication, and more.

As with frameworks, Web Components will provide a common standard in which API providers can build. Abstracting away much of the tedious "re-inventing the wheel" work lets developers focus on building rich, developer-friendly integrations for their applications.

---

When AJAX landed in browsers it massively shifted the web development landscape. Today we stand on the precipice of another such shift, and that shift is Web Components. The next few years are going to be really interesting for web developers.

It's Web Components Week at Divshot! Stay tuned every day this week for new content about Web Components and how they'll be affecting your life as a developer today and in the future.