by Maurizio Mangione - I web components sono un nuovo set di feature della piattaforma web. Polymer ne rende la creazione ancora più facile e permette, tramite polyfill di utilizzarli in tutti i browser moderni fin da ora. In Polymer tutto è un elemento, ha una vita propria e per questo può essere facilmente distribuibile e riutilizzabile.

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