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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

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

Semelhante a The Structure of Web Code: A Case For Polymer, November 1, 2014 (20)

Último

Último (20)

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