![Page 1: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/1.jpg)
Web Components + Material Design =Vyacheslav Potravnyy
Polymer
Front-End Lead at Intersog
![Page 2: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/2.jpg)
Polyfills?
What’s Polymer?So,
Framework?UI Widgets?
![Page 3: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/3.jpg)
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>
![Page 4: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/4.jpg)
Everything was great these times…
![Page 5: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/5.jpg)
Where are we today?
![Page 6: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/6.jpg)
Damn here.
![Page 7: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/7.jpg)
Let’s do some tabs.tabs. tabs.tabs.
![Page 8: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/8.jpg)
When did this happen to us?
![Page 9: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/9.jpg)
Everything. Is. Very. Bad.
![Page 10: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/10.jpg)
But what can be done?
![Page 11: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/11.jpg)
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>
![Page 12: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/12.jpg)
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
![Page 13: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/13.jpg)
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.
![Page 14: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/14.jpg)
Polymer elements
Everything is
an elementpolymer-project.org/docs/elements/
![Page 15: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/15.jpg)
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
![Page 16: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/16.jpg)
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();
![Page 17: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/17.jpg)
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>
![Page 18: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/18.jpg)
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
![Page 19: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/19.jpg)
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
![Page 20: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/20.jpg)
Polymer core
Eliminate
boilerplate
![Page 21: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/21.jpg)
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.
![Page 22: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/22.jpg)
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>
![Page 23: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/23.jpg)
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();
![Page 24: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/24.jpg)
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>
![Page 25: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/25.jpg)
Create your elements.
Basicly, app is just a
collection of elements.
Make them
![Page 26: Web components + Material design = Polymer (by Vyatcheslav Potravnyy) - Hack'n'Tell JavaScript - 2015.05.16](https://reader030.vdocument.in/reader030/viewer/2022032617/55b10c78bb61eb393f8b4753/html5/thumbnails/26.jpg)
Thank you!
Vyacheslav Potravnyy, 05/2015
Special thanks to Eric Bidelman and Polymer Team