Download to read offline
![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)
Uploaded byJohn Riviello
Introduction to Web Components & Polymer Workshop - JS Interactive
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.
More Related Content
Similar to Introduction to Web Components & Polymer Workshop - JS Interactive
Introduction to Web Components & Polymer Workshop - JS Interactive
- 1. Workshop: Introduction to WebComponents & Polymer Node+JS Interactive Wednesday, October 10, 2018 • 11:00am - 12:50pm John Riviello @JohnRiv Chris Lorenzo @Chiefcll
- 2. Workshop materials areavailable at: http://tinyurl.com/ nodejsint-polymer -workshop
- 3.
- 4. What Are WebComponents? 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 WebComponents? 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 WebComponents? 6 4 Specs Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 7. What Are WebComponents? 7 Custom Elements Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 8. What Are WebComponents? 8 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 9. What Are WebComponents? 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 WebComponents? 10 HTML Imports Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 11. What Are WebComponents? 11 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 12. • Means toimport 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 WebComponents? 13 Templates Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 14. What Are WebComponents? 14 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 15. What Are WebComponents? 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 WebComponents? 16 Shadow DOM Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 17. What Are WebComponents? 17 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 18. What Are WebComponents? 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 evenuse these things?
- 20. 20 Source: https://www.webcomponents.org/ Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 21. 21 Source: https://www.webcomponents.org/ Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 22. 22 Source: https://www.webcomponents.org/ Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 23. 23 Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 24. 24 Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 25. 25 Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/nodejsint-polymer-workshop
- 26.
- 27.
- 31.
- 32.
- 33. Codelab: Build Google Mapsusing Web Components & No Code! tinyurl.com/comcast-polymer-map
- 34. Codelab: Build GoogleMaps 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.
- 36. Intro to WebComponents & 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.
- 38. Codelab: Build GoogleMaps 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: Builda Toast Web Components & With Code! tinyurl.com/comcast-toast
- 40.
- 41.
- 42.
- 43.
- 45. 45 Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/comcast-polymer-workshop Angular ElementsVueJS Elements Framework Components as Custom Elements
- 46. 46 Workshop: Introductionto Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/comcast-polymer-workshop Other Frameworks for building Web Components Skate JS X-Tag < >XX-Tag
- 47.
- 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 ChrisLorenzo @Chiefcll