Web Components are 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. With libraries such as Polymer that is built on top of Web Components, it is now possible to easily create fast Progressive Web Apps (PWAs) without the overhead of a framework. This workshop is a hands-on introduction to Web Components and the Polymer library. You will learn how to build your own components with both vanilla JavaScript and Polymer using the newly released Polymer 3.0 library, as well as assemble a simple PWA using existing open source Web Components. John & Chris will also cover Custom Properties (CSS Variables), which are supported natively in all of today's modern browsers and polyfill for older browsers by Polymer, to style our custom elements.

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

3. WEB COMPONENTS

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

26. What’s
Google Polymer?

27. Google Polymer Project

31. Polymer 3.0
https://www.polymer-project.org/3.0/
docs/devguide/feature-overview

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!

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

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

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

47. Source: https://elix.org/

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