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

Welcome to the Futurehttp://polymer-project.org/

@paylogic PyGrunn | July 08, 2014

http://polymer-project.org/

+Spyros Ioakeimidis @_spyreto_

https://github.com/spirosikmd



featured

what is Polymer

which problems does it solve

how does it solve them



HTML4 1997

|

Web Components

2010 |

HTML5 2008

|

Polymer 2013

|…

4

…take advantage of the platformPolymer and Chrome


– Eric Bidelman, Google I/O 2014

“Thinking in components.”


web components

…appeared in 2010!


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)


@paylogic

(After Web Components)


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



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

http://googlewebcomponents.github.io/

UI and Non-UI (utility) elements


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



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)


templates

Polymer implements data-binding to make template more powerful


<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


shadow DOM


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>

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/


html imports


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


html imports


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

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

web components are awesome!


Chrome 36 has native support for Web Components

…now most of the browsers natively support WC


productivity

declarative composability

maintainability

reusability

extensibility

scoping interoperability

accessibility


web components ecosystem


everything is an element


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


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

more stuffinheritance

dynamically create elements

advanced data binding

nested scoping rules

filters

layout (<div horizontal layout center></div>)


more stuff

template filters

layout (<div horizontal layout center></div>)

styling elements (with the power of polyfills) ::content > h1 { color: red; }

polymer-gestures


deployment

polymer vulcanizer

vulcanize index.html --inline --strip -o build.html

polymer-project.org/resources/tooling-strategy.html#vulcanize---element-build-tool


http://www.polymer-project.org/resources/tooling-strategy.html#vulcanize---element-build-tool

testing

using node and grunt

polymer-project.org/resources/tooling-strategy.html#building-amp-testing


http://www.polymer-project.org/resources/tooling-strategy.html#building-amp-testing

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


http://d3js.org/

efficient manipulation of documents based on data

extremely fast

SVG


@paylogic

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


@paylogic

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


@paylogic

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


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


http://www.google.com/design/spec/material-design/introduction.html

material design.

use Polymer to create building blocks which work with a new design language.

polymer-project.org/tools/designer/


http://www.polymer-project.org/tools/designer/

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


http://component.kitchen/

http://googlewebcomponents.github.io/

http://customelements.io

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/

https://www.youtube.com/watch?v=8OJ7ih8EE7s

https://www.youtube.com/watch?v=yRbOSdAe_JU

http://www.polymer-project.org/

http://webcomponents.org/

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

Software

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