Introduction to Web Components & Polymer Workshop - JS Interactive
0 likes•196 views
The document outlines a workshop on web components and Polymer, held on October 10, 2018. It introduces web components as reusable and encapsulated HTML tags, discusses related technologies such as custom elements, templates, and shadow DOM, and mentions practical coding sessions for building Google Maps applications. Additional resources and links for learning about Polymer and web components are also provided.
![What Are Web Components?
5
… [built] on the Web Component standards,
will work across modern browsers, and
can be used with any JavaScript library or
framework that works with HTML.
Source: https://www.webcomponents.org/introduction
Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop](https://image.slidesharecdn.com/introductiontowebcomponentspolymerworkshop-jsinteractive-181010215429/85/Introduction-to-Web-Components-Polymer-Workshop-JS-Interactive-5-320.jpg)
![<script href="https://polaris.xfinity.com/polaris.js"></script>
<xc-header
tab="myaccount"
is-authed="[[isAuthed]]"
login-url="/login"
sign-out-url="/logout"
first-name="[[openidData.given_name]]"
user-name="[[openidData.preferred_username]]">
</xc-header>
<xc-footer></xc-footer>](https://image.slidesharecdn.com/introductiontowebcomponentspolymerworkshop-jsinteractive-181010215429/85/Introduction-to-Web-Components-Polymer-Workshop-JS-Interactive-43-320.jpg)
Introduction to Web Components & Polymer Workshop - JS Interactive
- 1. Workshop: Introduction to Web Components & Polymer Node+JS Interactive Wednesday, October 10, 2018 • 11:00am - 12:50pm John Riviello @JohnRiv Chris Lorenzo @Chiefcll
- 2. Workshop materials are available at: http://tinyurl.com/ nodejsint-polymer -workshop
- 4. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop4 … a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps... Source: https://www.webcomponents.org/introduction
- 5. What Are Web Components? 5 … [built] on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Source: https://www.webcomponents.org/introduction Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 6. What Are Web Components? 6 4 Specs Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 7. What Are Web Components? 7 Custom Elements Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 8. What Are Web Components? 8 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 9. What Are Web Components? 9 Custom Elements •Provides a way for authors to build their own fully-featured DOM elements. <paper-tabs selected="0" scrollable> <paper-tab>The first tab</paper-tab> <paper-tab>Tab two</paper-tab> <paper-tab>The third tab</paper-tab> <paper-tab>Fourth tab</paper-tab> </paper-tabs> Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 10. What Are Web Components? 10 HTML Imports Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 11. What Are Web Components? 11 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 12. • Means to import custom elements - <link rel="import" href="paper-tabs.html"> • Componetize the HTML, CSS & JavaScript • Built-in deduplication What Are Web Components? 12 HTML Imports Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 13. What Are Web Components? 13 Templates Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 14. What Are Web Components? 14 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 15. What Are Web Components? 15 • 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 quickly render the content Templates Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 16. What Are Web Components? 16 Shadow DOM Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 17. What Are Web Components? 17 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 18. What Are Web Components? 18 •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"> Shadow DOM Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 19. Can we even use these things?
- 20. 20 Source: https://www.webcomponents.org/ Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 21. 21 Source: https://www.webcomponents.org/ Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 22. 22 Source: https://www.webcomponents.org/ Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 23. 23 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 24. 24 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 25. 25 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 32. Let’s code!
- 33. Codelab: Build Google Maps using Web Components & No Code! tinyurl.com/comcast-polymer-map
- 34. Codelab: Build Google Maps using Web Components & No Code! 34 Codelab URL: tinyurl.com/comcast-polymer-map Relevant Map Data: •latitude="49.2892" •longitude="-123.1169" •start-address="1055 Canada Place" •end-address="TELUS Garden" Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 35. Takeaways!
- 36. Intro to Web Components & Polymer Framework/Library Sizes (with GZIP compression) 36 Source: http://minime.stephan-brumme.com React’s size is react + react-dom & gzipped via http://cnvyr.io/online Polymer’s size is polymer-element.js bundled, minified & gzipped. 113.7kb 59.0kb 29.2kb30.4kb35.0kb v3.0.0 v1.7.4 v3.3.1v2.5.17 v3.0.5v16.5.2 19.8kb Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 37. Break
- 38. Codelab: Build Google Maps using Web Components & No Code! 38 Back early? Try these BONUS challenges! 1. Select “DRIVING” by default - Hint: check out the Properties listed at www.webcomponents.org/element/PolymerElements/ paper-tabs/elements/paper-tabs#properties 2. Improve the styles for the search box Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 39. Codelab Part 2: Build a Toast Web Components & With Code! tinyurl.com/comcast-toast
- 40. Let’s code!
- 41. Takeaways!
- 45. 45 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/comcast-polymer-workshop Angular ElementsVueJS Elements Framework Components as Custom Elements
- 46. 46 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/comcast-polymer-workshop Other Frameworks for building Web Components Skate JS X-Tag < >XX-Tag
- 48. “Assemblers First, Craftspeople Second” - Ben Issa, 2016 Polymer Summit Intro to Web Components & Polymer 48 "Puzzle Pieces Jigsaw Piece Concept" is licensed under CC0 1.0 / Color adjusted from original "Blacksmith Forging Smith Forger" is licensed under CC0 1.0 / Color adjusted from original Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/comcast-polymer-workshop
- 49. Useful Links • WebComponents.org - webcomponents.org • Polymer Website - polymer-project.org • Polymer Slack - polymer-slack.herokuapp.com • Polymer 2.x Cheat Sheet - https://meowni.ca/posts/polymer-2-cheatsheet/ • How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/ • PWAs with Polymer: a checklist - https://meowni.ca/posts/polymer-pwa-checklist/ • Custom Elements Everywhere - https://custom-elements-everywhere.com/ • Polycasts on YouTube - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN • 2018 Google I/O Polymer videos - https://www.polymer-project.org/blog/2018-05-09-polymer-at-io-2018 • 2017 Polymer Summit videos on YouTube - https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi • End-to-End Polymer Apps - 2017 Chrome Dev Summit video - https://youtu.be/Wu2GCRkDecI • 2017 Google I/O Polymer videos on YouTube - https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m 49 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 50. Thank you! John Riviello @JohnRiv Chris Lorenzo @Chiefcll