About using Polymer (http://polymer-project.org/) to achieve better structure of the frontend code than with other tools. Part of the Dublin GDG Dev Fest.

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

2. @polymer #itshackademic
Tommie Gannert
tommie@

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

4. The Structure of Web Code

6. Imagine a traffic light

7. @polymer #itshackademic
Style Behavior
Document Style Behavior
http://jsbin.com/lefubayoha/4/
Style Behavior

8. @polymer #itshackademic
printf (_("For complete documentation, run: "
"info coreutils '%s invocation'n"),
last_component (program_name));

9. @polymer #itshackademic
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 …

10. Back To Basics

11. Document light
@polymer #itshackademic
http://jsbin.com/zoyapiheju/2/
Style
Behavior
app

12. Document
@polymer #itshackademic
Style
Document
traffic-app
Style
Behavior
traffic-light
Behavior
Web Components!
?

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

14. Web Components?

15. Custom Elements
define new HTML/DOM elements

16. <paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
@polymer #itshackademic
Custom Elements
define new HTML
declarative, readable
meaningful HTML
extensible → reusable

17. @polymer #itshackademic
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);
});

18. Templates
native client-side templating

19. @polymer #itshackademic
<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

20. Shadow DOM
DOM/CSS scoping

21. <video src=“foo.webm” controls></video>
@polymer #itshackademic

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

23. Mutation/Object Observers
declarative programming

24. <template>
<img src=“{{src}}”>
</template>
<script>
… this.src = 'lolcat.jpg'; …
</script>
@polymer #itshackademic
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

25. HTML Imports
loading web components

26. @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>

27. @polymer #itshackademic
<link rel="import" href="bootstrap.html">

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

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

30. @polymer #itshackademic
Browser support
November 2014

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

32. @polymer #itshackademic
Browser support
November 2014 (with Polymer)

33. polymer

34. <link rel="import" href="../polymer/polymer.html">
<polymer-element name="traffic-light">
@polymer #itshackademic
…
</polymer-element>

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

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

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

38. <link rel="import" href="../traffic-light/traffic-light.html">
@polymer #itshackademic
<traffic-light color="red"></traffic-light>
<traffic-light color="yellow"></traffic-light>
<traffic-light color="green"></traffic-light>

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

40. <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>
@polymer #itshackademic
<script>
Polymer({
activeColor: 'red',
lights: [ 'red', 'yellow', 'green' ]
});
</script>
</polymer-element>

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

42. APIs

43. APIs (as elements)

44. @polymer #itshackademic
I want to add a marker
to a Google map.

45. @polymer #itshackademic
}
</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!

49. paper-elements

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

51. Tools

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

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

54. Chrome Dev Editor
goo.gl/UjLvb2

55. polymer-project.org/tools/designer/

56. polymer-project.org/apps/topeka/

57. customelements.io

58. Summary and Conclusions

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

60. ○ 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/