1. Polymer a framework for the evolving web

2. What is Polymer? New type of library for the evolving web o goal: support latest version of modern browserssupport Set of polyfill libraries Web Components are its core Sugaring layer UI Components (in progress)

4. Philosophy Embrace HTML! o everything is a custom element Leverage the web platform o gets smaller and better over time Minimize boilerplate code o remove tediousness of building web apps o feedback loop to web platform standards Salt to taste o designed to be a la carte

5. Polymer stack Platform ( platform.js ) ~31KB o polyfills for Shadow DOM, Custom Elements, MDV,... Core ( polymer.js ) ~37KB o includes platform.js o expresses opinionated way to these new APIs together Polymer / UI elements o in progress...

6. Web Components

7. Demos

8. Key players Shadow DOM HTML Templates o Custom Elements o HTML Imports o

9. Custom elements define new HTML elements

10. var SayHello = document.register( 'say-hello', {prototype: proto}); var el = document.createElement(‘say-hello’); // var el = new SayHello(); Registering an element

11. p { color: orange; } Hello world! Template - "inert" markup

12. var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var t = document.querySelector(‘template’); var copy = t.content.cloneNode(true); this.createShadowRoot().appendChild(copy); }; document.register('say-hello', {prototype: proto}); Shadow DOM - gives encapsulation

13. var proto = Object.create(HTMLElement.prototype); proto.sayHi = function() { alert('Hiii!'); }; Object.defineProperty(proto, ‘name’, {value: ‘Eric’}); document.register('say-hello', {prototype: proto}); Define a public API Just like existing DOM elements: var a = new Audio(); a.loop a.muted a.load()

14. Use today with platform.js document.register(‘say-hello’,...); DEMO

15. HTML Imports - include definitions

16. Polymer elements

17. Polymer elements are custom elements with special sauce

18. Polymer: Core http://www.polymer-project.org/polymer.min.js Includes the polyfills in platform.js

19. Polymer features Easier element registration Publishing attributes, properties, methods Data binding Automagic change watchers Declarative event-mappings Automatic node finding Element inheritance is a breeze

20. Easier element registration Hello world! Polymer('say-hello');

21. Publishing properties/methods Hello world! Polymer('say-hello', {" attributes="name ready: function() {...}, sayHi: function() { alert('Hiii!'); } name: 'Eric' });

22. Two-way data binding Hello {{name}}! Polymer('say-hello', { name: 'Eric', show: true }); DEMO

23. Automagic change watchers Hello {{name}}! Polymer('say-hello', { colorChanged: function() { if (!this.color.match(/red|orange|yellow/)) { console.log("Color wasn't hot!"); } }); DEMO

24. Declarative event-mappings Hello {{name}}! Polymer('say-hello', { doKeyPress: function() { if (this.name.match(/^Larry Page$/i)) { alert('Googler!'); } }); DEMO

25. Polymer('say-hello', { ready: function() { this.$.myInput.style.color = 'red'; } }); Automatic node finding this.$.

26. Styling elements

27. Default styles: @host at-rule @host { :scope { display: block; background: red; padding: 5px; transition: opacity 400ms; } :scope:hover { opacity: 0.5; } } Polymer('say-hello');

28. Styling distributed nodes /* @polyfill h1 > span */ content::-webkit-distributed(h1 > span) { color: red; } Polymer('say-hello'); Hello Eric! DEMO

29. Hello {{name}}! Polymer('say-hello'); say-hello::x-myname { color: red; } DEMO Custom pseudo elements provide style hooks for internal elements

30. Advanced Concepts

31. Advanced features Element inheritance o extending existing HTML elements Firing custom events Messaging between elements Reusing others' elements o UI-less components

32. Polymer('polymer-cool', { praise: 'cool', makeCoolest: function() { this.praise = 'coolest'; } }); {{praise}} Polymer('polymer-cooler'); DEMO Element inheritance extends attribute

33. Extending existing HTML elements... Polymer('super-li');...

34. Polymer('say-hello', { clickHandler: function() { this.fire('said-hello', {name: this.name}); } }); document.body.addEventListener('said-hello', function(e) { console.log(e.type, 'to', e.detail.name); // "said-hello to Eric" }); DEMO Sending custom events this.fire() Just a wrapper for new CustomEvent()

35. "Messaging" between elements Pick your poison: 1.Data-binding - two-way via attributes 2.API - calling an element's public methods 3.Events - firing custom events

36. Polymer('say-hello', { restoreName: function(e, detail, sender) { this.name = 'John Doe'; } }); DEMO Communication using published properties

37. Polymer('say-hello', { restoreName: function() { this.name = 'John Doe'; } }); Restore document.querySelector('button').addEventListener('click', function(e) { document.querySelector('say-hello').restoreName(); }); Communication: calling public API methods

38. ... Polymer('say-hello', { sayHi: function() { alert('Hiiya!'); this.fire('saidhello', {name: this.name}); } }); Communication: fire custom events (pub/sub) Polymer('my-app', { sayBye: function() { alert('kthxbye!'); }, hiDone: function(e, detail, sender) { alert('Said hi to ' + detail.name + ' from ' + sender.localName); } }); DEMO Event bubbling! "Hiiya!" "Said hi to Eric from say-hello" "kthxbye!"

39. Reusing others' elements Two Three Polymer('my-menu');

40. ... <polymer-jsonp url="http://example.com/json?callback=" auto response="{{data}}">... Polymer('my-menu', { dataChanged: function() {...} }); UI-less components custom elements don't have to have UI! CODE

41. polymer-project.org