Post on 27-Aug-2014
description
Welcome to the Futurehttp://polymer-project.org/
@paylogic PyGrunn | July 08, 2014
+Spyros Ioakeimidis @_spyreto_
https://github.com/spirosikmd
@paylogic PyGrunn | July 08, 2014
featured
what is Polymer
which problems does it solve
how does it solve them
@paylogic PyGrunn | July 08, 20143
@paylogic PyGrunn | July 08, 2014
HTML4 1997
|
Web Components
2010 |
HTML5 2008
|
Polymer 2013
|…
4
…take advantage of the platformPolymer and Chrome
@paylogic PyGrunn | July 08, 20145
– Eric Bidelman, Google I/O 2014
“Thinking in components.”
@paylogic PyGrunn | July 08, 20146
web components
…appeared in 2010!
@paylogic PyGrunn | July 08, 20148
DOM (div soup, not readable, meaningless)
B.W.C.
@paylogic
(Before Web Components)
PyGrunn | July 08, 20149
no common structure/pattern
APIs are all different
overloading HTML
@paylogic
B.W.C. (Before Web Components)
PyGrunn | July 08, 201410
@paylogic
(After Web Components)
PyGrunn | July 08, 2014
A.W.C.
11
custom elements
shadow DOM
templates
html imports
PyGrunn | July 08, 2014@paylogic12
PyGrunn | July 08, 2014@paylogic
custom elements
new HTML/DOM elements
declarative, readable, meaningful HTML
common way to extend -> reusable
@paylogic
custom elements
PyGrunn | July 08, 201414
@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>
@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
UI and Non-UI (utility) elements
@paylogic PyGrunn | July 08, 2014
custom elements
17
<core-ajax></core-ajax> !!
<polymer-ui-card></polymer-ui-card>
DOM -> Integrated interoperability
accessibilitydevtools support
PyGrunn | July 08, 2014@paylogic18
– Dimitri Glazkov
“Custom elements is a bedrock API. We should be able to build
all HTML elements with it.”
@paylogic PyGrunn | July 08, 201419
@paylogic PyGrunn | July 08, 2014
templates
PyGrunn | July 08, 2014@paylogic
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
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>
@paylogic PyGrunn | July 08, 2014
shadow DOM
PyGrunn | July 08, 2014@paylogic
shadow DOM
DOM/CSS composability and scoping
design apps in small chunks
guarantees that things are protected
@paylogic PyGrunn | July 08, 201424
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>
@paylogic PyGrunn | July 08, 2014
html imports
PyGrunn | July 08, 2014@paylogic
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
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/
web components are awesome!
@paylogic PyGrunn | July 08, 201429
Chrome 36 has native support for Web Components
…now most of the browsers natively support WC
@paylogic PyGrunn | July 08, 201430
productivity
declarative composability
maintainability
reusability
extensibility
scoping interoperability
accessibility
@paylogic PyGrunn | July 08, 201431
web components ecosystem
@paylogic PyGrunn | July 08, 201432
@paylogic PyGrunn | July 08, 2014
everything is an element
@paylogic PyGrunn | July 08, 201434
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
Exampleshttps://github.com/spirosikmd/pygrunn-july
@paylogic PyGrunn | July 08, 201436
more stuffinheritance
dynamically create elements
advanced data binding
nested scoping rules
filters
layout (<div horizontal layout center></div>)
@paylogic PyGrunn | July 08, 201437
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
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
testing
using node and grunt
polymer-project.org/resources/tooling-strategy.html#building-amp-testing
@paylogic PyGrunn | July 08, 201440
efficient manipulation of documents based on data
extremely fast
SVG
@paylogic PyGrunn | July 08, 201442
@paylogic
<line-‐chart data=“{{data}}”></line-‐chart>
PyGrunn | July 08, 201443
@paylogic
<pie-‐chart data=“{{data}}”></pie-‐chart>
PyGrunn | July 08, 201444
@paylogic
<bar-‐chart data=“{{data}}”></bar-‐chart>
PyGrunn | July 08, 201445
Material Design google.com/design/material-design/
@paylogic PyGrunn | July 08, 2014
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
who uses it
@paylogic PyGrunn | July 08, 2014
Rietveld restyle (by Google)
polymer-project.org
chromestatus.com
polymer-designer
github (<local-time>)
48
useful resources
component.kitchen
googlewebcomponents.github.io
customelements.io
@paylogic PyGrunn | July 08, 201449
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?
“
Thank you!+Spyros Ioakeimidis
@_spyreto_ https://github.com/spirosikmd
@paylogic PyGrunn | July 08, 2014
@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/