Slide 1
Slide 1 text
Watch your back,
Browser!
You're being observed.
@stefanjudis
Slide 2
Slide 2 text
Stefan Judis
Frontend Developer, Occasional Teacher, Meetup Organizer
❤ Open Source, Performance and Accessibility ❤
@stefanjudis
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
I'm excited about
conferences and meetups
Slide 5
Slide 5 text
The web platform evolves
really fast these days
Slide 6
Slide 6 text
Staying up to date is
part of our job
Slide 7
Slide 7 text
JavaScript Ecosystem
Slide 8
Slide 8 text
Browser APIs adapt
common use cases
Slide 9
Slide 9 text
Browser APIs adapt
common use cases
pull
Slide 10
Slide 10 text
Browser APIs adapt
common use cases
pull push
Slide 11
Slide 11 text
Let's celebrate!
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
codepen.io/thebabydino/pen/RRRRZE
Slide 15
Slide 15 text
codepen.io/thebabydino/pen/RRRRZE
Slide 16
Slide 16 text
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
How to tell if a DOM element
is visible in the current viewport?
stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
Slide 17
Slide 17 text
function isElementInViewport (el) {
var rect = el.getBoundingClientRect(); // can trigger force layout/reflow
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
How to tell if a DOM element
is visible in the current viewport?
stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
Slide 18
Slide 18 text
WHAT FORCES
LAYOUT / REFLOW
gist.github.com/paulirish/5d52fb081b3570c81e3a
Slide 19
Slide 19 text
Implementation with 'scroll'
const speakers = [...document.querySelectorAll('.speaker-details')];
window.addEventListener('scroll', () => {
speakers.forEach(elem => {
if (isElementInViewport(elem)) {
elem.classList.add('party-party');
speakers.splice(speakers.indexOf(elem), 1);
}
});
});
Slide 20
Slide 20 text
Implementation with 'scroll'
const speakers = [...document.querySelectorAll('.speaker-details')];
window.addEventListener('scroll', () => { // really expensive
speakers.forEach(elem => {
if (isElementInViewport(elem)) {
elem.classList.add('party-party');
speakers.splice(speakers.indexOf(elem), 1);
}
});
});
Slide 21
Slide 21 text
Implementation with 'scroll'
60FPS
1s / 60
16ms
Slide 22
Slide 22 text
Implementation with 'scroll'
60FPS
1s / 60
10ms
16ms
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Intersection Observer
Slide 28
Slide 28 text
- Intersection Observer -
(function() {
const options = {
threshold: 1.0
};
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('party-party');
intersectionObserver.unobserve(entry.target);
}
});
}, options);
[...document.querySelectorAll('.speaker-details')]
.forEach(elem => intersectionObserver.observe(elem));
})();
Slide 29
Slide 29 text
- Intersection Observer -
(function() {
const options = {
threshold: 1.0
};
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('party-party');
intersectionObserver.unobserve(entry.target);
}
});
}, options);
[...document.querySelectorAll('.speaker-details')]
.forEach(elem => intersectionObserver.observe(elem));
})();
Slide 30
Slide 30 text
- Intersection Observer -
(function() {
const options = {
threshold: 1.0
};
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('party-party');
intersectionObserver.unobserve(entry.target);
}
});
}, options);
[...document.querySelectorAll('.speaker-details')]
.forEach(elem => intersectionObserver.observe(elem));
})();
Slide 31
Slide 31 text
(function() {
const options = {
threshold: 1.0
};
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('party-party');
intersectionObserver.unobserve(entry.target);
}
});
}, options);
[...document.querySelectorAll('.speaker-details')]
.forEach(elem => intersectionObserver.observe(elem));
})();
- Intersection Observer -
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Measure it!
Slide 35
Slide 35 text
- Intersection Observer -
const options = {
root: null,
// ☝ or document.querySelector('.foo')
// default: null
rootMargin: '10px',
// ☝ or '10% 5%' or '1px 10% 3px 12%'
// default: '0px 0px 0px 0px'
threshold: 0.5
// ☝ or [0.25, 0.5, 0.75, 1]
// default: 0
};
w3c.github.io/IntersectionObserver/#intersection-observer-interface
Slide 36
Slide 36 text
- Intersection Observer -
const options = {
root: null,
// ☝ or document.querySelector('.foo')
// default: null
rootMargin: '10px',
// ☝ or '10% 5%' or '1px 10% 3px 12%'
// default: '0px 0px 0px 0px'
threshold: 0.5
// ☝ or [0.25, 0.5, 0.75, 1]
// default: 0
};
w3c.github.io/IntersectionObserver/#intersection-observer-interface
Slide 37
Slide 37 text
- Intersection Observer -
const options = {
root: null,
// ☝ or document.querySelector('.foo')
// default: null
rootMargin: '10px',
// ☝ or '10% 5%' or '1px 10% 3px 12%'
// default: '0px 0px 0px 0px'
threshold: 0.5
// ☝ or [0.25, 0.5, 0.75, 1]
// default: 0
};
w3c.github.io/IntersectionObserver/#intersection-observer-interface
Slide 38
Slide 38 text
// this fires when:
// 1. The target begins entering the viewport (0 < ratio < 1).
// 2. The target fully enters the viewport (ratio >= 1).
// 3. The target begins leaving the viewport (1 > ratio > 0).
// 4. The target fully leaves the viewport (ratio <= 0).
let observer = new IntersectionObserver(handler, {
threshold: [0, 1]
});
- Intersection Observer -
hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox/
Slide 39
Slide 39 text
- Intersection Observer -
threshold = 0
viewport
Slide 40
Slide 40 text
- Intersection Observer -
threshold = 0
entry => {
console.log(entry.isIntersecting)
// true
console.log(entry.intersectionRatio)
// sth. around 0
}
viewport
Slide 41
Slide 41 text
- Intersection Observer -
threshold = 0
entry => {
console.log(entry.isIntersecting)
// false
console.log(entry.intersectionRatio)
// 0
}
viewport
Slide 42
Slide 42 text
- Intersection Observer -
threshold > 0
(e.g. 0.5)
viewport
Slide 43
Slide 43 text
- Intersection Observer -
threshold > 0
(e.g. 0.5)
entry => {
console.log(entry.isIntersecting)
// true
console.log(entry.intersectionRatio)
// sth. around 0.5
}
viewport
Slide 44
Slide 44 text
- Intersection Observer -
threshold > 0
(e.g. 0.5)
entry => {
console.log(entry.isIntersecting)
// true
console.log(entry.intersectionRatio)
// sth. around 0.5
}
viewport
Slide 45
Slide 45 text
- Intersection Observer -
developers.google.com/web/fundamentals/media/mobile-web-video-playback
if ('IntersectionObserver' in window) {
// Show/hide mute button based
// on video visibility in the page.
function onIntersection(entries) {
entries.forEach(function(entry) {
muteButton.hidden = video.paused || entry.isIntersecting;
});
}
var observer = new IntersectionObserver(onIntersection);
observer.observe(video);
}
Slide 46
Slide 46 text
- Intersection Observer -
developers.google.com/web/fundamentals/media/mobile-web-video-playback
if ('IntersectionObserver' in window) {
// Show/hide mute button based
// on video visibility in the page.
function onIntersection(entries) {
entries.forEach(function(entry) {
muteButton.hidden = video.paused || entry.isIntersecting;
});
}
var observer = new IntersectionObserver(onIntersection);
observer.observe(video);
}
Slide 47
Slide 47 text
twitter.com/jaffathecake/status/857537625154097152
Slide 48
Slide 48 text
twitter.com/jaffathecake/status/857537625154097152
Slide 49
Slide 49 text
- Intersection Observer -
caniuse.com/#feat=intersectionobserver
* in development
*
Slide 50
Slide 50 text
- Intersection Observer -
*
Incompatibilities
between spec and implementations
github.com/WICG/IntersectionObserver/issues/222
github.com/WICG/IntersectionObserver/issues/211
Slide 51
Slide 51 text
- Intersection Observer -
*
Incompatibilities
between spec and implementations
github.com/WICG/IntersectionObserver/issues/222
github.com/WICG/IntersectionObserver/issues/211
Resolved since
Oct 17, 2017
Slide 52
Slide 52 text
- Intersection Observer -
Polyfillable?
github.com/WICG/IntersectionObserver
YES!
Slide 53
Slide 53 text
Let's celebrate the
whole schedule!
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
- Intersection Observer -
(function() {
// Intersection Observer code
// third-party implementation
// No interface to hook into
// No access to the implementation
// (ಥ_ಥ) (ಥ_ಥ) (ಥ_ಥ)
})();
Slide 57
Slide 57 text
Mutation Observer
Slide 58
Slide 58 text
- Mutation Observer -
(function() {
const list = document.querySelector('.schedule');
const nrOfTalks = list.querySelectorAll('.speaker').length;
const config = { attributes: true, subtree: true };
let talksSeen = 0;
const mutationObserver = new MutationObserver(mutations => {
mutations.forEach((mutation) => {
if (
mutation.type === 'attributes' &&
mutation.target.classList.contains('party-party')
) {
talksSeen++;
}
})
if (talksSeen === nrOfTalks) {
[...Array(20)].forEach(cornify_add);
mutationObserver.disconnect();
}
});
mutationObserver.observe(list, config);
})();
Slide 59
Slide 59 text
(function() {
const list = document.querySelector('.schedule');
const nrOfTalks = list.querySelectorAll('.speaker').length;
const config = { attributes: true, subtree: true };
let talksSeen = 0;
const mutationObserver = new MutationObserver(mutations => {
mutations.forEach((mutation) => {
if (
mutation.type === 'attributes' &&
mutation.target.classList.contains('party-party')
) {
talksSeen++;
}
})
if (talksSeen === nrOfTalks) {
[...Array(20)].forEach(cornify_add);
mutationObserver.disconnect();
}
});
mutationObserver.observe(list, config);
})();
- Mutation Observer -
Slide 60
Slide 60 text
(function() {
const list = document.querySelector('.schedule');
const nrOfTalks = list.querySelectorAll('.speaker').length;
const config = { attributes: true, subtree: true };
let talksSeen = 0;
const mutationObserver = new MutationObserver(mutations => {
mutations.forEach((mutation) => {
if (
mutation.type === 'attributes' &&
mutation.target.classList.contains('party-party')
) {
talksSeen++;
}
})
if (talksSeen === nrOfTalks) {
[...Array(20)].forEach(cornify_add);
mutationObserver.disconnect();
}
});
mutationObserver.observe(list, config);
})();
- Mutation Observer -
Slide 61
Slide 61 text
(function() {
const list = document.querySelector('.schedule');
const nrOfTalks = list.querySelectorAll('.speaker').length;
const config = { attributes: true, subtree: true };
let talksSeen = 0;
const mutationObserver = new MutationObserver(mutations => {
mutations.forEach((mutation) => {
if (
mutation.type === 'attributes' &&
mutation.target.classList.contains('party-party')
) {
talksSeen++;
}
})
if (talksSeen === nrOfTalks) {
[...Array(20)].forEach(cornify_add);
mutationObserver.disconnect();
}
});
mutationObserver.observe(list, config);
})();
- Mutation Observer -
Slide 62
Slide 62 text
const options = {
childList: true,
// ☝ observe target's children
attributes: true,
// ☝ observe target's attributes
subtree: true,
// ☝ observe target and its descendants
...
};
dom.spec.whatwg.org/#interface-mutationobserver
- Mutation Observer -
Slide 63
Slide 63 text
const options = {
childList: true,
// ☝ observe target's children
attributes: true,
// ☝ observe target's attributes
subtree: true,
// ☝ observe target and its descendants
...
};
dom.spec.whatwg.org/#interface-mutationobserver
- Mutation Observer -
Slide 64
Slide 64 text
const options = {
childList: true,
// ☝ observe target's children
attributes: true,
// ☝ observe target's attributes
subtree: true,
// ☝ observe target and its descendants
...
};
dom.spec.whatwg.org/#interface-mutationobserver
- Mutation Observer -
Slide 65
Slide 65 text
const options = {
childList: true,
// ☝ observe target's children
attributes: true,
// ☝ observe target's attributes
subtree: true,
// ☝ observe target and its descendants
...
};
dom.spec.whatwg.org/#interface-mutationobserver
- Mutation Observer -
Slide 66
Slide 66 text
caniuse.com/#feat=mutationobserver
- Mutation Observer -
Slide 67
Slide 67 text
But let's always
watch out
for performance
Slide 68
Slide 68 text
WAYS TO MEASURE PERFORMANCE
Synthetic
Monitoring
Real User
Monitoring
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
REAL USER METRICS (RUM)
NAVIGATION
TIMING API
RESOURCE
TIMING API
USER
TIMING API
Slide 73
Slide 73 text
- Navigation Timing API -
w3c.github.io/navigation-timing/
window.performance.timing
Slide 74
Slide 74 text
- Navigation Timing API -
{
"navigationStart": 1494722965671,
"unloadEventStart": 0,
"unloadEventEnd": 0,
"redirectStart": 0,
"redirectEnd": 0,
"fetchStart": 1494722965838,
"domainLookupStart": 1494722965841,
"domainLookupEnd": 1494722972627,
"connectStart": 1494722972627,
"connectEnd": 1494722973191,
"secureConnectionStart": 1494722972815,
"requestStart": 1494722973191,
"responseStart": 1494722973667,
"responseEnd": 1494722973681,
"domLoading": 1494722973681,
"domInteractive": 1494722974288,
"domContentLoadedEventStart": 1494722974288,
"domContentLoadedEventEnd": 1494722974320,
"domComplete": 1494722974571,
"loadEventStart": 1494722974571,
"loadEventEnd": 1494722974574
}
w3c.github.io/navigation-timing/
window.performance.timing
Slide 75
Slide 75 text
- Navigation Timing API -
w3c.github.io/navigation-timing/
Slide 76
Slide 76 text
- Resource Timing API -
window.performance.getEntriesByType('resource')
Slide 77
Slide 77 text
- Resource Timing API -
[
...,
{
connectEnd: 117.69500000000001,
connectStart: 117.69500000000001,
decodedBodySize: 20133,
domainLookupEnd: 117.69500000000001,
domainLookupStart: 117.69500000000001,
duration: 846.3100000000001,
encodedBodySize: 20133,
entryType: 'resource',
fetchStart: 117.69500000000001,
initiatorType: 'img',
name: 'http://127.0.0.1:8080/image.png',
redirectEnd: 0,
redirectStart: 0,
requestStart: 962.6750000000001,
responseEnd: 964.0050000000001,
responseStart: 963.45,
secureConnectionStart: 0,
startTime: 117.69500000000001,
transferSize: 20391,
workerStart: 0
}
]
www.w3.org/TR/resource-timing-1/
window.performance.getEntriesByType('resource')
Slide 78
Slide 78 text
[...Array(20)].forEach(cornify_add);
- User Timing API -
w3c.github.io/user-timing/
if (talksSeen === nrOfTalks) {
}
Slide 79
Slide 79 text
[...Array(20)].forEach(cornify_add);
- User Timing API -
w3c.github.io/user-timing/
if (talksSeen === nrOfTalks) {
}
Slide 80
Slide 80 text
- User Timing API -
w3c.github.io/user-timing/
if (talksSeen === nrOfTalks) {
// measure how long this takes
performance.mark('cornify_start');
[...Array(20)].forEach(cornify_add);
performance.mark('cornify_end');
performance.measure(
'cornify_processing_time',
'cornify_start',
'cornify_end'
);
}
Slide 81
Slide 81 text
- User Timing API -
w3c.github.io/user-timing/
window.performance.getEntriesByType('mark')
[
{
duration: 0
entryType: 'mark'
name: 'cornify_start'
startTime: 39613.885
},
...
]
Slide 82
Slide 82 text
- User Timing API -
w3c.github.io/user-timing/
window.performance.getEntriesByType('measure')
[
{
duration: 5.9900000000016
entryType: 'measure'
name: 'cornify_processing_time'
startTime: 46002.34500000001
},
...
]
Slide 83
Slide 83 text
ENTRY TYPE VALUES
mark measure navigation resource
ACCESSIBLE VIA
getEntries getEntriesByType getEntriesByName
Slide 84
Slide 84 text
Performance Observer
Slide 85
Slide 85 text
- Performance Observer -
(function() {
const perfObserver = new PerformanceObserver(list => {
list.getEntries().forEach((entry) => {
console.log(
`Name: ${ entry.name }, Duration: ${ entry.duration }`
);
});
});
perfObserver.observe({entryTypes: ['measure']});
})();
www.w3.org/TR/performance-timeline-2/#dom-performanceobserver
Slide 86
Slide 86 text
(function() {
const perfObserver = new PerformanceObserver(list => {
list.getEntries().forEach((entry) => {
console.log(
`Name: ${ entry.name }, Duration: ${ entry.duration }`
);
});
});
perfObserver.observe({entryTypes: ['measure']});
})();
www.w3.org/TR/performance-timeline-2/#dom-performanceobserver
- Performance Observer -
Slide 87
Slide 87 text
(function() {
const perfObserver = new PerformanceObserver(list => {
list.getEntries().forEach((entry) => {
console.log(
`Name: ${ entry.name }, Duration: ${ entry.duration }`
);
});
});
perfObserver.observe({entryTypes: ['measure']});
})();
www.w3.org/TR/performance-timeline-2/#dom-performanceobserver
- Performance Observer -
Slide 88
Slide 88 text
- Performance Timeline -
The developer is encouraged to use
PerformanceObserver where possible.
Further, new performance APIs and metrics
may only be available through the
PerformanceObserver interface.
www.w3.org/TR/performance-timeline-2/#introduction
Slide 89
Slide 89 text
- Paint Timing -
www.w3.org/TR/paint-timing/
const perfObserver = new PerformanceObserver(list => {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// entry.name -> 'first-paint'
// entry.name -> 'first-contentful-paint'
} );
});
perfObserver.observe({entryTypes: ['paint']});
Slide 90
Slide 90 text
- Paint Timing -
www.w3.org/TR/paint-timing/
const perfObserver = new PerformanceObserver(list => {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// entry.name -> 'first-paint'
// entry.name -> 'first-contentful-paint'
} );
});
perfObserver.observe({entryTypes: ['paint']});
Slide 91
Slide 91 text
- Long Task -
github.com/w3c/longtasks
var perfObserver = new PerformanceObserver(function(list) {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// ...
});
});
perfObserver.observe({entryTypes: ['longtask']});
Slide 92
Slide 92 text
- Long Task -
github.com/w3c/longtasks
var perfObserver = new PerformanceObserver(function(list) {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// ...
});
});
perfObserver.observe({entryTypes: ['longtask']});
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
performance.clearMarks('img displayed');
performance.mark('img displayed');
- Hero Element Timing -
speedcurve.com/blog/user-timing-and-custom-metrics/
Slide 98
Slide 98 text
- Hero Element Timing -
docs.google.com/document/d/1yRYfYR1DnHtgwC4HRR04ipVVhT1h5gkI6yPmKCgJkyQ/edit
const perfObserver = new PerformanceObserver(list => {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// ...
});
});
perfObserver.observe({entryTypes: ['element']});
github.com/w3c/charter-webperf/issues/30
Slide 99
Slide 99 text
- Hero Element Timing -
docs.google.com/document/d/1yRYfYR1DnHtgwC4HRR04ipVVhT1h5gkI6yPmKCgJkyQ/edit
const perfObserver = new PerformanceObserver(list => {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// ...
});
});
perfObserver.observe({entryTypes: ['element']});
github.com/w3c/charter-webperf/issues/30
Slide 100
Slide 100 text
- Server Timing -
https://developer.akamai.com/blog/2017/06/07/completing-performance-analysis-server-timing/
Server-Timing: acl: 10
Server-Timing: db: 125
Server-Timing: serverName; edge.machinename.net
https://w3c.github.io/server-timing/
const perfObserver = new PerformanceObserver(function(list) {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// ...
});
})
perfObserver.observe({entryTypes: ['server']})
Slide 101
Slide 101 text
- Server Timing -
https://developer.akamai.com/blog/2017/06/07/completing-performance-analysis-server-timing/
Server-Timing: acl: 10
Server-Timing: db: 125
Server-Timing: serverName; edge.machinename.net
https://w3c.github.io/server-timing/
const perfObserver = new PerformanceObserver(function(list) {
list.getEntries().forEach((entry) => {
// Process entries
// report back for analytics and monitoring
// ...
});
})
perfObserver.observe({entryTypes: ['server']})
Slide 102
Slide 102 text
LEVERAGING
THE METRICS
THAT MOST AFFECT
USER EXPERIENCE
https://www.youtube.com/watch?v=6Ljq-Jn-EgU
Slide 103
Slide 103 text
- Performance Observer -
developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
* under consideration
*
Slide 104
Slide 104 text
- Performance Observer -
we'll see...
Polyfillable?
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
I had to cheat a bit...
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Resize Observer
Slide 110
Slide 110 text
- Resize Observer -
(function() {
const resizeObserver = new ResizeObserver(entries => {
entries.forEach((entry) => {
drawConfetti(entry);
});
});
[...document.querySelectorAll('.hall-schedule__title')]
.forEach(desc => resizeObserver.observe(desc));
})();
Slide 111
Slide 111 text
(function() {
const resizeObserver = new ResizeObserver(entries => {
entries.forEach((entry) => {
drawConfetti(entry);
});
});
[...document.querySelectorAll('.hall-schedule__title')]
.forEach(desc => resizeObserver.observe(desc));
})();
- Resize Observer -
Slide 112
Slide 112 text
(function() {
const resizeObserver = new ResizeObserver(entries => {
entries.forEach((entry) => {
drawConfetti(entry);
});
});
[...document.querySelectorAll('.hall-schedule__title')]
.forEach(desc => resizeObserver.observe(desc));
})();
- Resize Observer -
Slide 113
Slide 113 text
- Resize Observer -
Observation also fires when
watched Element is inserted/removed from DOM
watched Element display gets set to none
Observation does not fire for
triggered CSS transforms
wicg.github.io/ResizeObserver/#intro
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
- Resize Observer -
developers.google.com/web/updates/2016/10/resizeobserver
const ro = new ResizeObserver((entries) => {
document.scrollingElement.scrollTop =
document.scrollingElement.scrollHeight;
});
// Observe the scrollingElement
// for when the window gets resized
ro.observe(document.scrollingElement);
// Observe the timeline
// to process new messages
ro.observe(timeline);
Slide 117
Slide 117 text
- Resize Observer -
developers.google.com/web/updates/2016/10/resizeobserver
const ro = new ResizeObserver((entries) => {
document.scrollingElement.scrollTop =
document.scrollingElement.scrollHeight;
});
// Observe the scrollingElement
// for when the window gets resized
ro.observe(document.scrollingElement);
// Observe the timeline
// to process new messages
ro.observe(timeline);
Slide 118
Slide 118 text
- Resize Observer -
Slide 119
Slide 119 text
- Resize Observer -
Slide 120
Slide 120 text
- Resize Observer -
developers.google.com/web/updates/2016/10/resizeobserver
* under consideration
** behind a flag
**
* **
Slide 121
Slide 121 text
- Resize Observer -
Polyfillable?
github.com/que-etc/resize-observer-polyfill
so, so...
Slide 122
Slide 122 text
But let's face
the resize problem
Photo by madstreetz
Slide 123
Slide 123 text
- Event streams -
element
Slide 124
Slide 124 text
- Event streams -
element
initial call
Slide 125
Slide 125 text
- Event streams -
element
initial call
Slide 126
Slide 126 text
- Event streams -
element
initial call resize resize resize
opening transition
Slide 127
Slide 127 text
element
initial call resize resize resize
- Event streams -
opening transition
Slide 128
Slide 128 text
element
initial call resize resize resize resize resize resize
- Event streams -
opening transition
closing transition
Slide 129
Slide 129 text
- Event streams -
element
initial call resize resize resize resize resize resize
opening transition
closing transition
Slide 130
Slide 130 text
- Event streams -
onResize(entry => {
drawConfetti(entry);
});
Slide 131
Slide 131 text
- Event streams -
onResize(entry => {
drawConfetti(entry);
});
Slide 132
Slide 132 text
- Event streams -
});
let isFirst = true;
onResize(entry => {
if (isFirst) {
isFirst = false;
return;
}
drawConfetti(entry);
Slide 133
Slide 133 text
- Event streams -
});
let isFirst = true;
onResize(entry => {
if (isFirst) {
isFirst = false;
return;
}
drawConfetti(entry);
Slide 134
Slide 134 text
- Event streams -
});
let isFirst = true;
let last;
onResize(entry => {
if (isFirst) {
isFirst = false;
return;
}
if (
last && last.contentRect.height < entry.contentRect.height
) {
drawConfetti(entry);
last = entry;
}
Slide 135
Slide 135 text
Observables
Slide 136
Slide 136 text
- Observables -
A collection
that arrives over time.
Slide 137
Slide 137 text
- Observables -
function getObservableWithThreeValues () {
return new Observable((observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
}
const observer = {
next(value) { console.log('next:', value) },
error(err) { console.error(err) },
complete() { console.log('We are done') },
}
const subscription = getObservableWithThreeValues().subscribe(observer)
// next: 2
// next: 4
// next: 6
// We are done
Slide 138
Slide 138 text
- Observables -
function getObservableWithThreeValues () {
return new Observable((observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
}
const observer = {
next(value) { console.log('next:', value) },
error(err) { console.error(err) },
complete() { console.log('We are done') },
};
const subscription = getObservableWithThreeValues().subscribe(observer)
// next: 2
// next: 4
// next: 6
// We are done
Slide 139
Slide 139 text
- Observables -
function getObservableWithThreeValues () {
return new Observable((observer) => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
}
const observer = {
next(value) { console.log('next:', value) },
error(err) { console.error(err) },
complete() { console.log('We are done') },
};
const subscription = getObservableWithThreeValues().subscribe(observer);
// next: 1
// next: 2
// next: 3
// We are done
Slide 140
Slide 140 text
- Observables -
It's a collection!
Slide 141
Slide 141 text
- Observables -
It's a collection!
// like Array.prototype.map
observable.map
// like Array.prototype.filter
observable.filter
// like Array.prototype.reduce
observable.reduce
Slide 142
Slide 142 text
- Observables -
function getResizeStream(elem) {
return Rx.Observable.create((observer) => {
const resizeObserver = new ResizeObserver((entries) => {
entries.forEach(entry => {
drawConfetti(entry);
});
});
resizeObserver.observe(elem);
})
}
Slide 143
Slide 143 text
- Observables -
function getResizeStream(elem) {
return Rx.Observable.create((observer) => {
const resizeObserver = new ResizeObserver((entries) => {
entries.forEach(entry => {
observer.next(entry);
});
});
resizeObserver.observe(elem);
});
}
Slide 144
Slide 144 text
- Observables -
function getResizeStream(elem) {
return Rx.Observable.create((observer) => {
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
observer.next(entry);
})
});
resizeObserver.observe(elem);
});
}
Collection super
powers
Slide 145
Slide 145 text
- Observables -
const subscription = getResizeStream(elem);
.skip(1)
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 146
Slide 146 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1);
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 147
Slide 147 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1);
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 148
Slide 148 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1)
.pairwise();
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 149
Slide 149 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1)
.pairwise();
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 150
Slide 150 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1)
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
});
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 151
Slide 151 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1)
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
});
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 152
Slide 152 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1)
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current);
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 153
Slide 153 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1)
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current);
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!') }
});
element
initial call opening transition closing transition
Slide 154
Slide 154 text
- Observables -
const subscription = getResizeStream(elem)
.skip(1)
.pairwise()
.filter(([prev, current]) => {
return prev.contentRect.height < current.contentRect.height;
})
.map(([prev, current]) => current)
.subscribe({
next: (entry) => drawConfetti(entry),
error: console.error,
complete: () => { console.log('Complete!'); }
});
element
initial call opening transition closing transition
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
No content
Slide 157
Slide 157 text
Intersection
Observer
Mutation
Observer
Performance
Observer
Resize
Observer
Observables
Slide 158
Slide 158 text
So much has changed
Slide 159
Slide 159 text
So much will change
Slide 160
Slide 160 text
Let's celebrate!
Slide 161
Slide 161 text
Let's celebrate!
Slide 162
Slide 162 text
Let's celebrate!
Thanks.
@stefanjudis
Slides
ctfl.io/watch-your-back-browser