Slide 1
Slide 1 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Slide 2
Slide 2 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Did you ever write front-end code?
Slide 3
Slide 3 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Did you ever write a date picker?
Slide 4
Slide 4 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
That’s the problem!
Slide 5
Slide 5 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Over 1200 Date Pickers!
Slide 6
Slide 6 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
The Dream
Slide 7
Slide 7 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Slide 8
Slide 8 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Slide 9
Slide 9 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Slide 10
Slide 10 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Slide 11
Slide 11 text
Dominik Kundel | @dkundel | #jsPolandConf |
console.log(`
Hi! I’m Dominik Kundel
`);
dkundel.com
@dkundel
[email protected]
github/dkundel
Developer Evangelist
&& JavaScript Hacker
#webComponents #useThePlatform
Slide 12
Slide 12 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
I’m not Polish
Photo by Kamil Gliwiński on Unsplash
Slide 13
Slide 13 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Slide 14
Slide 14 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
How do you share UI between
projects?
Slide 15
Slide 15 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Different approaches
Slide 16
Slide 16 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Approach 1: “Bootstrap” approach
Slide 17
Slide 17 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Approach 1: “Bootstrap” approach
Well done!
Aww yeah, you successfully read this important alert message
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Slide 18
Slide 18 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Approach 2: JavaScript API
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
Slide 19
Slide 19 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Approach 3: “Share button” style
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https: //connect.facebook.net/en_US/
sdk.js#xfbml=1&version=v2.12&appId=APP_ID&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Slide 20
Slide 20 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Approach 3: “Share button” style
Slide 21
Slide 21 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Poor Development Experience
Slide 22
Slide 22 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Wrapper Components
Slide 23
Slide 23 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Library Fragmentation
Slide 24
Slide 24 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
What if we could extend
HTMLElement
Slide 25
Slide 25 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Web Components
Slide 26
Slide 26 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Spec No. 1
Custom Elements
Slide 27
Slide 27 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Custom Elements Definition
class DatePicker extends HTMLElement {
constructor() {
super();
// ...
}
}
customElements.define('date-picker', DatePicker);
Slide 28
Slide 28 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Custom Elements Usage
// via JavaScript
document.createElement('date-picker');
Slide 29
Slide 29 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Spec No. 2
HTML Templates
Slide 30
Slide 30 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
HTML Templates
/* ... */
const tmpl = document.querySelector('#date-picker-template');
tmpl.content.cloneNode( /*deep: */ true)
Slide 31
Slide 31 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Spec No. 3
Shadow DOM
Slide 32
Slide 32 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Shadow DOM
class DatePicker extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(tmpl.content.cloneNode(true));
}
}
Slide 33
Slide 33 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Shadow DOM
I appear in the slot
#shadow-root /* "global" styles are limited to this root */Slide 34
Slide 34 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Spec No. 4
HTML Imports
Slide 35
Slide 35 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Spec No. 4
HTML Imports
Slide 36
Slide 36 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Support?
Slide 37
Slide 37 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
* with Polyfills
It’s well supported!*
Slide 38
Slide 38 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Why would I care?
Slide 39
Slide 39 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
You develop a UI component
Slide 40
Slide 40 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Same tools for everyone
Slide 41
Slide 41 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Better Developer Experience
Slide 42
Slide 42 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Example 1: WebVR with a-frame
Slide 43
Slide 43 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
glitch.com/~aframe-basic-guide
Slide 44
Slide 44 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Example 1: WebVR with a-frame
Slide 45
Slide 45 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Example 1: WebVR with a-frame
Slide 46
Slide 46 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Example 1: WebVR with a-frame
Slide 47
Slide 47 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Example 2: Progressive Enhancement
Slide 48
Slide 48 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Example 2: web-share-wrapper
Share on Twitter
Slide 49
Slide 49 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Other Examples
github.com/valdrinkoshi/virtual-scroller github.com/GoogleWebComponents/model-viewer
Slide 50
Slide 50 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Why not earlier?
Slide 51
Slide 51 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
1. Browser Support
Slide 52
Slide 52 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
2. Low Level API
Slide 53
Slide 53 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Extensible Web Manifesto
extensiblewebmanifesto.org
Slide 54
Slide 54 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Extensible Web Manifesto
• The standards process should focus on adding
new low-level capabilities to the web platform that
are secure and efficient
• The web platform should expose low-level
capabilities that explain existing features, such as
HTML and CSS, allowing authors to understand
and replicate them.
Slide 55
Slide 55 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
How The Web Sausage Gets Made
by Monica Dinculescu (@notwaldorf)
youtube.com/watch?v=326SIMmRjc8
Slide 56
Slide 56 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
3. Tooling
Slide 57
Slide 57 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Tooling Past
Slide 58
Slide 58 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Tooling Now (a few…)
Slide 59
Slide 59 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Pick Your Favorite…
Let Others Pick Theirs!
and
Slide 60
Slide 60 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Let’s build:
the last date picker
Slide 61
Slide 61 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Let’s build:
the last date picker
a rating component
Slide 62
Slide 62 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Let’s build:
I built:
the last date picker
a rating component
Slide 63
Slide 63 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
OnesieJS
Slide 64
Slide 64 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Slide 65
Slide 65 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
My tool of choice:
LitElement
Slide 66
Slide 66 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
About LitElement
• Written by the Polymer Team
• “A simple base class for creating custom elements
rendered with lit-html”
• Uses web standards (no compilation)*
• lit-html is powered by HTML templates
*Except module bundling
https: //github.com/Polymer/lit-element
Slide 67
Slide 67 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Let’s Take A Look!
Slide 68
Slide 68 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Summary
Photo by Jan Kahánek on Unsplash
Slide 69
Slide 69 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Web Components
for any shared UI
Think about
Slide 70
Slide 70 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Web Components
won’t limit
your framework choices
Slide 71
Slide 71 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Pick Your Favorite…
Let Others Pick Theirs!
and
Slide 72
Slide 72 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
webcomponents.org
Slide 73
Slide 73 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
custom-elements-everywhere.com
Slide 74
Slide 74 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
custom-elements-everywhere.com
Slide 75
Slide 75 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
github.com/shprink/web-components-todo
Slide 76
Slide 76 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
Resources
• d-k.im/webcomp-stencil
•
d-k.im/jspoland
• github.com/dkundel/emoji-rating
• webcomponents.org
•
✅ custom-elements-everywhere.com
•
github.com/shprink/web-components-todo
Slide 77
Slide 77 text
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
vote.dkundel.com
Let me know what you think!
Slide 78
Slide 78 text
console.log(`
Thank You!
`);
dkundel.com
@dkundel
[email protected]
github/dkundel
d-k.im/jspoland
Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform