The Structure of Web Code: A Case For Polymer, November 1, 2014

The Structure
of Web Code
Dublin, November 1, 2014
A Case
For Polymer
v1

@polymer #itshackademic
Tommie Gannert
tommie@

Agenda
The Structure of Web Code
Web Components and Implementations
Polymer
Tools

Style Behavior
Document Style Behavior
http://jsbin.com/lefubayoha/4/
Style Behavior

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

Contents of section .text:
401c40: mov $0x404ae0,%esi
401c45: callq 401180 <dcgettext@plt>
401c4a: mov %rbp,%rdx
401c4d: mov %rax,%rsi
401c50: mov $0x1,%edi
401c55: xor %eax,%eax
401c57: 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 …

Document light
http://jsbin.com/zoyapiheju/2/
Style
Behavior
app

Document
Style
Document
traffic-app
Style
Behavior
traffic-light
Behavior
Web Components!
?

I don't always
structure my frontend code,
but when I do,
I use web components.
https://imgflip.com/memegenerator/
The-Most-Interesting-Man-In-The-World

Custom Elements
define new HTML/DOM elements

<paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
</paper-tabs>
Custom Elements
define new HTML
declarative, readable
meaningful HTML
extensible → reusable

Custom Elements
define new HTML
declarative, readable
meaningful HTML
extensible → reusable
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-activate', function() {
console.log(this.selected);
});

Templates
native client-side templating

<template>
<div class=“comment”>
<img src=“image.png”>
</div>
<script>…</script>
</template>
HTML Templates
native client-side templates
use DOM to scaffold DOM → no XSS
parsed, not rendered
content is inert until cloned/used
doc fragment → not part of the page

Mutation/Object Observers
declarative programming

<template>
<img src=“{{src}}”>
</template>
<script>
… this.src = 'lolcat.jpg'; …
</script>
Mutation Observers
declarative programming
data-binding minimal DOM manipulation
safe behind-the-scenes escaping
two-way img.src = 'otherlolcat.jpg';
integrated use in document and code

HTML Imports
loading web components

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

Good Design
requires
good implementation
http://www.reddit.com/r/CrappyDesign/
comments/2k1ima
/would_it_make_it_weird_if_i_closed_the_stall_door/

Browser support
November 2014

Polyfills Web Components
with platform.js*
* soon to be called webcomponents.js

Browser support
November 2014 (with Polymer)

<template>
<style>
div {
border-radius: 100px;
height: 200px;
width: 200px;
}
</style>
<div></div>
</template>
…
</polymer-element>

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

http://jsbin.com/kofowetapa/1/ @polymer #itshackademic

I want to add a marker
to a Google map.

}
</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>');
}
So much code for
one map marker!

<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>

Bower
bower init
$ bower install --save Polymer/polymer

Vulcanize
npm install -g vulcanize
$ vulcanize -o build.html --csp --strip
index.html

Chrome Dev Editor
goo.gl/UjLvb2

polymer-project.org/tools/designer/

polymer-project.org/apps/topeka/

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

The Structure of Web Code: A Case For Polymer, November 1, 2014

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie The Structure of Web Code: A Case For Polymer, November 1, 2014

Ähnlich wie The Structure of Web Code: A Case For Polymer, November 1, 2014 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

The Structure of Web Code: A Case For Polymer, November 1, 2014