Custom Elements with Polymer Web Components #econfpsu16

Custom Elements with Polymer Web ComponentsJohn Riviello@JohnRivDistinguished Engineer, Comcast Interactive Media

Elements: The Web Conference at Penn State – June 14, 2016

Polymer &Web Components

”250/365 - Bricks" by Kenny Louie is licensed under CC BY 2.0

Why? What? How?

Communicating & shipping web design & functionality updates across a large organization is HARD WORK

Communicating & Sharing Web Updates Across Your Organization

1. Living Style Guides

2. Tiny Bootstraps

3. AngularJS Directives

4. React Components

5. Web Standards?

John Riviello – Custom Elements with Polymer Web Components4

Potential Technical Solutions:

YES!Web Standards!

Web Components!

What areWeb Components?

What are Web Components?

4 Specs



Custom Elements



Custom Elements


• Provides a way for authors to build their own

fully-featured DOM elements.

- <xc-tab>Your Wifi</xc-tab>

• Can extend existing HTML elements

- <button is="xc-button">Edit</button>


HTML Imports



HTML Imports


• Means to import custom elements

- <link rel="import" href="../xc-tab/xc-tab.html">

• Can link to external resources

- <link rel="import"

href="http://polygit.org/components/paper-

toast/paper-toast.html">


Templates



Templates


• Used to declare fragments of HTML- <template id="tab">

<div class="tab-content"></div>

</template>

• The element itself renders nothing

• Can be cloned and inserted in the document via

JavaScript, which will render the content


Shadow DOM



Shadow DOM


• Allows you to take a DOM subtree and hide it

from the document scope

• Hides CSS styles as well

• Common examples from HTML5 include:- <select>

- <video>

- <input type="date">

Can we even use these things?

Source: http://jonrimmer.github.io/are-we-componentized-yet/

Are We Componentized Yet?

There’s hope.What’s better than hope?

POLYFILLS!*as long as there is still hope*

Web Components Polyfills

webcomponents.js


• Custom Elements

• HTML Imports

• Templates

• Shadow DOM

• ES6 WeakMap

• Mutation Observers

Browser Support• IE10 (max polyfilling)

• IE11+/Edge

• Chrome (latest)

• Firefox (latest)

• Safari 7+

• Chrome Android (latest)

• Mobile Safari (latest)

Size: 33.3kB gzipped

Web Components Polyfills

webcomponents-lite.js


• Custom Elements

• HTML Imports

• Templates

• Shadow DOM

• ES6 WeakMap

• Mutation Observers

Browser Support• IE10 (flaky)

• IE11+/Edge

• Chrome (latest)


• Safari 7+


• Mobile Safari (latest)

Size: 33.3kB 12.0kB gzipped

LightweightWeb ComponentLibraries

Lightweight Web Component Libraries

X-Tag 5.0kB


• IE9+/Edge

• Chrome (all)

• Firefox (all)

• Safari ”Mac” (5.1+?)

• Chrome & Android 4.0+

• Mobile Safari 5+

• Opera 11+

• IE10+/Edge

• Chrome 35+

• Firefox 35+

• Safari 7+

• Chrome Android (latest?)

• Mobile Safari (latest?)

• Opera (latest)

• IE11+/Edge

• Chrome (latest)


• Safari 7+


• Mobile Safari 7.1+

• Opera (latest)

Bosonic 9.5kB Polymer 37.2kB

Google Polymer

What is Polymer?

1. Material Design

2. A framework

3. Required to use Web Components


Polymer is NOT:

What is Polymer?

<script>var proto = Object.create(HTMLElement.prototype),

protoElement;

