1. WebComponents
+MaterialDesign
=
VyacheslavPotravnyy
Polymer

2. Polyfills?
What’sPolymer?So,
Framework?
UI Widgets?

3. Let’slookat<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>

4. Everythingwasgreatthesetimes…

5. Wherearewetoday?

6. Damnhere.

7. Let’sdosometabs. tabs. tabs.tabs.

8. Whendidthishappentous?

9. Everything.Is.Very.Bad.

10. Butwhatcanbedone?

11. Markupcanbemeaningfulagain.
<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>

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

13. Philosophy&Goals
Utilizethe modernwebplatform
Eliminateboilerplate
Everythingis an element
Support modernbrowsers
Removetediousness of building web component-based apps
HTML iscool. DOM feels good.

14. Polymerelements
Everything isan element
polymer-project.org/docs/elements/

15. Aniconforexample.
<core-icon class="big" icon=“menu” alt=“Menu”>
</core-icon>
<style>
.big {
height: 32px;
width: 32px;
}
</style>
More than 700 SVGicons at the moment

16. AJAX...usingDOM.
<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();

17. Exampleofcore-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>

18. Alotofalreadycreatedmodules
core-a11y-keys
core-ajax
core-animated-pages
core-animation
core-collapse
core-component-page
core-doc-viewer
core-docs
core-drag-drop
core-drawer-panel
core-dropdown
core-dropdown-menu
core-elements
core-field
core-focusable
core-header-panel
core-icon
core-icon-button
core-icons
core-iconset
core-iconset-svg
core-image
core-input
core-item
core-label
core-layout-grid
core-layout-trbl
core-list
core-localstorage
core-media-query
core-menu
core-menu-button
core-meta
core-overlay
core-pages
core-range
core-resizable
core-scaffold
core-scroll-header-
panel
core-scroll-threshold
core-selection
core-selector
core-shared-lib
core-signals
core-splitter
core-style
core-tests
core-toolbar
core-tooltip
core-transition

19. AndalotspecialforMaterialDesign
paper-behaviors
paper-button
paper-checkbox
paper-dialog
paper-dialog-scrollable
paper-drawer-panel
paper-fab
paper-header-panel
paper-icon-button
paper-input
paper-item
paper-material
paper-menu
paper-progress
paper-radio-button
paper-radio-group
paper-ripple
paper-slider
paper-spinner
paper-styles
paper-tabs
paper-toast
paper-toggle-button
paper-toolbar

20. Polymercore
Eliminateboilerplate

21. Declarativewebcomponents.
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 = 5
oPointerEvents / PointerGestures by default
Be declarative. Write less code.

22. CustomelementswithoutPolymer :(
<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>

23. CustomelementswithPolymer :)
<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();

24. DefineanAPI.
<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>

25. Createyourelements.
Basicly,app is just acollectionof elements.
Makethem

26. Thankyou!
Vyacheslav Potravnyy,05/2015
Special thanks to Eric Bidelman and Polymer Team