Modern Web Components Demystified

It’s not how fast you can marry a new technology or framework. It’s how fast you can divorce from it that counts. - Me

Polymer is web components. But web components are not (just) polymer. Your current client side framework has been attempting to implement “web components” for over a decade. The smartest information i can pass on is this. Stay at the spec level. I do it with any language I touch. The platform specs have been “fragmented” until about a year ago. We’re at Web Components v1 which gives you pretty much all the browser support you need as they introduced the specs and the browsers are implementing them. Web Components is a concept that is being worked on by companies like Google, FB (react), Vue, Riot, etc. (in their own respective implementations) However Polymer seems to be closer to specs than many of the others which often don’t even use <template>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Browser Support

The spec is at v1. Implementations are:

➡️️ snuggsi ツ - Easy Web Components in ~1kB All you need is a browser and basic understanding of HTML, CSS, & Javascript classes to be productive!

Because "performance" is the art of avoiding work - #FreeJewelry 💍 💎

(Shameless self promotion: I spent a year making this project with some of the top open source contributors on Github so I can save the next 10 years of my development career. Recently being used on production sites. You don't have to use it. But definitely 🌟star🌟 and watch our progress.).
snuggsi ツ - Easy Web Components in ~1kB*

➡️️ Polyfills webcomponents-lite.js (The level I stay at and just write well named wrappers around the things I want to use. Like .fetch() https://fetch.spec.whatwg.org/

➡️️ Webcomponents.js https://github.com/webcomponents/webcomponentsjs where i would start if new to concept as information spans across React/Vue/etc. They just didn’t implement the specs because they were nonexistent when they began. More on that later.

➡️️ Polymer Nothing but premade components. e.g. I want a sliding menu component. (Think jquery plugins as far as community goes.).

➡️️ 💔 Fragmented regarding TRUE Web Components are Vue.js React, Riot.js, Ember, Turbolinks (Rails™**) etc.** Here’s why. They are all disparate implementations of the same solution. They got the concept of web components and are all great ecosystems however the standards bodies were still in debate. And rightly so the community came up with their own implementations (think jquery/prototype/underscore). The TC39 group responsible for Ecmascript is (still) in deliberation with module imports (see http://rollupjs.org for a sane “polyfill”. Webpack too much for my needs and seems to take forever to figure out. I don’t need an entire framework to build my front end code. Sprockets is implementing webpack I believe).

Where vue/react/etc went right is the notion of virtual dom and web components. Where they went wrong is the browser caught up to the spec. Now they are left with implementations that don’t follow the spec. I don’t even think they use _DocumentFragment_ which IS THE “virtual DOM” in your browser right now. https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

The way the platform can move forward so we don’t have browser wars is to have standards bodies for JS, and the platform. They are just sitting around plucking -a la carte- “Front end frameworks…the good parts”. Then they have meetings about it. Then push the features through and make them available for the browsers. Up to them to implement them. (shame on you Safari for WebRTC). It’s something to be said when your “framework” is nothing more than a browser implementation that is in your browser right now. like document.querySelectorAll and how it is contributing to the demise of jquery. 

// my favorite jQuery :troll: tweet. 105 characters. 35 to spare 😂😂😂
let $ = selector => document.querySelectorAll (selector)
$ (h1) // [<h1>]

$.ajax = url => fetch (url)

Links

Web Components Official Site: https://www.webcomponents.org/

MDN Specification: https://developer.mozilla.org/en-US/docs/Web/Web_Components

Most recent v1 documentation: https://developers.google.com/web/fundamentals/getting-started/primers/customelements