Dublin, November 1, 2014

The Structureof Web Code

A CaseFor Polymer

v1

@polymer #itshackademic

Tommie Gannerttommie@

AgendaThe Structure of Web CodeWeb Components and ImplementationsPolymerTools

The Structure of Web Code

Imagine a traffic light

@polymer #itshackademichttp://jsbin.com/lefubayoha/4/

Document Style Behavior

BehaviorStyle

BehaviorStyle

@polymer #itshackademic

printf (_("For complete documentation, run: " "info coreutils '%s invocation'\n"), last_component (program_name));

@polymer #itshackademic

Contents of section .text:401c40: mov $0x404ae0,%esi401c45: callq 401180 <dcgettext@plt>401c4a: mov %rbp,%rdx401c4d: mov %rax,%rsi401c50: mov $0x1,%edi401c55: xor %eax,%eax401c57: callq 401330 <__printf_chk@plt>

Contents of section .rodata:404ae0: ascii "For complete documentation, run: " " info coreutils '%s invocation'\n"404b21: ascii "echo"404b26: ascii "Report %s …

Back To Basics

@polymer #itshackademichttp://jsbin.com/zoyapiheju/2/

Style

Behavior

Document light

app

@polymer #itshackademic

Style

traffic-app

Style

Behavior

Document

traffic-light

Behavior

Document

Web Components!

?

@polymer #itshackademic

I don't alwaysstructure my frontend code,

but when I do,I use web components.

https://imgflip.com/memegenerator/The-Most-Interesting-Man-In-The-World

Web Components?

Custom Elementsdefine new HTML/DOM elements

@polymer #itshackademic

<paper-tabs selected=“1”>

<paper-tab>Tab 1</paper-tab>

<paper-tab>Tab 2</paper-tab>

<paper-tab>Tab 3</paper-tab>

</paper-tabs>

declarative, readable

meaningful HTML

extensible → reusable

Custom Elementsdefine new HTML

@polymer #itshackademic

declarative, readable

meaningful HTML

extensible → reusable

Custom Elementsdefine new HTML

var tabs = document.querySelector('paper-tabs');

tabs.addEventListener('core-activate', function() {

console.log(this.selected);

});

Templatesnative client-side templating

@polymer #itshackademic

<template>

<div class=“comment”>

<img src=“image.png”>

</div>

<script>…</script>

</template>

use DOM to scaffold DOM → no XSS

content is inert until cloned/used

doc fragment → not part of the page

HTML Templatesnative client-side templates

parsed, not rendered

Shadow DOMDOM/CSS scoping

@polymer #itshackademic

<video src=“foo.webm” controls></video>

<video src=“foo.webm” controls></video>

Mutation/Object Observersdeclarative programming

@polymer #itshackademic

<template>

<img src=“{{src}}”>

</template>

<script>

… this.src = 'lolcat.jpg'; …

</script>

data-binding minimal DOM manipulation

two-way img.src = 'otherlolcat.jpg';

integrated use in document and code

Mutation Observersdeclarative programming

safe behind-the-scenes escaping

HTML Importsloading web components

@polymer #itshackademic

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

@polymer #itshackademic

<link rel="import" href="bootstrap.html">

● Custom Elements● Templates● Shadow DOM● Mutation/Object Observers● HTML Imports

Web Components

Good Designrequiresgood implementation

http://www.reddit.com/r/CrappyDesign/comments/2k1ima/would_it_make_it_weird_if_i_closed_the_stall_door/

@polymer #itshackademic

Browser supportNovember 2014

Polyfills Web Componentswith platform.js*

* soon to be called webcomponents.js

@polymer #itshackademic

Browser supportNovember 2014 (with Polymer)

polymer

@polymer #itshackademic

<link rel="import" href="../polymer/polymer.html"><polymer-element name="traffic-light">

…</polymer-element>

@polymer #itshackademic

<link rel="import" href="../polymer/polymer.html"><polymer-element name="traffic-light"> <template> <div></div> </template> …</polymer-element>

@polymer #itshackademic

