Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16

Web Components + Material Design =Vyacheslav Potravnyy

Polymer

Front-End Lead at Intersog

Polyfills?

What’s Polymer?So,

Framework?UI Widgets?

Let’s look at <select>.

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

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

<select size=“3” multiple> <option>Do</option> <option>Re</option> <option>Mi</option></select>

<select> <optgroup label=“German cars”> <option>Mercedes</option> <option>Audi</option> </optgroup></select>

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

Everything was great these times…

Where are we today?

Damn here.

Let’s do some tabs.tabs. tabs.tabs.

When did this happen to us?

Everything. Is. Very. Bad.

But what can be done?

Markup can be meaningful again.

<hangout-module> <hangout-chat from="Paul, Addy" profile="1c18a0e"> <hangout-discussion> <hangout-message from="Paul" 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>

Particles

Polyfills.

Sugar

UI Widgets

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

Some facade and common interface

Comprehensive set (in progress)And Material Design concepts

Philosophy & Goals

Utilize the modern web

platform

Eliminate

boilerplate

Everything is an

element

Support modern browsers

Remove tediousness of building web component-based apps

HTML is cool. DOM feels good.

Polymer elements

Everything is

an elementpolymer-project.org/docs/elements/

An icon for example.

<core-icon class="big" icon=“menu” alt=“Menu”></core-icon>

<style> .big { height: 32px; width: 32px; }</style>

More than 700 SVG icons

at the moment

AJAX...using DOM.

<core-ajax url="/api/videos/" params='{"alt":"json"}'></core-ajax>

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

Example of core-list

<core-list height="800" data="{{collection}} "> <template> <div class="todo-item"> <input type="checkbox" checked="{{model.checked}}"> {{model.name}} </div> </template></core-list>

<script> Polymer({"collection": [ {"name": "Milk", "checked": false}, {"name": "Bread", "checked": false} {"name": "Meat", "checked": true} ]})</script>

A lot of already created modulescore-a11y-keyscore-ajaxcore-animated-pagescore-animationcore-collapsecore-component-pagecore-doc-viewercore-docscore-drag-dropcore-drawer-panelcore-dropdowncore-dropdown-menucore-elementscore-fieldcore-focusablecore-header-panelcore-iconcore-icon-button

core-iconscore-iconsetcore-iconset-svgcore-imagecore-inputcore-itemcore-labelcore-layout-gridcore-layout-trblcore-listcore-localstoragecore-media-querycore-menucore-menu-buttoncore-metacore-overlaycore-pagescore-range

core-resizablecore-scaffoldcore-scroll-header-panel

core-scroll-thresholdcore-selectioncore-selectorcore-shared-libcore-signalscore-splittercore-stylecore-testscore-toolbarcore-tooltipcore-transition

And a lot special for Material Design

paper-behaviorspaper-buttonpaper-checkboxpaper-dialogpaper-dialog-scrollablepaper-drawer-panelpaper-fabpaper-header-panelpaper-icon-buttonpaper-inputpaper-itempaper-materialpaper-menu

paper-progresspaper-radio-buttonpaper-radio-grouppaper-ripplepaper-sliderpaper-spinnerpaper-stylespaper-tabspaper-toastpaper-toggle-buttonpaper-toolbar

Polymer core

Eliminate

boilerplate

Declarative web components.

oDeclarative element registration: <polymer-element>oDeclarative inheritance: <polymer-element extends="...">oDeclarative two-way data-binding: <input id="input" value="{{foo}}">

oDeclarative event handlers: <button on-click="{{handleClick}}">

oPublished properties: xFoo.bar = 5 <-> <x-foo bar="5">oProperty change watchers: barChanged: function() {...}oAutomatic node finding: this.$.input.value = 5oPointerEvents / 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 :)<polymer-element name="my-input" constructor="MyInput" noscript> <template> <style>input { color: orange; }</style> <input type="text"> </template></polymer-element>

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

Define an API.

<polymer-element name="my-input"> <template> <input type=“{{type}}" id="in" style="color: {{color}};"> </template> <script> Polymer('my-input', { type: “text”, color: “orange”, get length() { return this.$.in.value.length; }, ready: function() { ... } }); </script></polymer-element>

Create your elements.

Basicly, app is just a

collection of elements.

Make them

Thank you!

Vyacheslav Potravnyy, 05/2015

Special thanks to Eric Bidelman and Polymer Team