POLYMER & WEB COMPONENTS GETTING STARTED WITH POLYMER Pete - - PowerPoint PPT Presentation

▶
polymer web components
SMART_READER_LITE
LIVE PREVIEW

POLYMER & WEB COMPONENTS GETTING STARTED WITH POLYMER Pete - - PowerPoint PPT Presentation

Sep 14, 2023 351 likes •697 views

POLYMER & WEB COMPONENTS GETTING STARTED WITH POLYMER Pete Johanson @petejohanson / Applications Existing Frameworks Web Components (Polymer?) Web Platform NO PANACEA CONSIDERATIONS Progressive Enhancement Challenges Server Side

slide-1
SLIDE 1

POLYMER & WEB COMPONENTS

GETTING STARTED WITH POLYMER

/ Pete Johanson @petejohanson

slide-2
SLIDE 2

Applications Existing Frameworks Web Components (Polymer?) Web Platform

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

NO PANACEA

slide-6
SLIDE 6

CONSIDERATIONS

Progressive Enhancement Challenges Server Side Rendering? Browser Support

slide-7
SLIDE 7

EXISTING APPROACHES

<head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery­ui.css" <script src="//code.jquery.com/jquery­1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery­ui.js"></script> <script> </script> </head> <body> <ul id="menu"> <li>Item 1</li> <li>Item 2</li> </ul> $(function() { $( "#menu" ).menu({ disabled: true }); });

slide-8
SLIDE 8

POLYMER

<head> <link rel="import" href="paper­item/paper­item.html"> <link rel="import" href="paper­menu/paper­menu.html"> <head> <body> <paper­menu selected="1"> <paper­item>Item 1</paper­item> <paper­item>Item 2</paper­item> </paper­menu> </body>

slide-9
SLIDE 9

FEATURES

Declared Properties Local/Light DOM Data Binding Events Scoped Styles and Custom CSS Properties

slide-10
SLIDE 10

DECLARED PROPERTIES

Polymer({ is: 'my­gravatar', properties: { email: String, size: { type: String, value: '' }, /* ... */ } });

slide-11
SLIDE 11

COMPUTED PROPERTIES

Polymer({ is: 'my­gravatar', properties: { email: String, size: String, imgsrc: { type: String, computed: 'computeImageSource(email, size)' } }, computeImageSource: function(email, size) { return ...; } });

slide-12
SLIDE 12

CHANGE NOTIFICATION

Needed for two-way data binding

Polymer({ is: 'my­chooser', properties: { choice: { type: String, notify: true, } }, });

slide-13
SLIDE 13

LOCAL (SHADOW) DOM

<dom­module id="my­gravatar"> <template> <img src="{{imgsrc}}"> </template> ... </dom­module>

slide-14
SLIDE 14

AUTOMATIC NODE FINDING

<dom­module id="my­gravatar"> <template> <img id="gravatar"> </template> <script> Polymer({ is: 'my­gravatar', ready: function() { this.$.gravatar.src = '//gravatar.com/avatar/abcdef'; } }); </script> </dom­module>

slide-15
SLIDE 15

DOM MANIPULATION

Local DOM

var toLocal = document.createElement('div'); var beforeNode = Polymer.dom(this.root).childNodes[0]; Polymer.dom(this.root).insertBefore(toLocal, beforeNode);

Light DOM

Polymer.dom(this).appendChild(document.createElement('div')); var allSpans = Polymer.dom(this).querySelectorAll('span');

slide-16
SLIDE 16

LIGHT DOM

<dom­module id="my­strongbad"> <template> <strong><content></content></strong> </template> ... </dom­module>

slide-17
SLIDE 17

<my­strongbad>Deleted!</my­strongbad>

slide-18
SLIDE 18

DATA BINDING

<dom­module id="my­gravatar"> <template> <input type="text" value={{email::input}}></input> <input type="text" value={{size::input}}></input> <img src="{{imgsrc}}"> </template> ... </dom­module>

slide-19
SLIDE 19

ONE-WAY VS TWO-WAY BINDINGS

<template> <my­gravatar email="[[email]]"></my­gravatar> </template> <template> <my­chooser choice="{{choice}}"></my­chooser> </template>

slide-20
SLIDE 20

ONE-WAY BINDING

Host-To-Child

<template> <my­gravatar email="[[email]]"></my­gravatar> <input type="text" value="{{email::input}}"> </template> <script> Polymer({ is: 'my­element', properties: { email: String, }, }); </script>

slide-21
SLIDE 21

TWO-WAY BINDING

Bi-directional between child and host

<template> <my­chooser choice="{{type}}"></my­chooser> </template> <script> Polymer({ is: 'my­element', properties: { type: String, }, }); </script>

slide-22
SLIDE 22

EVENTS

Declarative event listeners Annotated event listeners Custom Event Firing

slide-23
SLIDE 23

DECLARATIVE EVENT LISTENERS

Polymer({ is: 'x­custom', listeners: { 'tap': 'regularTap', 'special.tap': 'specialTap' }, regularTap: function(e) { alert("Thank you for tapping"); }, specialTap: function(e) { alert("It was special tapping"); } });

slide-24
SLIDE 24

ANNOTATED EVENT LISTENERS

<button on­click="buttonClick">Click Me</button>

slide-25
SLIDE 25

EVENT FIRING

<dom­module id="x­custom"> <template> <button on­click="handleClick">Kick Me</button> </template> <script> Polymer({ is: 'x­custom', handleClick: function(e, detail) { this.fire('kick', {kicked: true}); } }); </script> </dom­module>

slide-26
SLIDE 26

STYLING

slide-27
SLIDE 27

SCOPED STYLES

<template> <style> :host { /* Selector to style the host DOM element */ display: block; } .content­wrapper > ::content .warning { /* Light DOM */ color: red; } </style> <div class="content­wrapper"><content></content></div> </template>

slide-28
SLIDE 28

CROSS SCOPE STYLES

"Theming"

<template> <style> </style> <div class="content­wrapper"><content></content></div> </template> :host { /* Selector to style the host DOM element */ display: block; } .content­wrapper > ::content .warning { /* Light DOM */ color: var(­­my­element­warning­color, red); }

slide-29
SLIDE 29

CSS MIXINS

<template> <style> :host { /* Selector to style the host DOM element */ display: block; @apply(­­my­element­theme); } </style> </template> <style> </style> :host { ­­my­element­theme { background­color: green; } }

slide-30
SLIDE 30

ELEMENT CATALOG

slide-31
SLIDE 31

POLYMER STARTER KIT

Best Practices Baked In Build Offline Support Testing

slide-32
SLIDE 32

$ wget https://github.com/PolymerElements/polymer­starter­kit/releases/download/v1. $ unzip polymer­starter­kit­1.0.3.zip $ cd polymer­starter­kit­1.0.3 $ npm install && bower install $ gulp serve

slide-33
SLIDE 33

SLIDES

http://petejohanson.github.io/nerdsummit-2015-polymer