From Drupaldelphia 2018
If you haven’t explored Web Components yet, you’re missing out on a powerful tool that can greatly enhance reusability of common web elements throughout your websites and web applications. As Comcast has been updating our web properties to unify under a single UX, using Web Components with Polymer has helped make that process much more efficient.
This session will introduce you to what exactly Web Components are and how to use them. We’ll also cover building Web Components with Polymer, the most popular Web Component library. You’ll get to hear how Comcast is using the web platform to build its next generation single page apps & websites using the latest browser APIs.
You’ll also learn about how easy it is to onboard a team to using Polymer, tips for sharing components with other websites & across teams, and best practices Comcast has established for efficient development of Web Components.
10. React is all about building reusable components.
In fact, with React the only thing you do is build
components. Since they're so encapsulated,
components make code reuse, testing, and
separation of concerns easy.
Source: https://facebook.github.io/react/docs/why-react.html
17. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll17
4 Specs
18. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll18
Custom Elements
19. What Are Web Components?
19
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>
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll
20. What Are Web Components?
20 Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll
21. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll21
HTML Imports
22. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll22
HTML Imports
• Means to import custom elements
- <link rel="import" href="../paper-tabs/paper-tabs.html">
• Built-in deduplication
• Componetize the HTML, CSS & JavaScript
• Will be replaced by ES6 Modules
- import "../paper-tabs/paper-tabs.js"
23. What Are Web Components?
23 Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll
24. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll24
Templates
25. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll25
• 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 render the content
Templates
26. What Are Web Components?
26 Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll
27. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll27
Shadow DOM
28. What Are Web Components?
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll28
•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
29. What Are Web Components?
29 Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll
31. Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll31
Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html
32. Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll32
Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
33. 33 Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll
49. “The Way of the Web” - Ben Issa, ING
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll49
Source: https://youtu.be/8ZTFEhPBJEE?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
50. “Assemblers First, Craftspeople
Second”
- Ben Issa, 2016 Polymer Summit
Using Web Components
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll50
"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
54. Using Web Components
• Import the component
- <link rel="import" href="../iron-pages/iron-pages.html">
- import "../iron-pages/iron-pages.js"
• Use your custom element as a normal HTML tag
- <iron-pages>
<div>Page 1 content</div>
<div>Page 2 content</div>
</iron-pages>
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll54
61. Using Web Components
Polymer is NOT
• Material Design
• Required to use Web Components
• A framework
• Heavy
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll61
62. Intro to Web Components & Polymer
Framework/Library Sizes (with GZIP compression)
62
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.2kb30.4kb 12.8kb -
21.6kb
33.3kb
v3.0.0 v1.6.9 v3.3.1v2.5.16 v2.6.0v16.3.0
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll
73. $ polymer help
Available Commands
analyze Writes analysis metadata in JSON format to standard out
build Builds an application-style project
help Shows this help message, or help for a specific command
init Initializes a Polymer project
install installs Bower dependencies,
optionally installing "variants"
lint Identifies potential errors in your code.
serve Runs the polyserve development server
test Runs web-component-tester
74. $ polymer help
Available Commands
analyze Writes analysis metadata in JSON format to standard out
build Builds an application-style project
help Shows this help message, or help for a specific command
init Initializes a Polymer project
install installs Bower dependencies,
optionally installing "variants"
lint Identifies potential errors in your code.
serve Runs the polyserve development server
test Runs web-component-tester
75. $ polymer init
? Which starter template would you like to use? (Use arrow keys)
❯ polymer-1-element - A simple Polymer 1.0 element template
polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo
76. $ polymer init
? Which starter template would you like to use? (Use arrow keys)
polymer-1-element - A simple Polymer 1.0 element template
❯ polymer-2-element - A simple Polymer 2.0 element template
polymer-1-application - A simple Polymer 1.0 application template
polymer-2-application - A simple Polymer 2.0 application
polymer-1-starter-kit - A Polymer 1.x starter application template,
with navigation and "PRPL pattern" loading
polymer-2-starter-kit - A Polymer 2.x starter application template,
with navigation and "PRPL pattern" loading
shop - The "Shop" Progressive Web App demo
77. $ polymer init
? Which starter template would you like to use? polymer-2-element
info: Running template polymer-2-element...
? Element name my-element
? Brief description of the element My sample element
create bower.json
create demo/index.html
create index.html
create polymer.json
create README.md
create my-element.html
create test/my-element_test.html
Project generated!
Installing dependencies...
78.
79.
80.
81. <!--
Material design:
[Tabs](https://www.google.com/design/s
pec/components/tabs.html)
`paper-tabs` makes it easy to explore
and switch between different views or
functional aspects of
an app, or to browse categorized data
sets.
Use `selected` property to get or set
the selected tab.
Example:
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
82.
83. <!--
### Styling
The following custom properties and
mixins are available for styling:
Custom property | Description |
Default
----------------|-------------|-------
---
`--paper-tabs-selection-bar-color` |
Color for the selection bar | `--
paper-yellow-a100`
`--paper-tabs-selection-bar` | Mixin
applied to the selection bar | `{}`
`--paper-tabs` | Mixin applied to the
tabs | `{}`
`--paper-tabs-content` | Mixin applied
to the content container of tabs |
`{}`
`--paper-tabs-container` | Mixin
applied to the layout container of
84.
85. /**
* If true, the tabs are aligned
to bottom (the selection bar
appears at the top).
*/
alignBottom: {
type: Boolean,
value: false
},
/**
* If true, tabs are
automatically selected when
focused using the
* keyboard.
*/
autoselect: {
type: Boolean,
value: false
},
86. Documenting Your Polymer Code
• Document with JSDoc syntax - usejsdoc.org
• Create a page that imports & includes iron-component-page
• Generate the docs and load your page:
$ npm i -g polymer-cli bower
$ polymer analyze > analysis.json
$ polymer serve --open
Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll86
Additional Details: https://github.com/PolymerElements/iron-component-page
114. “How to use Redux in Polymer -- Polycasts #61” - Rob Dodson
Web Components: The Future of Web Development is Here114
Source: https://youtu.be/PahsgJn0sgU?list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo
115. Important Concepts to Understand
• Encapsulation
• Composition
• Separation of
Concerns
• Functional
Decomposition
"separated" by hansol is licensed under CC BY 2.0