From Little Rock Tech Fest 2017
With the updates to iOS and Android phones released earlier this year, Web Components are now supported natively. With libraries such as Polymer that are built on top of Web Components, it is now possible to easily create fast Progressive Web Apps (PWAs) without the overhead of a framework. In this workshop, we'll begin with a brief introduction to Web Components and Polymer, and then dive into hands-on experiences with the core aspects of Web Components: the <template> tag, Custom Elements, and the Shadow DOM.
This workshop assumes an understanding of HTML, CSS & JavaScript. No prior experience with Web Components, Polymer, or any library or framework (Web Components or otherwise) is required.
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
22. A Bit of History
Declaration of Independence (1819), by John Trumbull is available in the US Public Domain. Color adjusted from original
23. 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
24. 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”
25.
26. 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
27. 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
31. Polymer 3.0
• ES Modules instead of HTML Imports
• Templates (HTML & CSS) move to JS
• Install components via NPM (with Yarn)
instead of Bower
32. 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
40. 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"
41. 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
42. 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
43. 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
44. Demo:
Little Rock Tech Fest Speaker Info
As A Web Component
<lrtf-speaker> </lrtf-speaker>
46. 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
47. 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>
48. 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
49. 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