<link rel="import" href="../polymer/polymer.html"><polymer-element name="traffic-light"> <template> <style> div { border-radius: 100px; height: 200px; width: 200px; } </style> <div></div> </template> …</polymer-element>

@polymer #itshackademic

<link rel="import" href="../polymer/polymer.html"><polymer-element name="traffic-light" attributes="color"> <template> <style> div { border-radius: 100px; height: 200px; width: 200px; } </style> <div style="background-color: {{ color }}"></div> </template> <script> Polymer({ color: 'blue' }); </script></polymer-element>

@polymer #itshackademic

<link rel="import" href="../traffic-light/traffic-light.html">

<traffic-light color="red"></traffic-light><traffic-light color="yellow"></traffic-light><traffic-light color="green"></traffic-light>

@polymer #itshackademic

<link rel="import" href="../traffic-light/traffic-light.html">

<polymer-element name="traffic-app" attributes="activeColor"> <template> <link rel="stylesheet" href="traffic-app.css"> <traffic-light color="red"></traffic-light> <traffic-light color="yellow"></traffic-light> <traffic-light color="green"></traffic-light> </template> <script name="traffic-app.js"></script></polymer-element>

@polymer #itshackademic

<link rel="import" href="../traffic-light/traffic-light.html">

<polymer-element name="traffic-app" attributes="activeColor"> <template> <link rel="stylesheet" href="traffic-app.css"> <template repeat="{{ color in lights }}"> <traffic-light color="{{ color }}"></traffic-light> </template> </template>

<script> Polymer({ activeColor: 'red', lights: [ 'red', 'yellow', 'green' ] }); </script></polymer-element>

@polymer #itshackademichttp://jsbin.com/kofowetapa/1/

APIs

APIs (as elements)

@polymer #itshackademic

I want to add a markerto a Google map.

@polymer #itshackademic

<style>

#map {

height: 400px;

}

</style>

<div id="map"></div>

<script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady">

</script>

<script>

var marker = null;

function getCurrentLocation(callback) {

navigator.geolocation.watchPosition(callback);

}

function addMarker(opts, info) {

var marker = new google.maps.Marker(opts);

var infoWindow = new google.maps.InfoWindow({content: info});

google.maps.event.addListener(marker, 'click', function() {

infoWindow.open(opts.map, marker);

});

return marker;

}

function mapReady() {

var container = document.querySelector('#map');

var map = new google.maps.Map(container, {

zoom: 14, disableDefaultUI: true

});

getCurrentLocation(function(pos) {

var current = new google.maps.LatLng(pos.coords.latitude,

pos.coords.longitude);

map.setCenter(current);

// Re-position marker or create new one.

if (marker) {

marker.setPosition(map.getCenter());

} else {

marker = addMarker({

position: current, map: map, title: 'Your location'

}, '<b>Your location</b>');

}

});

}

</script>

So much code for one map marker!

paper-elements

<paper-input floatinglabel

label="Type only numbers... (floating)"

validate="^[0-9]*$"

error="Input is not a number!">

</paper-input>

@polymer #itshackademic

Tools

Bower

$ bower install --save Polymer/polymer

bower init

Vulcanize$ vulcanize -o build.html --csp --strip \ index.html

npm install -g vulcanize

goo.gl/UjLvb2

Chrome Dev Editor

polymer-project.org/tools/designer/

polymer-project.org/apps/topeka/

customelements.io

Summary and Conclusions

<slide-thankyou> Questions?</slide-thankyou>

○ https://www.polymer-project.org/○ https://www.polymer-project.org/docs/start/creatingelements.html○ https://www.polymer-project.org/tools/designer/○ https://github.com/Polymer/polymer-expressions○ http://itshackademic.com/codelabs○ http://www.w3.org/TR/custom-elements/○ http://www.w3.org/TR/shadow-dom/○ http://www.w3.org/TR/html5/scripting-1.html#the-template-element○ https://dom.spec.whatwg.org/#mutation-observers○ http://wiki.ecmascript.org/doku.php?id=harmony:observe○ www.w3.org/TR/html-imports/○ http://blog.stevensanderson.com/2014/08/18/knockout-3-2-0-released/○ http://www.x-tags.org/