This document discusses Polymer, a library for building web components using custom elements, HTML imports, and Shadow DOM. It includes code examples for creating components, data binding, event mapping, and property observation, along with tools for development such as Yeoman and Bower. The presentation emphasizes hands-on learning and provides links for further engagement.

1. 29th November 2014
Polymer
Lego for the web

2. ~ whoami
Maurizio Mangione
@granze
Lead Frontend
Developer
Milano JS
Founder

3. Polymer?

4. Web components?

5. Custom Elements
HTML imports
Shadow DOM
Templates

6. Custom elements
Create new HTML elements

7. Custom elements
<tabs>
<tab>tab 1</tab>
<tab>tab 2</tab>
<tab>tab 3</tab>
</tabs>

8. HTML imports
Load custom element
definitions and resources

9. HTML imports
<link rel="import" href="custom.html">

10. Shadow DOM
Scoped CSS + encapsulated
markup

11. Shadow DOM

12. Templates
Native templating in the
browser

13. Templates
<template>
<h1>Hey there!</h1>
<img src="xxx.jpg" />
<script>
alert('whoooo!');
</script>
</template>

14. Browser support

15. webcomponents.js

16. Polymer vs Vanilla

20. Special features

21. Data binding
<polymer-element name="user-group">
<template>
This is the {{technology} } user group.
</template>
<script>
Polymer('user-group', {
ready: function() {
this.technology = 'Javascript';
}
});
</script>
</polymer-element>

22. Declarative event mapping
<polymer-element name="g-cool">
<template>
<button on-click="{{buttonClick} }"></button>
</template>
<script>
Polymer({
buttonClick: function(event, detail, sender) { ... }
});
</script>
</polymer-element>

23. Extending other elements
<polymer-element name="my-label" noscript>
<template>
<span><content></content></span>
</template>
</polymer-element>
<polymer-element name="my-superlabel" extends="my-label" noscript>
<template>
<span>
<i>★</i><shadow></shadow>
</span>
</template>
</polymer-element>
<my-label>Hello!</my-label> // Hello!"
<my-superlabel>Hello!</my-superlabel> // "★ Hello!"

24. Observing properties
<polymer-element name="g-cool" attributes="better best">
<script>
Polymer({
better: '',
best: '',
betterChanged: function(oldValue, newValue) {
...
},
bestChanged: function(oldValue, newValue) {
...
}
});
</script>
</polymer-element>

25. Tools

26. Yeoman
npm install ­g
generator­polymer

27. Bower
bower install Polymer/core­ajax

28. Vulcanize
npm install ­g
vulcanize npm install ­D
gulp­vulcanize
npm install ­D
grunt­vulcanize

29. Useful components

30. Google web components
Paper elements
Core elements

31. Do you want more?

32. Lab Hands­on
@
Codemotion
11:40 ­13:
10

33. Keep in touch!
@granze
Slides made with Applause http://bit.ly/applause­slides