1.
Workshop:
Introduction to Web Components & Polymer
Little Rock Tech Fest - October 5, 2017
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll

2.
Workshop materials are available at:
http://tinyurl.com/
lrtf-polymer
If you haven’t already, go there now :-)

3.
WEB COMPONENTS

4.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-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?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer5
… [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

6.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer6
4 Specs

7.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer7
Custom Elements

8.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer8
Custom Elements
•Provides a way for authors to build their own
fully-featured DOM elements.
- <xc-tab>Your Wifi</xc-tab>

9.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer9
HTML Imports

10.
• Means to import custom elements
- <link rel="import" href="../xc-tab/xc-tab.html">
• Componetize the HTML, CSS & JavaScript
• Built-in deduplication
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer10
HTML Imports

11.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer11
Templates

12.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer12
• 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

13.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer13
Shadow DOM

14.
What Are Web Components?
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer14
•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

15.
Can we even use
these things?

16.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer16
Source: https://www.webcomponents.org/

17.
What’s
Google Polymer?

18.
Google Polymer Project

19.
A Bit of History
Declaration of Independence (1819), by John Trumbull is available in the US Public Domain. Color adjusted from original

20.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer23
Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html
v0
v0

21.
A Bit of History
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer24
v0.3
“Experimental”
v0.5
“Still Learning”
v0.8
“Beta”

22.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer26
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

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

24.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer28

25.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer29

26.
Polymer 3.0
(Early Access Preview)

27.
Polymer 3.0
• ES Modules instead of HTML Imports
• Templates (HTML & CSS) move to JS
• Install components via NPM (with Yarn)
instead of Bower

28.
Polymer 3.0
• Official release won’t be until Dec ’17
• At least 1 browser must natively
support dynamic imports:
import(`module.js`).then(module =>
{ module.doSomething(); })
• Tool will help with updating from 2 to 3

29.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer33

30.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer34

31.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer35

32.
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer36

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

34.
Let’s code!

35.
Codelab:
Build Google Maps using
Web Components & No Code!
tinyurl.com/lrtf-polymer-map

36.
Codelab: Build Google Maps using Web Components & No Code!
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer40
Steps 3-5 - Relevant Map Data:
•latitude="34.7489045"
•longitude="-92.2711374"
•start-address="Statehouse Convention Center"
•end-address="Rock Town Distillery"
Step 5: item-icon becomes slot="item-icon"

37.
Codelab: Build Google Maps using Web Components & No Code!
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer41
Step 6 - Polymer 2.x Hybrid dom-bind syntax:
<dom-bind>
<template is="dom-bind">...</template>
</dom-bind>
More info:
https://www.polymer-project.org/2.0/docs/upgrade
#convert-template-extension-elements-at-the-document-level

38.
Codelab: Build Google Maps using Web Components & No Code!
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer42
Step 7 - Polymer 2.x Hybrid custom-style syntax:
<custom-style>
<style is="custom-style">...</style>
</custom-style>
More info:
https://www.polymer-project.org/2.0/docs/upgrade
#wrap-custom-style-elements

39.
Codelab: Build Google Maps using Web Components & No Code!
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer43
BONUS Challanges!
1. Select “DRIVING” by default
- Hint: check out the Properties listed
www.webcomponents.org/element/PolymerElements/
paper-tabs/elements/paper-tabs
2. Improve the styles for the search box

40.
Demo:
Little Rock Tech Fest Speaker Info
As A Web Component
<lrtf-speaker> </lrtf-speaker>

41.
Codelab:
Build a Polymer 2.0 App From Scratch
tinyurl.com/lrtf-polymer-app

42.
Codelab: Build a Polymer 2.0 App From Scratch!
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer46
Step 5 Notes:
1. No need to bower install throughout this Codelab
2. The 2nd time it has you preview the app, the flag WILL
appear because the SVG is already in your project
3. You can skip the “Set up data for the app” section
since the data is already in your project

43.
Codelab: Build a Polymer 2.0 App From Scratch!
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer47
Step 7 Notes:
When you’re asked to look for this code:
<paper-button id="optionA">Brazil</paper-button>
<paper-button id="optionB">Uruguay</paper-button>
The code is actually:
<paper-button id="optionA" class="answer">Brazil</paper-button>
<paper-button id="optionB" class="answer">Uruguay</paper-button>

44.
Codelab: Build a Polymer 2.0 App From Scratch!
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer48
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

45.
Useful Links
•WebComponents.org - webcomponents.org
• Polymer Website - polymer-project.org
• Polymer Slack - polymer-slack.herokuapp.com
• PWAs with Polymer: a checklist - https://meowni.ca/posts/polymer-pwa-checklist/
• How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/
• Polycasts on YouTube -
https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
- Top recommended Polycast to watch: Data Binding 101 -
https://youtu.be/1sx6YNn58OQ?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
• 2017 Polymer Summit videos on YouTube -
https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi
• 2017 Google I/O Polymer videos on YouTube -
https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m
•Web Components & Polymer - 2016 Chrome Dev Summit video - https://youtu.be/Ihdp63FaRKA
Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/lrtf-polymer49

46.
Thank you!
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll