Custom Elements with Polymer Web Components #econfpsu16

369 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
369
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×