1 of 50

Workshop:

Introduction to Web Components & Polymer

John Riviello

@JohnRiv

Mid-Atlantic Developer Conference - July 13, 2018

2 of 50

Workshop materials are available at:

http://tinyurl.com/

mdc-polymer�-workshop

If you haven’t already, go there now :-)

If you haven’t already, please go to this URL and follow the instructions there to get your laptops set up.

So while I’m speaking, that’ll give all your laptops a chance to download the materials over conference WiFi.

The way this will work is:

I’m going to briefly cover the history of Web Components & Polymer
Build a mini Google Maps app just by using existing Web Components
Walk through building a Web Component from scratch
Build an app from scratch using Polymer

And Chris will be here to help out with any issues or questions people have once we get to the coding

Before I get started talking, let’s take a minute and I’d like you to introduce yourself to someone near you that you don’t know, because we’re all about to be friends and friends help each other, so if you finish early and someone needs help, there are only 2 of us but there are a lot of you, so your help is welcomed by those sitting around you.

[give that a minute]

OK, let’s talk...

3 of 50

WEB COMPONENTS

4 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

4

… 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 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

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

6 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

6

4 Specs

7 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

7

Custom Elements

8 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

8

9 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

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>

10 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

10

HTML Imports

11 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

11

12 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

12

Means to import custom elements

<link rel="import" href="paper-tabs.html">

Componetize the HTML, CSS & JavaScript
Built-in deduplication

HTML Imports

13 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

13

Templates

14 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

14

15 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

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

16 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

16

Shadow DOM

17 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

17

18 of 50

What Are Web Components?

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

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:

Shadow DOM

19 of 50

Can we even use these things?

20 of 50

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

20

Source: https://www.webcomponents.org/

21 of 50

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

21

22 of 50

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

22

23 of 50

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

23

24 of 50

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

24

Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

25 of 50

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

25

Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

26 of 50

What’s

Google Polymer?

27 of 50

Google Polymer Project

28 of 50

29 of 50

30 of 50

31 of 50

Polymer 3.0

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

32 of 50

Let’s code!

33 of 50

Codelab:

Build Google Maps using

Web Components & No Code!

tinyurl.com/comcast-polymer-map

34 of 50

Codelab: Build Google Maps using Web Components & No Code!

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

34

Codelab URL: tinyurl.com/comcast-polymer-map

Relevant Map Data:

latitude="39.2128"
longitude="-76.6719"
start-address="Maritime Conference Center"
end-address="DuClaw, Arundel Mills"

35 of 50

Takeaways!

36 of 50

Intro to Web Components & Polymer

Framework/Library Sizes (with GZIP compression)

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

36

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.2kb

30.4kb

12.8kb -

21.6kb

33.3kb

v3.0.0

v1.6.9

v3.3.1

v2.5.16

v2.6.0

v16.3.0

37 of 50

Break

38 of 50

Codelab: Build Google Maps using Web Components & No Code!

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

38

Back early? Try these BONUS challenges!

Select “DRIVING” by default

Hint: check out the Properties listed at www.webcomponents.org/element/PolymerElements/�paper-tabs/elements/paper-tabs#properties

Improve the styles for the search box

39 of 50

Codelab Part 2:

Build a Toast

Web Components & With Code!

tinyurl.com/comcast-toast

40 of 50

Let’s code!

41 of 50

Takeaways!

42 of 50

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

43 of 50

�<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>

44 of 50

45 of 50

Other Frameworks for building Web Components

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

45

Skate JS

X-Tag

< >

X

X-Tag

46 of 50

Source: https://elix.org/

47 of 50

Intro to Web Components & Polymer

“Assemblers First, Craftspeople Second”

- Ben Issa, 2016 Polymer Summit

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

47

"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

48 of 50

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

Workshop: Introduction to Web Components & Polymer - @JohnRiv - tinyurl.com/mdc-polymer-workshop

48

49 of 50

50 of 50

Thank you!

John Riviello

@JohnRiv