Workshop: Introduction to Web Components & Polymer

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

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

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

… [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

4 Specs

Custom Elements

Custom Elements
•Provides a way for authors to build their own
fully-featured DOM elements.
- <xc-tab>Your Wifi</xc-tab>

HTML Imports

• Means to import custom elements
- <link rel="import" href="../xc-tab/xc-tab.html">
• Componetize the HTML, CSS & JavaScript
• Built-in deduplication
HTML Imports

Templates

• 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

Shadow DOM

•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

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

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

Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html
v0
v0

A Bit of History
v0.3
“Experimental”
v0.5
“Still Learning”
v0.8
“Beta”

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

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

Polymer 3.0
(Early Access Preview)

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

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

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

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

Codelab: Build Google Maps using Web Components & No Code!
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"

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

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

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

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

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

Codelab: Build a Polymer 2.0 App From Scratch!
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

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>

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

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

Thank you!
John Riviello
@JohnRiv
Chris Lorenzo
@Chiefcll

Workshop: Introduction to Web Components & Polymer

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Workshop: Introduction to Web Components & Polymer

Similaire à Workshop: Introduction to Web Components & Polymer (20)

Plus de John Riviello

Plus de John Riviello (7)

Dernier

Dernier (20)

Workshop: Introduction to Web Components & Polymer