polymer - welcome to the future @ pygrunn 08/07/2014
DESCRIPTION
Polymers are large molecules, created of many subunits, and together they can compose larger elements that are fundamental to biological structure and function. This is exactly the idea behind Polymer. To create custom HTML elements, as encapsulated, reusable components that work across desktop and mobile. To achieve this, Polymer uses the latest web technologies, such as Web Components, Shadow DOM, HTML templates and imports.TRANSCRIPT
![Page 1: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/1.jpg)
Welcome to the Futurehttp://polymer-project.org/
@paylogic PyGrunn | July 08, 2014
![Page 2: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/2.jpg)
+Spyros Ioakeimidis @_spyreto_
https://github.com/spirosikmd
@paylogic PyGrunn | July 08, 2014
![Page 3: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/3.jpg)
featured
what is Polymer
which problems does it solve
how does it solve them
@paylogic PyGrunn | July 08, 20143
![Page 4: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/4.jpg)
@paylogic PyGrunn | July 08, 2014
HTML4 1997
|
Web Components
2010 |
HTML5 2008
|
Polymer 2013
|…
4
![Page 5: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/5.jpg)
…take advantage of the platformPolymer and Chrome
@paylogic PyGrunn | July 08, 20145
![Page 6: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/6.jpg)
– Eric Bidelman, Google I/O 2014
“Thinking in components.”
@paylogic PyGrunn | July 08, 20146
![Page 7: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/7.jpg)
web components
![Page 8: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/8.jpg)
…appeared in 2010!
@paylogic PyGrunn | July 08, 20148
![Page 9: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/9.jpg)
DOM (div soup, not readable, meaningless)
B.W.C.
@paylogic
(Before Web Components)
PyGrunn | July 08, 20149
![Page 10: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/10.jpg)
no common structure/pattern
APIs are all different
overloading HTML
@paylogic
B.W.C. (Before Web Components)
PyGrunn | July 08, 201410
![Page 11: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/11.jpg)
@paylogic
(After Web Components)
PyGrunn | July 08, 2014
A.W.C.
11
![Page 12: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/12.jpg)
custom elements
shadow DOM
templates
html imports
PyGrunn | July 08, 2014@paylogic12
![Page 13: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/13.jpg)
PyGrunn | July 08, 2014@paylogic
custom elements
![Page 14: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/14.jpg)
new HTML/DOM elements
declarative, readable, meaningful HTML
common way to extend -> reusable
@paylogic
custom elements
PyGrunn | July 08, 201414
![Page 15: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/15.jpg)
@paylogic PyGrunn | July 08, 2014
w/o custom elements
15
function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp); } !google.maps.event.addDomListener(window, 'load', initialize);
<body> <div id="googleMap" style="width:500px;height:380px;"></div> </body>
![Page 16: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/16.jpg)
@paylogic PyGrunn | July 08, 2014
w/ custom elements
16
<google-map> and <google-map-marker> are custom elements available at http://googlewebcomponents.github.io/
<google-map lat="51.508742" lng="-0.120850"></google-map> !!<google-map> <google-mam-marker lat="51.508742" lng="-0.120850" title="work" draggable="true"> </google-map-marker> </google-mam>
maintainable meaningful
![Page 17: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/17.jpg)
UI and Non-UI (utility) elements
@paylogic PyGrunn | July 08, 2014
custom elements
17
<core-ajax></core-ajax> !!
<polymer-ui-card></polymer-ui-card>
![Page 18: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/18.jpg)
DOM -> Integrated interoperability
accessibilitydevtools support
PyGrunn | July 08, 2014@paylogic18
![Page 19: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/19.jpg)
– Dimitri Glazkov
“Custom elements is a bedrock API. We should be able to build
all HTML elements with it.”
@paylogic PyGrunn | July 08, 201419
![Page 20: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/20.jpg)
@paylogic PyGrunn | July 08, 2014
templates
PyGrunn | July 08, 2014@paylogic
![Page 21: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/21.jpg)
templates
used to be…
hacky, pushing around strings, XSS vulnerable
now :)
template tag, use DOM (not strings)
content is inert, parsed, not rendered
#document-fragment (not part of the page)
@paylogic PyGrunn | July 08, 201421
![Page 22: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/22.jpg)
templates
Polymer implements data-binding to make template more powerful
@paylogic PyGrunn | July 08, 201422
<template> <input type="text" value="{{name}}"> <input type="submit" value="submit"> </template>
![Page 23: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/23.jpg)
@paylogic PyGrunn | July 08, 2014
shadow DOM
PyGrunn | July 08, 2014@paylogic
![Page 24: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/24.jpg)
shadow DOM
DOM/CSS composability and scoping
design apps in small chunks
guarantees that things are protected
@paylogic PyGrunn | July 08, 201424
![Page 25: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/25.jpg)
shadow DOM
@paylogic PyGrunn | July 08, 201425
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
Bob will appear in <content>
<div id="nameTag">Bob</div> !<template id="nameTagTemplate"> <style> /* ... */ </style> <div class="outer"> <div class="boilerplate"> Hi! My name is </div> <div class="name"> <content></content> </div> </div> </template> !<script> var shadow = document.querySelector('#nameTag').createShadowRoot(); var template = document.querySelector('#nameTagTemplate'); shadow.appendChild(template.content.cloneNode()); </script>
![Page 26: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/26.jpg)
@paylogic PyGrunn | July 08, 2014
html imports
PyGrunn | July 08, 2014@paylogic
![Page 27: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/27.jpg)
html imports
loading and dependency management
find existing elements that solve your problem
import it, and just use it
example (bundle HTML/CSS/JS)
<script> does not block main page
supports async attribute
@paylogic PyGrunn | July 08, 201427
![Page 28: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/28.jpg)
html imports
@paylogic PyGrunn | July 08, 201428
<!-- Use bootstrap.html that includes all the related files. --> <head> <link rel="import" href="bootstrap.html"> </head> !!<!-- bootstrap.html --> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="fonts.css"> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="bootstrap-tooltip.js"></script> <script src="bootstrap-dropdown.js"></script> <!-- ... --> !<!-- scaffolding markup --> <template> <!-- ... --> </template>
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
![Page 29: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/29.jpg)
web components are awesome!
@paylogic PyGrunn | July 08, 201429
![Page 30: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/30.jpg)
Chrome 36 has native support for Web Components
…now most of the browsers natively support WC
@paylogic PyGrunn | July 08, 201430
![Page 31: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/31.jpg)
productivity
declarative composability
maintainability
reusability
extensibility
scoping interoperability
accessibility
@paylogic PyGrunn | July 08, 201431
![Page 32: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/32.jpg)
web components ecosystem
@paylogic PyGrunn | July 08, 201432
![Page 33: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/33.jpg)
@paylogic PyGrunn | July 08, 2014
![Page 34: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/34.jpg)
everything is an element
@paylogic PyGrunn | July 08, 201434
![Page 35: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/35.jpg)
polymerfoundation (platform.js polyfills)
building blocks (APIs eventually become native in browsers)
support of web components for all modern browsers
core (polymer.js, helpers)
elements
UI and non-UI components built on core@paylogic PyGrunn | July 08, 2014
35
![Page 36: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/36.jpg)
Exampleshttps://github.com/spirosikmd/pygrunn-july
@paylogic PyGrunn | July 08, 201436
![Page 37: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/37.jpg)
more stuffinheritance
dynamically create elements
advanced data binding
nested scoping rules
filters
layout (<div horizontal layout center></div>)
@paylogic PyGrunn | July 08, 201437
![Page 38: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/38.jpg)
more stuff
template filters
layout (<div horizontal layout center></div>)
styling elements (with the power of polyfills) ::content > h1 { color: red; }
polymer-gestures
@paylogic PyGrunn | July 08, 201438
![Page 39: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/39.jpg)
deployment
polymer vulcanizer
vulcanize index.html --inline --strip -o build.html
polymer-project.org/resources/tooling-strategy.html#vulcanize---element-build-tool
@paylogic PyGrunn | July 08, 201439
![Page 40: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/40.jpg)
testing
using node and grunt
polymer-project.org/resources/tooling-strategy.html#building-amp-testing
@paylogic PyGrunn | July 08, 201440
![Page 42: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/42.jpg)
efficient manipulation of documents based on data
extremely fast
SVG
@paylogic PyGrunn | July 08, 201442
![Page 43: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/43.jpg)
@paylogic
<line-‐chart data=“{{data}}”></line-‐chart>
PyGrunn | July 08, 201443
![Page 44: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/44.jpg)
@paylogic
<pie-‐chart data=“{{data}}”></pie-‐chart>
PyGrunn | July 08, 201444
![Page 45: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/45.jpg)
@paylogic
<bar-‐chart data=“{{data}}”></bar-‐chart>
PyGrunn | July 08, 201445
![Page 46: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/46.jpg)
Material Design google.com/design/material-design/
@paylogic PyGrunn | July 08, 2014
![Page 47: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/47.jpg)
material design.
use Polymer to create building blocks which work with a new design language.
polymer-project.org/tools/designer/
@paylogic PyGrunn | July 08, 201447
![Page 48: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/48.jpg)
who uses it
@paylogic PyGrunn | July 08, 2014
Rietveld restyle (by Google)
polymer-project.org
chromestatus.com
polymer-designer
github (<local-time>)
48
![Page 49: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/49.jpg)
useful resources
component.kitchen
googlewebcomponents.github.io
customelements.io
@paylogic PyGrunn | July 08, 201449
![Page 50: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/50.jpg)
A library that leverages web components and enables developers to create reusable elements for a scalable,
interoperable, and composable future of the web platform.
So, what is Polymer?
“
![Page 51: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/51.jpg)
Thank you!+Spyros Ioakeimidis
@_spyreto_ https://github.com/spirosikmd
@paylogic PyGrunn | July 08, 2014
![Page 52: Polymer - Welcome to the Future @ PyGrunn 08/07/2014](https://reader033.vdocuments.mx/reader033/viewer/2022052303/53fd9d3d8d7f72a81c8b49eb/html5/thumbnails/52.jpg)
@paylogic PyGrunn | July 08, 2014
[1] https://www.youtube.com/watch?v=8OJ7ih8EE7s
[2] https://www.youtube.com/watch?v=yRbOSdAe_JU
[3] http://www.polymer-project.org/
[4] http://webcomponents.org/