Polymer - Welcome to the Future @ PyGrunn 08/07/2014

Welcome to the Future
http://polymer-project.org/
@paylogic PyGrunn | July 08, 2014

+Spyros Ioakeimidis
@_spyreto_
https://github.com/spirosikmd

featured
what is Polymer
which problems does it solve
how does it solve them
3

HTML4
1997
|
Web
Components
2010
|
HTML5
2008
|
Polymer
2013
|
…
4

…take advantage of the platform
Polymer and Chrome
5

– Eric Bidelman, Google I/O 2014
“Thinking in components.”
6

…appeared in 2010!
8

DOM (div soup, not readable, meaningless)
B.W.C.
@paylogic
(Before Web Components)
PyGrunn | July 08, 2014
9

no common structure/pattern
APIs are all different
overloading HTML
@paylogic
B.W.C.(Before Web Components)
10

@paylogic
(After Web Components)
A.W.C.
11

custom elements
shadow DOM
templates
html imports
PyGrunn | July 08, 2014@paylogic
12

custom elements

new HTML/DOM elements
declarative, readable, meaningful HTML
common way to extend -> reusable
@paylogic
custom elements
14

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>

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
custom elements
17
<core-ajax></core-ajax>
!
!
<polymer-ui-card></polymer-ui-card>

DOM -> Integrated interoperability
accessibilitydevtools support
18

– Dimitri Glazkov
“Custom elements is a bedrock
API. We should be able to build
all HTML elements with it.”
19

templates

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)
21

templates
Polymer implements data-binding to make
template more powerful
22
<template>
<input type="text" value="{{name}}">
<input type="submit" value="submit">
</template>

shadow DOM

shadow DOM
DOM/CSS composability and scoping
design apps in small chunks
guarantees that things are protected
24

shadow DOM
25
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>

html imports

html imports
loading and dependency management
ﬁnd 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
27

html imports
28

<head>
<link rel="import" href="bootstrap.html">
</head>
!
!

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

!

<template>

</template>
http://www.html5rocks.com/en/tutorials/webcomponents/imports/

web components
are awesome!
29

Chrome 36 has native support
for Web Components
…now most of the browsers natively support WC
30

productivity
declarative composability
maintainability
reusability
extensibility
scoping
interoperability
accessibility
31

web components
ecosystem
32

everything is an
element
34

polymer
foundation (platform.js polyﬁlls)
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
35

Examples
https://github.com/spirosikmd/pygrunn-july
36

more stuff
inheritance
dynamically create elements
advanced data binding
nested scoping rules
ﬁlters
layout (<div
horizontal
layout
center></div>)
37

more stuff
template ﬁlters
layout (<div
horizontal
layout
center></div>)
styling elements (with the power of polyﬁlls) 
 
::content
>
h1
{
color:
red;
}
polymer-gestures
38

deployment
polymer vulcanizer
vulcanize index.html --inline --strip -o build.html
polymer-project.org/resources/tooling-
strategy.html#vulcanize---element-build-tool
39

testing
using node and grunt
polymer-project.org/resources/tooling-
strategy.html#building-amp-testing
40

Data-Driven Documents
http://d3js.org/

efﬁcient manipulation of documents based on data
extremely fast
SVG
42

@paylogic
<line-‐chart
data=“{{data}}”></line-‐chart>
43

@paylogic
<pie-‐chart
data=“{{data}}”></pie-‐chart>
44

@paylogic
<bar-‐chart
data=“{{data}}”></bar-‐chart>
45

Material Design
google.com/design/material-design/

material design.
use Polymer to create building blocks which work
with a new design language.
polymer-project.org/tools/designer/
47

who uses it
Rietveld restyle (by Google)
polymer-project.org
chromestatus.com
polymer-designer
github (<local-time>)
48

useful resources
component.kitchen
googlewebcomponents.github.io
customelements.io
49

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

[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/

Polymer - Welcome to the Future @ PyGrunn 08/07/2014

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Polymer - Welcome to the Future @ PyGrunn 08/07/2014

Ähnlich wie Polymer - Welcome to the Future @ PyGrunn 08/07/2014 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Polymer - Welcome to the Future @ PyGrunn 08/07/2014