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.

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 :-)

3. WEB COMPONENTS

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/

23. What’s
Google Polymer?

24. Google Polymer Project

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

36. Polymer 3.0
(Preview)

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

43. Polymer 2.0
https://www.polymer-project.org/2.0/
docs/devguide/feature-overview

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!

54. © Comcast
Source: https://github.com/Comcast/polaris

55. <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>

57. Source: https://elix.org/

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