about:me

Polymer


polymer-project.org

Soooo Polymer is...

Polyfills?

A framework?

UI widgets?

It looks like you're building a web page on the internet!

<select>
  <option>Small</option>
  <option>Medium</option>
  <option>Large</option>
</select>

I give my children a default UI!

<select id="schwag">
  ...
  <option disabled>Medium</option>
  <option disabled>Large</option>
  <option selected>XX-large</option>
</select>

Elements are configured using attributes, not script.

<select size="4" multiple>
  <option>Do</option>
  <option>Re</option>
  <option>Mi</option>
  ...
</select>

Attributes even change how users interact with me

<select>
  <optgroup label="German Cars">
    <option>Mercedes</option>
    <option>Audi</option>
  </optgroup>
  ...
</select>

Attributes can effect my UI.

<select>
  <option>Small</option>
  <li>Medium</li>
  <option>Large</option>
</select>

I'm picky! I only allow accept certain elements as children.

<form>
  <select name="size">
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
  </select>
</form>

In other contexts, I take on additional responsibilities.

My DOM exposes properties/methods to JS that don't make sense as markup. I also fire events when interesting things happen.

Where are we today?

Gut check: building a tab component on the web...

Pile on loads of JS

Our markup is atrocious

What a nightmare!

This is how we build web apps!

We're far away from where we started

Markup can be meaningful again

<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>

Polymer


Spoiler
alert

Templates

HTML Imports

Custom Elements

Shadow DOM

What is it?

Polyfill libraries

Shadow DOM, Custom Elements, HTML Imports, Pointer Events...

Sugaring layer

expresses opinionated way to use web component concepts together

UI Components

comprehensive set (in progress)

Philosophy & Goals

Everything as an element

HTML is cool. DOM feels good.


Eliminate boilerplate

Remove tediousness of building web component-based apps

Utilize the modern web platform

Support modern browsers


Polymer

polymer-project.org/docs/elements/

Everything is an element.

Everything is an element

AJAX...using DOM

<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();
Hit run...

Everything is an element

flexbox...using DOM

<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>
Header
Body
Footer

Polymer elements

non-visual utility elements

Layout

<polymer-layout>

<polymer-flex-layout>

<polymer-grid-layout>

View

<polymer-media-query>

<polymer-page>

Services / libs

<polymer-shared-lib>

<polymer-google-jsapi>

Data

<polymer-localstorage>

<polymer-xhr>

<polymer-jsonp>

<polymer-file>

<polymer-meta>

Behavior / interaction

<polymer-signals>

<polymer-selector>

Polymer UI elements

visual elements

<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>

...

Reusability...the non-visual polymer-elements are used to implement these!

Polymer

polymer-project.org/polymer.html

Eliminate boilerplate.

Polymer features

declarative web components

  • 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
Be declarative. Write less code.

Custom elements without Polymer :(

<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>

Custom elements with Polymer :)

declarative custom elements

<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();
    

Define an API

complex elements require more juice...



  • 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)

Publishing properties & data-binding

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


Features in action

responsive design...using DOM

<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>

Polymer is many things!

A web app is a large collection of web components composed of many subelements, known as custom elements.

-me