Today, Web Components have emerged from cutting edge technologies to technologies we can implement in our small scale production. It won’t be long before we are building large scale applications with Custom Elements, HTML Imports, Template Tags, and the infamous Shadow DOM. In embracing this type of developer environment, with it’s flexibility and compositional nature, consider interoperabilty as a core concept.
If you need a custom element for a card layout, as an example, you should be able to use any Web Component out there in the ecosystem regardless of which library or toolchain it comes from. If the component provides the desired functionality and styling you would require it should work seamlessly in your application. Furthermore, toolsets should not limit the the extending and composition of these custom elements. In practice, this may or may not always be the case and library & toolchain creators will need to be aware of these concerns.
Rob Dodson (@rob_dodson), Developer Advocate on the Google Chrome team, talks about his thoughts on the subject. Rob is helping to educate developers, not just about Google’s Polymer Library built on top of Web Components, but across the entire Web Components community.
Rob goes through many of the changes made to Polymer 0.4.2, including accessibility and performance that help in making applications more integrated and how Google is working to share what the Blink Team has learned from implementing Web Components in Chrome with other browser vendors and developers.
Working closely with Mozilla developers on his SFHTML 5 Meetup talk on Web Components Mashups, Rob was able to collaborate and share ideas so that Web Components could alleviate many of the concerns we had when migrating from one JavaScript library to another. It is painful for developers to have to remake components every time they switch libraries or frameworks. Web Components aims to make that a thing of the past and Rob has done much more on this topic since that talk. Have a listen and hear what he has to say.
Resources
Rob’s Blog - http://robdodson.me/
I/O Presentation - http://webcomponents.org/presentations/unlock-the-next-era-of-ui-development-with-polymer-at-io/
Accessible Web Components Part 1 -https://www.polymer-project.org/articles/accessible-web-components.html
SFHTML Mashup Video -https://www.youtube.com/watch?v=75EuHl6CSTo
The Web Platform Status for IE - https://status.modern.ie/
IE Beta Channel - http://www.microsoft.com/en-us/download/details.aspx?id=43360
Polytechnic Events - http://itshackademic.com/
Polycast Playlist - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
Custom Elements on GitHub - https://twitter.com/polymer/status/464103568392200193
IE Platform Voting -https://wpdev.uservoice.com/forums/257854-internet-explorer-platform
customelements.io - http://customelements.io/
Webcomponents.org -http://webcomponents.org/
Bosonic Shadow DOM Issue (#4) - https://github.com/bosonic/bosonic/issues/4
The Bower Package Manager - http://bower.io/
Divshot - http://divshot.io
Divshot Blog - https://divshot.com/blog/
BuiltWithPolymer - http://builtwithpolymer.org/
Divshot’s Web Component Playground - https://ele.io/
Angular 2 Web Components Data Binding Document - https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI/edit?hl=en&forcehl=1&pli=1#heading=h.xgjl2srtytjt
ReadTheSource - http://hangouts.readthesource.io/hangouts/divshot-superstatic/
RailsCasts -http://railscasts.com/
PhantomJS -https://github.com/ariya/phantomjs/wiki/PhantomJS-2
saucelabs -https://saucelabs.com/
People
Alex Russel -https://twitter.com/slightlylate
Alice Boxhall -https://twitter.com/sundress
Raphael Rugeron - https://twitter.com/goldoraf
Jonathon Sampson -https://twitter.com/jonathansampson
Arron Schaar - https://github.com/pennyfx
Michael Bleigh - https://twitter.com/mbleigh
Scott Corgan - https://twitter.com/scottcorgan
Projects
Reactive Elements -https://github.com/PixelsCommander/ReactiveElements
X-Tags Imports - https://github.com/x-tag/x-tag-imports
Enyo -http://enyojs.com/
React.js -http://facebook.github.io/react/
Famo.us -http://famo.us/
Chromium Blink -http://www.chromium.org/blink
Polymer 0.4.2 -https://github.com/Polymer/polymer/releases/tag/0.4.2
Brick 2.0 -http://brick.mozilla.io/
X-Tags -http://www.x-tags.org/
Polymer -https://www.polymer-project.org/
Bosonic -https://bosonic.github.io/
Vulcanize - https://github.com/polymer/vulcanize
generator-element -https://github.com/webcomponents/generator-element
Firefox OS - https://www.mozilla.org/en-US/firefox/os/
web-component-tester -https://github.com/Polymer/web-component-tester
Topeka -https://github.com/polymer/topeka
Jquery UI -http://jqueryui.com/
Components
core-a11ykeys -https://github.com/Polymer/core-a11y-keys
core-list -https://github.com/Polymer/core-list
core-animated-pages -https://github.com/Polymer/core-animated-pages
Brick Components -http://brick.mozilla.io/v2.0/docs
WinJS Polymer Samples -https://github.com/banguero/winjs-polymer-samples
core-ajax - https://github.com/polymer/core-ajax
google-map - https://github.com/GoogleWebComponents/google-map
core-shared-lib - https://github.com/Polymer/core-shared-lib
google-apis - https://github.com/GoogleWebComponents/google-apis
core-selector - https://github.com/polymer/core-selector
paper-menu-button - https://github.com/Polymer/paper-menu-button
paper-tabs - https://github.com/Polymer/paper-tabs
paper-elements - https://www.polymer-project.org/docs/elements/paper-elements.html
core-signals -https://github.com/Polymer/core-signals