proto.createdCallback = function () {this.textContent = "I'm a proto-element.

Check out my prototype!"};

protoElement = document.registerElement('proto-element', {prototype: proto

});</script>


Creating a Custom Element Natively

What is Polymer?

<link rel="import"href="bower_components/polymer/polymer.html">

<script>Polymer({is: "proto-element",created: function() {this.textContent = "I'm a proto-element.

Check out my prototype!"}

});</script>


Creating a Polymer Custom Element

What is Polymer?

<!DOCTYPE html><html><head>

<script src="webcomponents-lite.js"></script><link rel="import" href="proto-element.html">

</head><body>

<proto-element></proto-element></body>

</html>

RESULT:I'm a proto-element. Check out my prototype!


Using Our Custom Element

What is Polymer?

Polymer({is: 'my-namecard',properties: {myName: {type: String

}},ready: function() {this.textContent = 'Hi! My name is ' + this.myName;

}});<my-namecard my-name="John"></my-namecard>

RESULT:Hi! My name is John


Configuring Properties

What is Polymer?

<dom-module id="my-namecard"><template><div>Hi! My name is <span>{{myName}}</span></div>

</template><script>Polymer({is: 'my-namecard',properties: {myName: {type: String

}}

});</script>

</dom-module>John Riviello – Custom Elements with Polymer Web Components30

Data Binding

<my-namecard my-name="John"></my-namecard>

RESULT:

Hi! My name is John

What is Polymer?

<dom-module id="my-namecard"><template><div>Hi! My name is <span>{{myName}}</span></div>

</template>

<style>span {font-weight: bold;

}</style>

<script>Polymer({is: 'my-namecard',…


Encapsulated Styles

<my-namecard my-name="John"></my-namecard><p><span>Span Text</span></p>

RESULT:

Hi! My name is John

Span Text

What is Polymer?

xc-styles/xc-styles.html:<style is="custom-style">

:root { --si-blue-sky: #2B9CD8; }</style>

xc-custom-element/xc-custom-element.html:<link rel="import" href="../xc-styles/xc-styles.html"><dom-module id="xc-custom-element">

<template><style>:host { border: 1px solid var(--si-blue-sky); }

</style></template>

</dom-module>


CSS Variables for Sharing Properties

What is Polymer?

xc-fancy-element/xc-fancy-element.html:<style>

:host {color: var(--xc-fancy-element-color, red);

}</style>

xc-custom-element/xc-custom-element.html:<link rel="import" href="../xc-fancy-element/xc-fancy-element.html"><style is="custom-style">

xc-fancy-element {--xc-fancy-element-color: blue;

}</style><template><xc-fancy-element></xc-fancy-element></template>


CSS Variables for Custom Styles

What is Polymer?

xc-fancy-element/xc-fancy-element.html:<style>

:host {@apply(--xc-fancy-element);

}</style>xc-custom-element/xc-custom-element.html:<link rel="import" href="../xc-fancy-element/xc-fancy-element.html"><style is="custom-style">

--xc-fancy-element: {color: blue;margin: 0 auto;

};</style><template><xc-fancy-element></xc-fancy-element></template>


Mixins for Custom Styles

What is Polymer?

• Behaviors (shared functionality)• Events• Gestures (up, down, tap, track)

• CLI Tools• Built-in Test Framework• Generated Documentation Pages


Other Features Polymer Provides

Building with Polymer


• Use someone else’s element(s)

• Build your own element(s)

• Build an entire app with Polymer


How to Get Started

Using Open Source Polymer Elements

$ bower install GITHUB/ELEMENT --save

$ bower install PolymerElements/app-route --save

https://elements.polymer-project.org

https://customelements.io

Building Your Own Polymer Element

$ polymer help

Available Commands

build Builds an application-style projecthelp Shows this help message,

or help for a specific commandinit Initializes a Polymer projectlint Lints the projectserve Runs the polyserve development servertest Runs web-component-tester

$ polymer init? Which starter template would you like to use? › element: A blank element template

application: A blank application template shop: The "Shop" Progressive Web App demo app-drawer-template: A starter application…


• A component should do 1 thing

• Break up into smaller components

• Component doesn’t have to be visual

• Syndicating outside of primary use


Things to Consider

Building aPolymer App


$ npm install -g polymer-cli

$ polymer init

? Which starter template would you like to use?

element: A blank element template

› application: A blank application template shop: The "Shop" Progressive Web App demo

app-drawer-template: A starter application…


Building a Polymer App


? Application name cli-demo

? Main element name cli-demo-app

? Brief description of the application App Demo




create bower.json

create index.html

create manifest.json

create README.md

create src/cli-demo-app/cli-demo-app.htmlcreate test/cli-demo-app/cli-demo-app_test.html




Project generated!

Installing dependencies...

$ polymer serve

• Load up http://localhost:8080



Hello cli-demo-app

• View README.md for info on building & running tests• Create additional elements • Pull in external elements

Deploying with Polymer

Deploying with Polymer

• HTML Import external components

• Bundle internal components

- vulcanize (gulp, grunt or standalone)

- Polymer CLI: $ polymer build


External vs. Internal

Custom Elements with Polymer Web Components


Learning More• polymer-project.org• webcomponents.org• Polycasts with Rob Dodson on YouTube• 2016 Google I/O Polymer videos on YouTube• Polymer Summit videos on YouTube• Polymer Slack: polymer-slack.herokuapp.com

For Further Info & Feedback:

Twitter: @JohnRiv

Custom Elements with Polymer Web Components #econfpsu16

Technology

Transcript of Custom Elements with Polymer Web Components #econfpsu16