Not Today
- A W3C spec sing-a-long
- A soapbox rant on the abuse of -webkit prefixes
- Dancing. Definitely no dancing
Today
- What / Why Web Components
- Code examples in Polymer, Ember, Angular, React
- Responsible Component Usage
What Are Web Components?
Why Should We Care?
It Started Simple Enough
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>My Great Page</title></head>
<body>
<h1>Yeah! Internet!</h1>
</body>
</html>
<twttr-typeahead source="http://mysite.com/api/">
<local-storage id="storage" name="my-namespace"></local-storage>
<todo-database id="model" storageId="storage"></todo-database>
<todo-items modelId="model">
<todo-item>A todo</todo-item>
<todo-item completed>A completed item</todo-item>
</todo-items>
<todo-list id="my-todos"></todo-list>
A return to tags marks the start of the extendable web
Tags Give Us
- Semantics
- Encapsulation
- Configuration
- DOM Friendly APIs
Custom Elements is a bedrock API. We should be able to build all HTML elements with it.
Who Wouldn't Want
- Semantics
- Encapsulation
- Configuration
- DOM Friendly APIs
CanIUse
 | OK | -- |
 | OK | update to document.register needed |
 | Partial | using Blink, a step behind Chrome |
 | None | -- |
 | None | -- |
Global Browser Stats
Web Components Today
Today's JS frameworks can get us there!
Our Target Markup
<my-carousel>
<my-carousel-item>one</my-carousel-item>
<my-carousel-item>two</my-carousel-item>
<my-carousel-item>three</my-carousel-item>
</my-carousel>
Ember Carousel Markup
<script type="text/x-handlebars" data-template-name="index">
{{#e-carousel}}
<e-carousel-item>one</e-carousel-item>
<e-carousel-item>two</e-carousel-item>
<e-carousel-item>three</e-carousel-item>
{{/e-carousel}}
</script>
Web Components in Ember
- Support back to IE6 (though performance is slow < IE 8)
- A handlebar helper
{{#e-carousel}}instantiates the component - A template named
components/e-carouselmarks the stamped out template {{yield}}captures our original nodes- The JS convention:
{{#e-carousel}}becomesApp.ECarouselComponent = Ember.Component.extend...
Ember Carousel Implementation
<script type="text/x-handlebars" data-template-name="components/e-carousel">
<content>{{yield}}</content>
<-- ... -->
</script>
App.ECarouselComponent = Ember.Component.extend({
var $items = this.$('content e-carousel-item');
$items.hide();
$items.each(function(idx, item) {
// ...
});
// ...
});
Ember Example
React Carousel Markup
<r-carousel>
<r-carousel-item>one</r-carousel-item>
<r-carousel-item>two</r-carousel-item>
<r-carousel-item>three</r-carousel-item>
</r-carousel>
Web Components in React
- All browsers (including IE6+) when using React Pure (no custom elements)
- IE 9+ when using Reactive Elements for Polymer/X-Tags support
- Reactive Elements for DOM implementation
- Can use 100% React (if you want to use React top to bottom)
- JSX allows for scoped styles through JS definitions of CSS
React Implementation
<script type="text/jsx">
/** @jsx React.DOM */
var rCarousel = React.createClass({
getInitialState: function() {
var items = [],
results = this.props._content.querySelectorAll('r-carousel-item');
// ...
return {index: 0, items: items};
},
render: function() {
}
});
document.registerReact('r-carousel', rCarousel);
</script>
React Example
AngularJS Carousel Markup
<ang-carousel ang-component>
<ang-carousel-item>one</ang-carousel-item>
<ang-carousel-item>two</ang-carousel-item>
<ang-carousel-item>three</ang-carousel-item>
</ang-carousel>
Web Components in AngularJS
- Use 1.3+ for IE9+ and 1.2 if you need IE8 support
- Directives with a
restricttype of "E" parallel custom elements - A custom tag such as
<ang-template for="ang-*">can stamp out your templates - A bootloader can call
angular.bootstrapon page load - The
$transcludefunction can give you access to the original content in your directive
AngularJS Implementation
<ang-template for="ang-carousel"><-- ... --></ang-template>
angular.module('angCarousel', [])
.directive('angCarousel', function () {
var tmpl = document.querySelector('ang-template[for="ang-carousel"]');
return {
restrict: 'E', transclude: true,
controller: function($scope, $transclude) {
$transclude(function(originalNodes) {
});
// ...
}
};
});
Angular Example
Polymer Carousel Markup
<p-carousel>
<p-carousel-item>one</p-carousel-item>
<p-carousel-item>two</p-carousel-item>
<p-carousel-item>three</p-carousel-item>
</p-carousel>
Web Components in Polymer
- Evergreen browsers only (IE 10+)
<polymer-element name="*" noscript>defines a custom element- All
<script>and<style>tags are restricted in scope - Heavily leverages polyfilled APIs (Shadow DOM, etc)
Polymer Implementation
<polymer-element name="p-carousel" noscript>
<template>
<content id="content" select="p-carousel-item"></content>
<!-- ... -->
</template>
<script>
Polymer({
attached: function() {
var self = this,
contents = this.$.content.getDistributedNodes();
// ...
}
});
</script>
</polymer-element>
Polymer Example
Components written in Angular will export to Web Components (to be used by Polymer, Ember, or any other framework/library)
Ember templates should support elements implemented in Polymer.
For a Better Web
Responsible Web Component Use
An Old Friend
Why Flash?
- Has a component library
- Allows nesting of components for DRY philosophy
- Uses ECMAScript (just like JavaScript)
- Is plagued by bloat
- Has huge component hierarchies
We have a few new tricks this time
<the-end>
View these slides online @ felocity.com/owc6