Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Custom Elements with
Polymer Web Components
John Riviello
@JohnRiv
Distinguished Engineer, Comcast Interactive Media
Eleme...
Polymer &
Web Components
”250/365 - Bricks" by Kenny Louie is licensed under CC BY 2.0
Why? What? How?
Communicating & shipping
web design & functionality
updates across a large
organization is HARD WORK
Communicating & Sharing Web Updates Across Your Organization
1. Living Style Guides
2. Tiny Bootstraps
3. AngularJS Direct...
YES!
Web Standards!
Web Components!
What are
Web Components?
What are Web Components?
4 Specs
John Riviello – Custom Elements with Polymer Web Components7
What are Web Components?
Custom Elements
John Riviello – Custom Elements with Polymer Web Components8
What are Web Components?
Custom Elements
John Riviello – Custom Elements with Polymer Web Components9
•Provides a way for ...
What are Web Components?
HTML Imports
John Riviello – Custom Elements with Polymer Web Components10
What are Web Components?
HTML Imports
John Riviello – Custom Elements with Polymer Web Components11
• Means to import cust...
What are Web Components?
Templates
John Riviello – Custom Elements with Polymer Web Components12
What are Web Components?
Templates
John Riviello – Custom Elements with Polymer Web Components13
• Used to declare fragmen...
What are Web Components?
Shadow DOM
John Riviello – Custom Elements with Polymer Web Components14
What are Web Components?
Shadow DOM
John Riviello – Custom Elements with Polymer Web Components15
•Allows you to take a DO...
Can we even use
these things?
Source: http://jonrimmer.github.io/are-we-componentized-yet/
Are We Componentized Yet?
There’s hope.
What’s better than
hope?
POLYFILLS!
*as long as there is still hope*
Web Components Polyfills
webcomponents.js
John Riviello – Custom Elements with Polymer Web Components20
•Custom Elements
•...
Web Components Polyfills
webcomponents-lite.js
John Riviello – Custom Elements with Polymer Web Components21
•Custom Eleme...
Lightweight
Web Component
Libraries
Lightweight Web Component Libraries
X-Tag 5.0kB
John Riviello – Custom Elements with Polymer Web Components23
• IE9+/Edge
...
Google Polymer
What is Polymer?
1. Material Design
2. A framework
3. Required to use Web Components
John Riviello – Custom Elements with ...
What is Polymer?
<script>
var proto = Object.create(HTMLElement.prototype),
protoElement;
proto.createdCallback = function...
What is Polymer?
<link rel="import"
href="bower_components/polymer/polymer.html">
<script>
Polymer({
is: "proto-element",
...
What is Polymer?
<!DOCTYPE html>
<html>
<head>
<script src="webcomponents-lite.js"></script>
<link rel="import" href="prot...
What is Polymer?
Polymer({
is: 'my-namecard',
properties: {
myName: {
type: String
}
},
ready: function() {
this.textConte...
What is Polymer?
<dom-module id="my-namecard">
<template>
<div>Hi! My name is <span>{{myName}}</span></div>
</template>
<s...
What is Polymer?
<dom-module id="my-namecard">
<template>
<div>Hi! My name is <span>{{myName}}</span></div>
</template>
<s...
What is Polymer?
xc-styles/xc-styles.html:
<style is="custom-style">
:root { --si-blue-sky: #2B9CD8; }
</style>
xc-custom-...
What is Polymer?
xc-fancy-element/xc-fancy-element.html:
<style>
:host {
color: var(--xc-fancy-element-color, red);
}
</st...
What is Polymer?
xc-fancy-element/xc-fancy-element.html:
<style>
:host {
@apply(--xc-fancy-element);
}
</style>
xc-custom-...
What is Polymer?
• Behaviors (shared functionality)
• Events
• Gestures (up, down, tap, track)
• CLI Tools
• Built-in Test...
Building with
Polymer
Building with Polymer
• Use someone else’s element(s)
• Build your own element(s)
• Build an entire app with Polymer
John ...
Using Open Source
Polymer Elements
$ bower install GITHUB/ELEMENT --save
$ bower install PolymerElements/app-route --save
https://elements.polymer-project.org
https://customelements.io
Building Your Own
Polymer Element
$ polymer help
Available Commands
build Builds an application-style project
help Shows this help message,
or help for a sp...
$ polymer init
? Which starter template would you like to use?
› element: A blank element template
application: A blank ap...
Building with Polymer
• A component should do 1 thing
• Break up into smaller components
• Component doesn’t have to be vi...
Building a
Polymer App
Building with Polymer
$ npm install -g polymer-cli
$ polymer init
? Which starter template would you like to use?
element:...
Building with Polymer
? Application name cli-demo
? Main element name cli-demo-app
? Brief description of the application ...
Building with Polymer
create bower.json
create index.html
create manifest.json
create README.md
create src/cli-demo-app/cl...
Building with Polymer
Project generated!
Installing dependencies...
$ polymer serve
• Load up http://localhost:8080
John R...
Deploying with
Polymer
Deploying with Polymer
• HTML Import external components
• Bundle internal components
- vulcanize (gulp, grunt or standalo...
Custom Elements with Polymer Web Components
John Riviello – Custom Elements with Polymer Web Components58
Learning More
• ...
Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16
Custom Elements with Polymer Web Components #econfpsu16
Prochain SlideShare
Chargement dans…5
×

Custom Elements with Polymer Web Components #econfpsu16

1 115 vues

Publié le

If you haven’t explored Web Components yet, you’re missing out on a powerful tool that can greatly enhance reusability of common web elements throughout your websites and web applications. As Comcast has been updating our web properties to unify under a single UX, using Web Components with Polymer has helped make that process much more efficient. In nearly 2 years while creating hundreds of our own custom elements, we’ve learned a lot about the benefits & drawbacks to Polymer along the way. This case study will introduce Polymer & Web Components, demonstrate when Polymer is useful, when other options should be considered, and what it takes to deploy Polymer components to millions of customers.

Publié dans : Technologie
  • Soyez le premier à commenter

Custom Elements with Polymer Web Components #econfpsu16

  1. 1. Custom Elements with Polymer Web Components John Riviello @JohnRiv Distinguished Engineer, Comcast Interactive Media Elements: The Web Conference at Penn State – June 14, 2016
  2. 2. Polymer & Web Components ”250/365 - Bricks" by Kenny Louie is licensed under CC BY 2.0 Why? What? How?
  3. 3. Communicating & shipping web design & functionality updates across a large organization is HARD WORK
  4. 4. Communicating & Sharing Web Updates Across Your Organization 1. Living Style Guides 2. Tiny Bootstraps 3. AngularJS Directives 4. React Components 5. Web Standards? John Riviello – Custom Elements with Polymer Web Components4 Potential Technical Solutions:
  5. 5. YES! Web Standards! Web Components!
  6. 6. What are Web Components?
  7. 7. What are Web Components? 4 Specs John Riviello – Custom Elements with Polymer Web Components7
  8. 8. What are Web Components? Custom Elements John Riviello – Custom Elements with Polymer Web Components8
  9. 9. What are Web Components? Custom Elements John Riviello – Custom Elements with Polymer Web Components9 •Provides a way for authors to build their own fully-featured DOM elements. - <xc-tab>Your Wifi</xc-tab> •Can extend existing HTML elements - <button is="xc-button">Edit</button>
  10. 10. What are Web Components? HTML Imports John Riviello – Custom Elements with Polymer Web Components10
  11. 11. What are Web Components? HTML Imports John Riviello – Custom Elements with Polymer Web Components11 • Means to import custom elements - <link rel="import" href="../xc-tab/xc-tab.html"> • Can link to external resources - <link rel="import" href="http://polygit.org/components/paper- toast/paper-toast.html">
  12. 12. What are Web Components? Templates John Riviello – Custom Elements with Polymer Web Components12
  13. 13. What are Web Components? Templates John Riviello – Custom Elements with Polymer Web Components13 • Used to declare fragments of HTML - <template id="tab"> <div class="tab-content"></div> </template> • The element itself renders nothing • Can be cloned and inserted in the document via JavaScript, which will render the content
  14. 14. What are Web Components? Shadow DOM John Riviello – Custom Elements with Polymer Web Components14
  15. 15. What are Web Components? Shadow DOM John Riviello – Custom Elements with Polymer Web Components15 •Allows you to take a DOM subtree and hide it from the document scope •Hides CSS styles as well •Common examples from HTML5 include: - <select> - <video> - <input type="date">
  16. 16. Can we even use these things?
  17. 17. Source: http://jonrimmer.github.io/are-we-componentized-yet/ Are We Componentized Yet?
  18. 18. There’s hope. What’s better than hope?
  19. 19. POLYFILLS! *as long as there is still hope*
  20. 20. Web Components Polyfills webcomponents.js John Riviello – Custom Elements with Polymer Web Components20 •Custom Elements •HTML Imports •Templates •Shadow DOM •ES6 WeakMap •Mutation Observers Browser Support • IE10 (max polyfilling) • IE11+/Edge • Chrome (latest) • Firefox (latest) • Safari 7+ • Chrome Android (latest) • Mobile Safari (latest) Size: 33.3kB gzipped
  21. 21. Web Components Polyfills webcomponents-lite.js John Riviello – Custom Elements with Polymer Web Components21 •Custom Elements •HTML Imports •Templates •Shadow DOM •ES6 WeakMap •Mutation Observers Browser Support • IE10 (flaky) • IE11+/Edge • Chrome (latest) • Firefox (latest) • Safari 7+ • Chrome Android (latest) • Mobile Safari (latest) Size: 33.3kB 12.0kB gzipped
  22. 22. Lightweight Web Component Libraries
  23. 23. Lightweight Web Component Libraries X-Tag 5.0kB John Riviello – Custom Elements with Polymer Web Components23 • IE9+/Edge • Chrome (all) • Firefox (all) • Safari ”Mac” (5.1+?) • Chrome & Android 4.0+ • Mobile Safari 5+ • Opera 11+ • IE10+/Edge • Chrome 35+ • Firefox 35+ • Safari 7+ • Chrome Android (latest?) • Mobile Safari (latest?) • Opera (latest) • IE11+/Edge • Chrome (latest) • Firefox (latest) • Safari 7+ • Chrome Android (latest) • Mobile Safari 7.1+ • Opera (latest) Bosonic 9.5kB Polymer 37.2kB
  24. 24. Google Polymer
  25. 25. What is Polymer? 1. Material Design 2. A framework 3. Required to use Web Components John Riviello – Custom Elements with Polymer Web Components25 Polymer is NOT:
  26. 26. What is Polymer? <script> var proto = Object.create(HTMLElement.prototype), protoElement; proto.createdCallback = function () { this.textContent = "I'm a proto-element. Check out my prototype!" }; protoElement = document.registerElement('proto-element', { prototype: proto }); </script> John Riviello – Custom Elements with Polymer Web Components26 Creating a Custom Element Natively
  27. 27. What is Polymer? <link rel="import" href="bower_components/polymer/polymer.html"> <script> Polymer({ is: "proto-element", created: function() { this.textContent = "I'm a proto-element. Check out my prototype!" } }); </script> John Riviello – Custom Elements with Polymer Web Components27 Creating a Polymer Custom Element
  28. 28. What is Polymer? <!DOCTYPE html> <html> <head> <script src="webcomponents-lite.js"></script> <link rel="import" href="proto-element.html"> </head> <body> <proto-element></proto-element> </body> </html> RESULT: I'm a proto-element. Check out my prototype! John Riviello – Custom Elements with Polymer Web Components28 Using Our Custom Element
  29. 29. What is Polymer? Polymer({ is: 'my-namecard', properties: { myName: { type: String } }, ready: function() { this.textContent = 'Hi! My name is ' + this.myName; } }); <my-namecard my-name="John"></my-namecard> RESULT: Hi! My name is John John Riviello – Custom Elements with Polymer Web Components29 Configuring Properties
  30. 30. What is Polymer? <dom-module id="my-namecard"> <template> <div>Hi! My name is <span>{{myName}}</span></div> </template> <script> Polymer({ is: 'my-namecard', properties: { myName: { type: String } } }); </script> </dom-module> John Riviello – Custom Elements with Polymer Web Components30 Data Binding <my-namecard my-name="John"> </my-namecard> RESULT: Hi! My name is John
  31. 31. What is Polymer? <dom-module id="my-namecard"> <template> <div>Hi! My name is <span>{{myName}}</span></div> </template> <style> span { font-weight: bold; } </style> <script> Polymer({ is: 'my-namecard', … John Riviello – Custom Elements with Polymer Web Components31 Encapsulated Styles <my-namecard my-name="John"> </my-namecard> <p><span>Span Text</span></p> RESULT: Hi! My name is John Span Text
  32. 32. What is Polymer? xc-styles/xc-styles.html: <style is="custom-style"> :root { --si-blue-sky: #2B9CD8; } </style> xc-custom-element/xc-custom-element.html: <link rel="import" href="../xc-styles/xc-styles.html"> <dom-module id="xc-custom-element"> <template> <style> :host { border: 1px solid var(--si-blue-sky); } </style> </template> </dom-module> John Riviello – Custom Elements with Polymer Web Components32 CSS Variables for Sharing Properties
  33. 33. What is Polymer? xc-fancy-element/xc-fancy-element.html: <style> :host { color: var(--xc-fancy-element-color, red); } </style> xc-custom-element/xc-custom-element.html: <link rel="import" href="../xc-fancy-element/xc-fancy-element.html"> <style is="custom-style"> xc-fancy-element { --xc-fancy-element-color: blue; } </style> <template><xc-fancy-element></xc-fancy-element></template> John Riviello – Custom Elements with Polymer Web Components33 CSS Variables for Custom Styles
  34. 34. What is Polymer? xc-fancy-element/xc-fancy-element.html: <style> :host { @apply(--xc-fancy-element); } </style> xc-custom-element/xc-custom-element.html: <link rel="import" href="../xc-fancy-element/xc-fancy-element.html"> <style is="custom-style"> --xc-fancy-element: { color: blue; margin: 0 auto; }; </style> <template><xc-fancy-element></xc-fancy-element></template> John Riviello – Custom Elements with Polymer Web Components34 Mixins for Custom Styles
  35. 35. What is Polymer? • Behaviors (shared functionality) • Events • Gestures (up, down, tap, track) • CLI Tools • Built-in Test Framework • Generated Documentation Pages John Riviello – Custom Elements with Polymer Web Components35 Other Features Polymer Provides
  36. 36. Building with Polymer
  37. 37. Building with Polymer • Use someone else’s element(s) • Build your own element(s) • Build an entire app with Polymer John Riviello – Custom Elements with Polymer Web Components37 How to Get Started
  38. 38. Using Open Source Polymer Elements
  39. 39. $ bower install GITHUB/ELEMENT --save $ bower install PolymerElements/app-route --save
  40. 40. https://elements.polymer-project.org
  41. 41. https://customelements.io
  42. 42. Building Your Own Polymer Element
  43. 43. $ polymer help Available Commands build Builds an application-style project help Shows this help message, or help for a specific command init Initializes a Polymer project lint Lints the project serve Runs the polyserve development server test Runs web-component-tester
  44. 44. $ polymer init ? Which starter template would you like to use? › element: A blank element template application: A blank application template shop: The "Shop" Progressive Web App demo app-drawer-template: A starter application…
  45. 45. Building with Polymer • A component should do 1 thing • Break up into smaller components • Component doesn’t have to be visual • Syndicating outside of primary use John Riviello – Custom Elements with Polymer Web Components49 Things to Consider
  46. 46. Building a Polymer App
  47. 47. Building with Polymer $ npm install -g polymer-cli $ polymer init ? Which starter template would you like to use? element: A blank element template › application: A blank application template shop: The "Shop" Progressive Web App demo app-drawer-template: A starter application… John Riviello – Custom Elements with Polymer Web Components52 Building a Polymer App
  48. 48. Building with Polymer ? Application name cli-demo ? Main element name cli-demo-app ? Brief description of the application App Demo John Riviello – Custom Elements with Polymer Web Components53 Building a Polymer App
  49. 49. Building with Polymer create bower.json create index.html create manifest.json create README.md create src/cli-demo-app/cli-demo-app.html create test/cli-demo-app/cli-demo-app_test.html John Riviello – Custom Elements with Polymer Web Components54 Building a Polymer App
  50. 50. Building with Polymer Project generated! Installing dependencies... $ polymer serve • Load up http://localhost:8080 John Riviello – Custom Elements with Polymer Web Components55 Building a Polymer App Hello cli-demo-app • View README.md for info on building & running tests • Create additional elements • Pull in external elements
  51. 51. Deploying with Polymer
  52. 52. Deploying with Polymer • HTML Import external components • Bundle internal components - vulcanize (gulp, grunt or standalone) - Polymer CLI: $ polymer build John Riviello – Custom Elements with Polymer Web Components57 External vs. Internal
  53. 53. Custom Elements with Polymer Web Components John Riviello – Custom Elements with Polymer Web Components58 Learning More • polymer-project.org • webcomponents.org • Polycasts with Rob Dodson on YouTube • 2016 Google I/O Polymer videos on YouTube • Polymer Summit videos on YouTube • Polymer Slack: polymer-slack.herokuapp.com For Further Info & Feedback: Twitter: @JohnRiv

×