Eric Bidelman

Staff Developer Programs Engineer,

google.com/+EricBidelman

@ebidel

ericbidelman.com

html5rocks.com

"Using the HTML5 Filesystem API" - O'Reilly

<hangout-module>
  <hangout-chat from="Paul, Addy" profile="118075919496626375791">
    <hangout-discussion>
      <hangout-message from="Paul" profile="profile.png" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.</p>
        <p>Heard of it?</p>
      </hangout-message>
      <hangout-message from="Addy" datetime="2013-07-17T12:12">...</hangout-message>
      <hangout-message>...</hangout-message>
      ...
    </hangout-discussion>
  </hangout-chat>
  <hangout-chat></hangout-chat>
</hangout-module>

Support for the lifecycle methods...but shorter names!

Polymer('my-input', {
  ready: function() { ... }, // Polymer addition for when element is fully initialized.
  created: function() { ... },
  enteredView: function() { ... },
  leftView: function() { ... },
  attributeChanged: function(attrName, oldVal, newVal) { ... }
});

Use cases:

• perform setup/teardown work
• notification when element is inserted/removed from page

<polymer-element name="my-tabs" noscript>
  <template>
    <style>...</style>
    <header>
      <content select="h2"></content>
    </header>
    <content select="section"></content>
  </template>
</polymer-element>

<link rel="import" href="my-tabs.html">
<my-tabs>
  <h2>Title</h2>
  <section>content</section>
  <h2>Title 2</h2>
  ...
</my-tabs>

Support for styling features (scoped styles, applyAuthorStyles, etc.)

<polymer-element name="my-element">
  <template>
    <style>...</style> <!-- Styles are scoped to the element -->
  </template>
  <script>
    Polymer('my-element', {
      applyAuthorStyles: true,
      resetStyleInheritance: false
    });
  </script>
</polymer-element>

• Polymer attempts to polyfill most Shadow DOM style features

Reuse others' components:

<link rel="import" href="x-toolbar.html">
<link rel="import" href="menu-item.html">

<polymer-element name="awesome-menu">
  <template>
    <x-toolbar responsive>
      <menu-item src="images/do.png" selected>Do</menu-item>
      <menu-item src="images/re.png">Re</menu-item>
      <menu-item src="images/mi.png">Mi</menu-item>
    <x-toolbar>
  </template>
  ...
</polymer-element>

<link rel="import" href="awesome-menu.html">
<awesome-menu></awesome-menu>

<script src="polymer.min.js"></script>
<link rel="import" href="polymer-ajax.html">

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
              params='{"alt":"json"}'></polymer-ajax>

var ajax = document.querySelector('polymer-ajax');
ajax.addEventListener('polymer-response', function(e) {
  console.log(JSON.parse(this.response).feed.entry);
});
ajax.go();

<script src="polymer.min.js"></script>
<link rel="import" href="polymer-file.html">

<polymer-file readas="dataurl"></polymer-file>

var pFile = document.querySelector('polymer-file');

pFile.addEventListener('polymer-result', function(e) {
  console.log(this.result);
});

pFile.blob = new Blob(['abc'], {type: 'text/plain'}); // Set the file to read

pFile.read();

<script src="polymer.min.js"></script>
<link rel="import" href="polymer-flex-layout.html">

<polymer-flex-layout vertical iscontainer>
  <div>Header</div>
  <div flex>Body</div>
  <div>Footer</div>
</polymer-flex-layout>

<polymer-ui-accordion>

<polymer-ui-animated-pages>

<polymer-ui-overlay>

<polymer-ui-card> demo

<polymer-ui-sidebar-menu> demo

<polymer-ui-tabs> demo

<polymer-ui-toggle-button> demo

<polymer-ui-theme-aware>

...

• Declarative element registration: <polymer-element>
• Declarative inheritance: <polymer-element extends="...">
• Declarative two-way data-binding: <input id="input" value="{{foo}}">
• Declarative event handlers: <button on-click="{{handleClick}}">
• Published properties: xFoo.bar = 5 <-> <x-foo bar="5">
• Property change watchers: barChanged: function() {...}
• Automatic node finding: this.$.input.value = 5
• PointerEvents / PointerGestures by default

<template id="template">
  <style>input { color: orange; }</style>
  <input type="text">
</template>

<script>
var proto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#template');
      this.createShadowRoot().appendChild(document.importNode(t.content, true));
    }
  }
});

var MyInput = document.register('my-input', {prototype: proto});
</script>

<script src="polymer.min.js"></script>

1. Create an element definition

   <polymer-element name="my-input" constructor="MyInput" noscript>
     <!-- Note: Polymer creates Shadow DOM from the first <template>. -->
     <template>
       <style>input { color: orange; }</style>
       <input type="text">
     </template>
   </polymer-element>
   

2. Instantiate - declare it, create DOM, or use new in JS

   <my-input></my-input>
   // var myInput = document.createElement('my-input');
   // var myInput = new MyInput();
   

User-defined attributes are included on each instance of the element:

