Polymer - Welcome to the Future @ PyGrunn 08/07/2014
of 52
/52
-
Upload
spyros-ioakeimidis -
Category
Software
-
view
443 -
download
5
Embed Size (px)
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 of Polymer - Welcome to the Future @ PyGrunn 08/07/2014
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/
