Polymer
a framework for the evolving web
What is Polymer?
• New type of library for the evolving web
o goal: support latest version of modern browsers
• Set of pol...
Philosophy
• Embrace HTML!
o everything is a custom element
• Leverage the web platform
o gets smaller and better over tim...
Polymer stack
Platform ( platform.js ) ~31KB
o polyfills for Shadow DOM, Custom Elements, MDV,...
Core ( polymer.js ) ~37K...
Web Components
Demos
Demos
Key players
• Shadow DOM
• HTML Templates
o <template>
• Custom Elements
o <element>
• HTML Imports
o <link rel="import">
<say-hello></say-hello>
Custom elements
define new HTML elements
var SayHello = document.register(
'say-hello', {prototype: proto});
var el = document.createElement(‘say-hello’);
// var e...
<template>
<style>
p { color: orange; }
</style>
<p>Hello world!</p>
</template>
Template - "inert" markup
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var t = document.querySelector(‘tem...
var proto = Object.create(HTMLElement.prototype);
proto.sayHi = function() { alert('Hiii!'); };
Object.defineProperty(prot...
Use today with platform.js
<html>
<head>
<script src="//polymer-project.org/js/platform.min.js">
</script>
</head>
<body>
...
HTML Imports - include definitions
<html>
<head>
<script src="platform.min.js"></script>
<link rel="import" href="path/to/...
Polymer elements
Polymer elements are custom
elements with special sauce
Polymer: Core
http://www.polymer-project.org/polymer.min.js
Includes the polyfills
in platform.js
Polymer features
• Easier element registration
• Publishing attributes, properties, methods
• Data binding
• Automagic cha...
Easier element registration
<polymer-element name="say-hello">
<template>Hello world!</template>
<script>
Polymer('say-hel...
Publishing properties/methods
<polymer-element name="say-hello" attributes="name">
<template>Hello world!</template>
<scri...
Two-way data binding
<polymer-element name="say-hello" attributes="name">
<template>
Hello {{name}}!
<template bind if="{{...
Automagic change watchers
<polymer-element name="say-hello" attributes="name color">
<template>
Hello <span style="color:{...
Declarative event-mappings
<polymer-element name="say-hello" attributes="name">
<template>
<input value="{{name}}" on-keyp...
<polymer-element name="say-hello" attributes="name">
<template>
<input type="text" id="myInput" value="{{name}}">
</templa...
Styling elements
Default styles: @host at-rule
<polymer-element name="say-hello">
<template>
<style>
@host {
:scope {
display: block; backg...
Styling distributed nodes
<polymer-element name="say-hello">
<template>
<style>
/* @polyfill h1 > span */
content::-webkit...
<polymer-element name="say-hello" attributes="name">
<template>
Hello <span pseudo="x-myname">{{name}}!</span>
</template>...
Advanced Concepts
Advanced features
• Element inheritance
o extending existing HTML elements
• Firing custom events
• Messaging between elem...
<polymer-element name="polymer-cool">
<script>
Polymer('polymer-cool', {
praise: 'cool',
makeCoolest: function() { this.pr...
Extending existing HTML elements
<polymer-element name="super-li" extends="li">
<template>...</template>
<script>Polymer('...
<polymer-element name="say-hello" attributes="name" on-click="clickHandler">
<script>
Polymer('say-hello', {
clickHandler:...
"Messaging" between elements
Pick your poison:
1.Data-binding - two-way via attributes
2.API - calling an element's public...
<polymer-element name="say-hello" attributes="name" on-click="restoreName">
<script>
Polymer('say-hello', {
restoreName: f...
<polymer-element name="say-hello" attributes="name">
<script>
Polymer('say-hello', {
restoreName: function() {
this.name =...
<polymer-element name="say-hello" attributes="name" on-click="sayHi">
<template>...</template>
<script>
Polymer('say-hello...
Reusing others' elements
<link rel="import" href="x-icon.html">
<link rel="import" href="x-menu-item.html">
<polymer-eleme...
<polymer-element name="polymer-jsonp"><script>...</script></polymer-element>
<polymer-element name="my-menu" attributes="d...
polymer-project.org
Intro to polymer-Devfest Yaoundé 2013
Upcoming SlideShare
Loading in …5
×

Intro to polymer-Devfest Yaoundé 2013

779
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
779
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Fetch nodes in the Shadow DOM by id
  • Intro to polymer-Devfest Yaoundé 2013

    1. 1. Polymer a framework for the evolving web
    2. 2. What is Polymer? • New type of library for the evolving web o goal: support latest version of modern browsers • Set of polyfill libraries • Web Components are its core • Sugaring layer • UI Components (in progress)
    3. 3. 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
    4. 4. 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...
    5. 5. Web Components
    6. 6. Demos Demos
    7. 7. Key players • Shadow DOM • HTML Templates o <template> • Custom Elements o <element> • HTML Imports o <link rel="import">
    8. 8. <say-hello></say-hello> Custom elements define new HTML elements
    9. 9. var SayHello = document.register( 'say-hello', {prototype: proto}); var el = document.createElement(‘say-hello’); // var el = new SayHello(); Registering an element
    10. 10. <template> <style> p { color: orange; } </style> <p>Hello world!</p> </template> Template - "inert" markup
    11. 11. 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
    12. 12. 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()
    13. 13. Use today with platform.js <html> <head> <script src="//polymer-project.org/js/platform.min.js"> </script> </head> <body> <script>document.register(‘say-hello’, ...);</script> <say-hello></say-hello> </body> </html> DEMO
    14. 14. HTML Imports - include definitions <html> <head> <script src="platform.min.js"></script> <link rel="import" href="path/to/sayhello.html"> </head> <body> <say-hello></say-hello> </body> </html>
    15. 15. Polymer elements
    16. 16. Polymer elements are custom elements with special sauce
    17. 17. Polymer: Core http://www.polymer-project.org/polymer.min.js Includes the polyfills in platform.js
    18. 18. 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
    19. 19. Easier element registration <polymer-element name="say-hello"> <template>Hello world!</template> <script> Polymer('say-hello'); </script> </polymer-element>
    20. 20. Publishing properties/methods <polymer-element name="say-hello" attributes="name"> <template>Hello world!</template> <script> Polymer('say-hello', { ready: function() {...}, sayHi: function() { alert('Hiii!'); } name: 'Eric' }); </script> </polymer-element> <say-hello name="Eric"></say-hello>
    21. 21. Two-way data binding <polymer-element name="say-hello" attributes="name"> <template> Hello {{name}}! <template bind if="{{show}}"> <img src="profile.png"> </template> </template> <script> Polymer('say-hello', { name: 'Eric', show: true }); </script> </polymer-element> DEMO
    22. 22. Automagic change watchers <polymer-element name="say-hello" attributes="name color"> <template> Hello <span style="color:{{color}}">{{name}}!</span> </template> <script> Polymer('say-hello', { colorChanged: function() { if (!this.color.match(/red|orange|yellow/)) { console.log("Color wasn't hot!"); } } }); </script> </polymer-element> <say-hello color="red" name="Joe"></say-hello> DEMO
    23. 23. Declarative event-mappings <polymer-element name="say-hello" attributes="name"> <template> <input value="{{name}}" on-keypress="doKeyPress"> Hello {{name}}! </template> <script> Polymer('say-hello', { doKeyPress: function() { if (this.name.match(/^Larry Page$/i)) { alert('Googler!'); } } }); </script> </polymer-element> DEMO
    24. 24. <polymer-element name="say-hello" attributes="name"> <template> <input type="text" id="myInput" value="{{name}}"> </template> <script> Polymer('say-hello', { ready: function() { this.$.myInput.style.color = 'red'; } }); </script> </polymer-element> Automatic node finding this.$.<id>
    25. 25. Styling elements
    26. 26. Default styles: @host at-rule <polymer-element name="say-hello"> <template> <style> @host { :scope { display: block; background: red; padding: 5px; transition: opacity 400ms; } :scope:hover { opacity: 0.5; } } </style> </template> <script>Polymer('say-hello');</script> </polymer-element>
    27. 27. Styling distributed nodes <polymer-element name="say-hello"> <template> <style> /* @polyfill h1 > span */ content::-webkit-distributed(h1 > span) { color: red; } </style> <content select="h1"></content> </template> <script>Polymer('say-hello');</script> </polymer-element> DEMO
    28. 28. <polymer-element name="say-hello" attributes="name"> <template> Hello <span pseudo="x-myname">{{name}}!</span> </template> <script>Polymer('say-hello');</script> </polymer-element> <style> say-hello::x-myname { color: red; } </style> <say-hello name="Eric"><say-hello> DEMO Custom pseudo elements provide style hooks for internal elements
    29. 29. Advanced Concepts
    30. 30. Advanced features • Element inheritance o extending existing HTML elements • Firing custom events • Messaging between elements • Reusing others' elements o UI-less components
    31. 31. <polymer-element name="polymer-cool"> <script> Polymer('polymer-cool', { praise: 'cool', makeCoolest: function() { this.praise = 'coolest'; } }); </script> </polymer-element> <polymer-element name="polymer-cooler" extends="polymer-cool"> <template>{{praise}}</template> <script>Polymer('polymer-cooler');</script> </polymer-element> DEMO Element inheritance extends attribute
    32. 32. Extending existing HTML elements <polymer-element name="super-li" extends="li"> <template>...</template> <script>Polymer('super-li');</script> </polymer-element> <ul> <li is="super-li"></li> <li is="super-li"></li> ... </ul>
    33. 33. <polymer-element name="say-hello" attributes="name" on-click="clickHandler"> <script> Polymer('say-hello', { clickHandler: function() { this.fire('said-hello', {name: this.name}); } }); </script> </polymer-element> <say-hello name="Eric"></say-hello> <script> document.body.addEventListener('said-hello', function(e) { console.log(e.type, 'to', e.detail.name); // "said-hello to Eric" }); </script> DEMO Sending custom events this.fire() Just a wrapper for new CustomEvent()
    34. 34. "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
    35. 35. <polymer-element name="say-hello" attributes="name" on-click="restoreName"> <script> Polymer('say-hello', { restoreName: function(e, detail, sender) { this.name = 'John Doe'; } }); </script> </polymer-element> <polymer-element name="my-app" attributes="name"> <template> <input type="text" value="{{name}}"> <say-hello name="{{name}}"></say-hello> <say-bye name="{{name}}"></say-bye> </template> </polymer-element> <my-app name="Eric Bidelman"></my-app> DEMO Communication using published properties
    36. 36. <polymer-element name="say-hello" attributes="name"> <script> Polymer('say-hello', { restoreName: function() { this.name = 'John Doe'; } }); </script> </polymer-element> <say-hello ="Eric Bidelman"></say-hello> <button>Restore</button> <script> document.querySelector('button').addEventListener('click', function(e) { document.querySelector('say-hello').restoreName(); }); </script> Communication: calling public API methods
    37. 37. <polymer-element name="say-hello" attributes="name" on-click="sayHi"> <template>...</template> <script> Polymer('say-hello', { sayHi: function() { alert('Hiiya!'); this.fire('saidhello', {name: this.name}); } }); </script> </polymer-element> Communication: fire custom events (pub/sub) <polymer-element name="my-app"> <template> <div on-saidhello="sayBye"> <say-hello name="Eric" on-saidhello="hiDone"></say-hello> </div> </template> <script> Polymer('my-app', { sayBye: function() { alert('kthxbye!'); }, hiDone: function(e, detail, sender) { alert('Said hi to ' + detail.name + ' from ' + sender.localName); } }); </script> </polymer-element> DEMO Event bubbling! "Hiiya!" "Said hi to Eric from say-hello" "kthxbye!"
    38. 38. Reusing others' elements <link rel="import" href="x-icon.html"> <link rel="import" href="x-menu-item.html"> <polymer-element name="my-menu"> <template> <x-icon></x-icon> <li is="x-menu-item">Two</li> <li is="x-menu-item">Three</li> </template> <script>Polymer('my-menu');</script> </polymer-element>
    39. 39. <polymer-element name="polymer-jsonp"><script>...</script></polymer-element> <polymer-element name="my-menu" attributes="data"> <template> <polymer-jsonp url="http://example.com/json?callback=" auto response="{{data}}"></polymer-jsonp> ... </template> <script> Polymer('my-menu', { dataChanged: function() {...} }); </script> </polymer-element> UI-less components custom elements don't have to have UI! CODE
    40. 40. polymer-project.org
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×