The document discusses the integration of web components and material design, highlighting the functionalities of Polymer, a library designed to facilitate the creation of reusable web components. It includes examples of various UI elements such as selects, tabs, and AJAX calls, as well as emphasizes the ease of building web applications using declarative syntax. The author acknowledges the need for a modern approach to web development and expresses gratitude towards contributors and the Polymer team.

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