<polymer-element name="my-input" customattr class="active">
  <template>...</template>
</polymer-element>

<my-input></my-input>

Instances include your attributes:

  <my-input customattr class="active"></my-input>

<polymer-element name="my-input" noscript> <template> <input type="text" id="in" style="color: orange;"> </template> </polymer-element> <polymer-element name="my-input"> <template> <input type="text" id="in" style="color: orange;"> </template> <script>Polymer('my-input');</script> </polymer-element> <polymer-element name="my-input"> <template> <input type="text" id="in" style="color: orange;"> </template> <script> Polymer('my-input', { get length() { return this.$.in.value.length; }, ready: function() { ... } }); </script> </polymer-element> <polymer-element name="my-input"> <template> <link rel="stylesheet" href="styles.css"> <input id="in" type="text"> </template> <script src="path/to/elements/myinput.js"></script> </polymer-element>

• Properties/methods are added to prototype
• this refers to the element itself (e.g. this.localName == "my-input")
• Can reference external scripts/stylesheets (e.g. CSP friendly)

1. Inside the element → use data-binding
2. Outside the element → users configure us using attributes

<polymer-element name="my-input"> <template> <input type="text" style="color: orange;"> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <polymer-element name="my-input"> <template> <input type="{{type}}" style="color: {{color}};"> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <polymer-element name="my-input"> <template> <input type="{{type}}" style="color: {{color}};" value="{{val}}"> <polymer-localstorage name="myInputStorage" value="{{val}}"></polymer-localstorage> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <polymer-element name="my-input" attributes="type color"> <template> <input type="{{type}}" style="color: {{color}};" value="{{val}}"> <polymer-localstorage name="myInputStorage" value="{{val}}"></polymer-localstorage> </template> <script> Polymer('my-input', { type: 'text', color: 'orange' }); </script> </polymer-element> <my-input color="red"></my-input>

Expressions can go anywhere {{}} live:

<div>Jill has {{ daughter.children.length + son.children.length }} grandchildren</div>

Conditional attributes:

<input type="checkbox" checked?="{{activate}}">

Dynamic classes:

<div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList }}"> 
<!-- <div class="active big"> -->

Conditionals:

<template if="{{ isActive }}">
  <!-- shown if isActive property is true -->
</template>

<template if="{{ showDefault || users.length < 10 }}">
  ...
</template>

Iteration:

<template repeat="{{ user in users }}">
  <template repeat="{{ file in user.files }}">
    {{ user.name }} owners {{ file.name }}
  </template>
</template>

<script src="polymer.min.js"></script>
<link rel="import" href="polymer-ajax.html">

<polymer-element name="youtube-videos" attributes="query">
  <template>
    <polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/" params="{{params}}"
                  handleAs="json" response="{{response}}" auto></polymer-ajax>
    <ul>
      <template repeat="{{entry in response.feed.entry}}">
        <li>{{entry.title.$t}}</li>
     </template>
    </ul>
  </template>
  <script>
    Polymer('youtube-videos', {
      ready: function() { this.params = {alt: 'json', q: this.query}; }
    });
  </script>
</polymer-element>

<youtube-videos query="cats"></youtube-videos>

<script src="polymer.min.js"></script>
<link rel="import" href="polymer-media-query.html">

<polymer-element name="responsive-layout" attributes="responsive">
  <template>
    <polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></...
    <template if="{{isPhone && responsive}}"> <!-- Phone markup -->
      <content></content>
    </template>
    <template if="{{!responsive}}"> <!-- Non-responsive case -->
     ...
    </template>
  </template>
  <script>Polymer('responsive-layout', {responsive: false});</script>
</polymer-element>

<responsive-layout responsive>
  <div>...</div>
</responsive-layout>

<script src="polymer.min.js"></script>
<link rel="import" href="polymer-file.html">

<polymer-element name="read-me" on-click="{{onClick}}">
  <template>
    <polymer-file id="file" readas="arraybuffer" result="{{result}}"></polymer-file>
  </template>
  <script>
    Polymer('read-me', {
      resultChanged: function() {
       console.log(this.result);
      },
      onClick: function(e, detail, sender) {
       this.$.file.read();
     }
    });
  </script>
</polymer-element>

var el = document.createElement('read-me');
el.blob = new Blob(['abc'], {type: 'text/plain'});

Initially hide elements using polymer-veiled class or manage a list in JS:

1. Add polymer-veiled class:

   <x-foo class="polymer-veiled">If you see me, elements are upgraded!</x-foo>
   <div class="polymer-veiled"></div>
   

2. Polymer.veiledElements = ['x-foo', 'div'];

• polymer-unveiled swapped in at WebComponentsReady event → elements fade-in.
• Note: polymer-veiled is added to <body> by default.

• Developer productivity
  • It's DOM. It's JS. It's CSS → no new APIs to learn!
  • say what you mean → readability
• Re-usability at last
  • don't reinvent the wheel
  • easy interop with other frameworks
• Foster good software engineering paradigms on web (OOP)