Introduction to Web Components & Polymer Workshop - U of I WebCon
Download as PPTX, PDF1 like259 views
This document summarizes a workshop on web components and Polymer. The workshop was held at the University of Illinois on April 4, 2018 and presented by John Riviello and Chris Lorenzo. It began with an introduction to web components, including the four specifications that define them: custom elements, HTML imports, templates, and shadow DOM. The document then discussed what Polymer is and its history and versions. It provided an overview of Polymer 2.0 and 3.0. The workshop concluded with coding exercises to build a map using web components and a toast notification, as well as a takeaways section on assembling web components.
![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/webcon-polymer](https://image.slidesharecdn.com/introductiontowebcomponentspolymer-illinois-180404131139/85/Introduction-to-Web-Components-Polymer-Workshop-U-of-I-WebCon-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/introductiontowebcomponentspolymer-illinois-180404131139/85/Introduction-to-Web-Components-Polymer-Workshop-U-of-I-WebCon-55-320.jpg)
Introduction to Web Components & Polymer Workshop - U of I WebCon
- 1. Workshop: Introduction to Web Components & Polymer University of Illinois WebCon – April 4, 2018 John Riviello @JohnRiv Chris Lorenzo @Chiefcll
- 2. Workshop materials are available at: http://tinyurl.com/ webcon-polymer If you haven’t already, go there now :-)
- 4. What Are Web Components? Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer4 … 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/webcon-polymer
- 6. What Are Web Components? 6 4 Specs Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 7. What Are Web Components? 7 Custom Elements Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 8. What Are Web Components? 8 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/webcon-polymer
- 9. What Are Web Components? 9 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 10. What Are Web Components? 10 HTML Imports Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 11. • Means to import custom elements - <link rel="import" href="paper-tabs.html"> • Componetize the HTML, CSS & JavaScript • Built-in deduplication What Are Web Components? 11 HTML Imports Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 12. What Are Web Components? 12 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 13. What Are Web Components? 13 Templates Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 14. What Are Web Components? 14 • 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/webcon-polymer
- 15. What Are Web Components? 15 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 16. What Are Web Components? 16 Shadow DOM Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 17. What Are Web Components? 17 •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/webcon-polymer
- 18. What Are Web Components? 18 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 19. Can we even use these things?
- 20. 20 Source: https://www.webcomponents.org/ Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 21. Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer21 Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
- 22. Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer22 Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
- 28. A Bit of History Declaration of Independence (1819), by John Trumbull is available in the US Public Domain. Color adjusted from original
- 29. 29 Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html v0 v0 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 30. A Bit of History 30 v0.3 “Experimental” v0.5 “Still Learning” v0.8 “Beta” Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 32. 32 Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom Custom Elements v1 Shadow DOM v1 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 33. Polymer 2.0 • Uses the v1 specs • ES6 class syntax to define a Custom Element • Introduced hybrid element syntax, which works in Polymer 2.x & ^1.7
- 34. 34 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 35. 35 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 37. Polymer 3.0 • ES Modules instead of HTML Imports • Templates (HTML & CSS) move to JS • Install components via NPM (with Yarn) instead of Bower
- 38. Polymer 3.0 • Official release sometime in 2018 • The Polymer Modulizer will help with updating from 2 to 3 • Roadmap is available on GitHub at https://github.com/Polymer/project/blob/master/Roadmap.md
- 39. 39 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 40. 40 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 41. 41 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 42. 42 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 44. Let’s code!
- 45. Codelab: Build Google Maps using Web Components & No Code! tinyurl.com/comcast-polymer-map
- 46. Codelab: Build Google Maps using Web Components & No Code! 46 Codelab URL: tinyurl.com/comcast-polymer-map Relevant Map Data: •latitude="40.0934616" •longitude="-88.2370608" •start-address="I Hotel and Conference Center" •end-address="Virginia Theatre" Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 47. Takeaways!
- 48. Intro to Web Components & Polymer Framework/Library Sizes (with GZIP compression) Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer48 Source: http://minime.stephan-brumme.com React’s size is react + react-dom & gzipped via http://cnvyr.io/online Polymer’s range is v2.6.0 with just polymer-element.html, to polymer.html without the legacy imports. Bundled, minified & gzipped. 113.7kb 57.2kb 29.2kb30.4kb 12.8kb - 21.6kb 33.3kb v3.0.0 v1.6.9 v3.3.1v2.5.16 v2.6.0v16.3.0
- 49. Break
- 50. Codelab: Build Google Maps using Web Components & No Code! 50 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/webcon-polymer
- 51. Codelab Part 2: Build a Toast Web Components & With Code! tinyurl.com/comcast-toast
- 52. Let’s code!
- 53. Takeaways!
- 58. “Assemblers First, Craftspeople Second” - Ben Issa, 2016 Polymer Summit Intro to Web Components & Polymer Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer58 "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
- 59. Codelab: Build a Polymer 2.0 App From Scratch tinyurl.com/comcast-polymer-app
- 60. Codelab: Build a Polymer 2.0 App From Scratch! 60 BONUS Challenges! 1. Add some :focus styles 2. Fix the 404 for /data/svg/.svg 3. Have the “ANOTHER!” button NOT reload the page 4. Write Tests 5. Progressive Web App For the answers, see the commits to https://github.com/ComcastSamples/polymer-whose-flag/commits/steps Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer
- 61. 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 • 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 Workshop: Introduction to Web Components & Polymer - @JohnRiv @chiefcll - tinyurl.com/webcon-polymer61
- 62. Thank you! John Riviello @JohnRiv Chris Lorenzo @Chiefcll