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

Transcript
Page 1: Polymer - Welcome to the Future @ PyGrunn 08/07/2014

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

@paylogic PyGrunn | July 08, 2014

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

+Spyros Ioakeimidis @_spyreto_

https://github.com/spirosikmd

@paylogic PyGrunn | July 08, 2014

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

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

@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

…take advantage of the platformPolymer and Chrome

@paylogic PyGrunn | July 08, 20145

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

– 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

web components

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

…appeared in 2010!

@paylogic PyGrunn | July 08, 20148

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

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

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

@paylogic

(After Web Components)

PyGrunn | July 08, 2014

A.W.C.

11

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

custom elements

shadow DOM

templates

html imports

PyGrunn | July 08, 2014@paylogic12

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

PyGrunn | July 08, 2014@paylogic

custom elements

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

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

@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

@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

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

DOM -> Integrated interoperability

accessibilitydevtools support

PyGrunn | July 08, 2014@paylogic18

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

– 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

@paylogic PyGrunn | July 08, 2014

templates

PyGrunn | July 08, 2014@paylogic

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

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

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

@paylogic PyGrunn | July 08, 2014

shadow DOM

PyGrunn | July 08, 2014@paylogic

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

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

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

@paylogic PyGrunn | July 08, 2014

html imports

PyGrunn | July 08, 2014@paylogic

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

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

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

web components are awesome!

@paylogic PyGrunn | July 08, 201429

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

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

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

web components ecosystem

@paylogic PyGrunn | July 08, 201432

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

@paylogic PyGrunn | July 08, 2014

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

everything is an element

@paylogic PyGrunn | July 08, 201434

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

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

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

@paylogic PyGrunn | July 08, 201436

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

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

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

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

testing

using node and grunt

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

@paylogic PyGrunn | July 08, 201440

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

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

@paylogic PyGrunn | July 08, 2014

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

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

@paylogic

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

PyGrunn | July 08, 201443

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

@paylogic

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

PyGrunn | July 08, 201444

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

@paylogic

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

PyGrunn | July 08, 201445

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

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

@paylogic PyGrunn | July 08, 2014

Page 47: Polymer - Welcome to the Future @ PyGrunn 08/07/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

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

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

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

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

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

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