Watch your back, Browser! You're being observed.

Transcript

1. 1.

   Watch your back, Browser! You're being observed. @stefanjudis

2. 2.

   Stefan Judis Frontend Developer, Occasional Teacher, Meetup Organizer ❤ Open

   Source, Performance and Accessibility ❤ @stefanjudis
3. 3.

   None
4. 4.

   I'm excited about conferences and meetups

5. 5.

   The web platform evolves really fast these days

6. 6.

   Staying up to date is part of our job

7. 7.

   JavaScript Ecosystem

8. 8.

   Browser APIs adapt common use cases

9. 9.

   Browser APIs adapt common use cases pull

10. 10.

    Browser APIs adapt common use cases pull push

11. 11.

    Let's celebrate!

12. 12.

    None
13. 13.

    None
14. 14.

    codepen.io/thebabydino/pen/RRRRZE

15. 15.

    codepen.io/thebabydino/pen/RRRRZE

16. 16.

    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
17. 17.

    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
18. 18.

    WHAT FORCES LAYOUT / REFLOW gist.github.com/paulirish/5d52fb081b3570c81e3a

19. 19.

    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); } }); });
20. 20.

    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); } }); });
21. 21.

    Implementation with 'scroll' 60FPS 1s / 60 16ms

22. 22.

    Implementation with 'scroll' 60FPS 1s / 60 10ms 16ms

23. 23.

    None
24. 24.

    None
25. 25.

    None
26. 26.

    None
27. 27.

    Intersection Observer

28. 28.

    - 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)); })();
29. 29.

    - 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)); })();
30. 30.

    - 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)); })();
31. 31.

    (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 -
32. 32.

    None
33. 33.

    None
34. 34.

    Measure it!

35. 35.

    - 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
36. 36.

    - 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
37. 37.

    - 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
38. 38.

    // 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/
39. 39.

    - Intersection Observer - threshold = 0 viewport

40. 40.

    - Intersection Observer - threshold = 0 entry => {

    console.log(entry.isIntersecting) // true console.log(entry.intersectionRatio) // sth. around 0 } viewport
41. 41.

    - Intersection Observer - threshold = 0 entry => {

    console.log(entry.isIntersecting) // false console.log(entry.intersectionRatio) // 0 } viewport
42. 42.

    - Intersection Observer - threshold > 0 (e.g. 0.5) viewport

43. 43.

    - Intersection Observer - threshold > 0 (e.g. 0.5) entry

    => { console.log(entry.isIntersecting) // true console.log(entry.intersectionRatio) // sth. around 0.5 } viewport
44. 44.

    - Intersection Observer - threshold > 0 (e.g. 0.5) entry

    => { console.log(entry.isIntersecting) // true console.log(entry.intersectionRatio) // sth. around 0.5 } viewport
45. 45.

    - 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); }
46. 46.

    - 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); }
47. 47.

    twitter.com/jaffathecake/status/857537625154097152

48. 48.

    twitter.com/jaffathecake/status/857537625154097152

49. 49.

    - Intersection Observer - caniuse.com/#feat=intersectionobserver * in development *

50. 50.

    - Intersection Observer - * Incompatibilities between spec and implementations

    github.com/WICG/IntersectionObserver/issues/222 github.com/WICG/IntersectionObserver/issues/211
51. 51.

    - Intersection Observer - * Incompatibilities between spec and implementations

    github.com/WICG/IntersectionObserver/issues/222 github.com/WICG/IntersectionObserver/issues/211 Resolved since Oct 17, 2017
52. 52.

    - Intersection Observer - Polyfillable? github.com/WICG/IntersectionObserver YES!

53. 53.

    Let's celebrate the whole schedule!

54. 54.

    None
55. 55.

    None
56. 56.

    - Intersection Observer - (function() { // Intersection Observer code

    // third-party implementation // No interface to hook into // No access to the implementation // (ಥ_ಥ) (ಥ_ಥ) (ಥ_ಥ) })();
57. 57.

    Mutation Observer

58. 58.

    - 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); })();
59. 59.

    (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 -
60. 60.

    (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 -
61. 61.

    (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 -
62. 62.

    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 -
63. 63.

    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 -
64. 64.

    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 -
65. 65.

    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 -
66. 66.

    caniuse.com/#feat=mutationobserver - Mutation Observer -

67. 67.

    But let's always watch out for performance

68. 68.

    WAYS TO MEASURE PERFORMANCE Synthetic Monitoring Real User Monitoring

69. 69.

    None
70. 70.

    None
71. 71.

    None
72. 72.

    REAL USER METRICS (RUM) NAVIGATION TIMING API RESOURCE TIMING API

    USER TIMING API
73. 73.

    - Navigation Timing API - w3c.github.io/navigation-timing/ window.performance.timing

74. 74.

    - 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
75. 75.

    - Navigation Timing API - w3c.github.io/navigation-timing/

76. 76.

    - Resource Timing API - window.performance.getEntriesByType('resource')

77. 77.

    - 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')
78. 78.

    [...Array(20)].forEach(cornify_add); - User Timing API - w3c.github.io/user-timing/ if (talksSeen ===

    nrOfTalks) { }
79. 79.

    [...Array(20)].forEach(cornify_add); - User Timing API - w3c.github.io/user-timing/ if (talksSeen ===

    nrOfTalks) { }
80. 80.

    - 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' ); }
81. 81.

    - User Timing API - w3c.github.io/user-timing/ window.performance.getEntriesByType('mark') [ { duration:

    0 entryType: 'mark' name: 'cornify_start' startTime: 39613.885 }, ... ]
82. 82.

    - User Timing API - w3c.github.io/user-timing/ window.performance.getEntriesByType('measure') [ { duration:

    5.9900000000016 entryType: 'measure' name: 'cornify_processing_time' startTime: 46002.34500000001 }, ... ]
83. 83.

    ENTRY TYPE VALUES mark measure navigation resource ACCESSIBLE VIA getEntries

    getEntriesByType getEntriesByName
84. 84.

    Performance Observer

85. 85.

    - 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
86. 86.

    (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 -
87. 87.

    (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 -
88. 88.

    - 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
89. 89.

    - 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']});
90. 90.

    - 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']});
91. 91.

    - 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']});
92. 92.

    - 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']});
93. 93.

    None
94. 94.

    None
95. 95.

    None
96. 96.

    None
97. 97.

    <img src="hero.jpg" onload="performance.clearMarks('img displayed'); performance.mark('img displayed');"> <script> performance.clearMarks('img displayed'); performance.mark('img

    displayed'); </script> - Hero Element Timing - speedcurve.com/blog/user-timing-and-custom-metrics/
98. 98.

    - Hero Element Timing - docs.google.com/document/d/1yRYfYR1DnHtgwC4HRR04ipVVhT1h5gkI6yPmKCgJkyQ/edit <div timing=”dom, paint”></div> 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
99. 99.

    - Hero Element Timing - docs.google.com/document/d/1yRYfYR1DnHtgwC4HRR04ipVVhT1h5gkI6yPmKCgJkyQ/edit <div timing=”dom, paint”></div> 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
100. 100.

     - 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']})
101. 101.

     - 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']})
102. 102.

     LEVERAGING THE METRICS THAT MOST AFFECT USER EXPERIENCE https://www.youtube.com/watch?v=6Ljq-Jn-EgU

103. 103.

     - Performance Observer - developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver * under consideration *

104. 104.

     - Performance Observer - we'll see... Polyfillable?

105. 105.

     None
106. 106.

     I had to cheat a bit...

107. 107.

     None
108. 108.

     None
109. 109.

     Resize Observer

110. 110.

     - Resize Observer - (function() { const resizeObserver = new

     ResizeObserver(entries => { entries.forEach((entry) => { drawConfetti(entry); }); }); [...document.querySelectorAll('.hall-schedule__title')] .forEach(desc => resizeObserver.observe(desc)); })();
111. 111.

     (function() { const resizeObserver = new ResizeObserver(entries => { entries.forEach((entry)

     => { drawConfetti(entry); }); }); [...document.querySelectorAll('.hall-schedule__title')] .forEach(desc => resizeObserver.observe(desc)); })(); - Resize Observer -
112. 112.

     (function() { const resizeObserver = new ResizeObserver(entries => { entries.forEach((entry)

     => { drawConfetti(entry); }); }); [...document.querySelectorAll('.hall-schedule__title')] .forEach(desc => resizeObserver.observe(desc)); })(); - Resize Observer -
113. 113.

     - 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
114. 114.

     None
115. 115.

     None
116. 116.

     - 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);
117. 117.

     - 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);
118. 118.

     - Resize Observer -

119. 119.

     - Resize Observer -

120. 120.

     - Resize Observer - developers.google.com/web/updates/2016/10/resizeobserver * under consideration ** behind

     a flag ** * **
121. 121.

     - Resize Observer - Polyfillable? github.com/que-etc/resize-observer-polyfill so, so...

122. 122.

     But let's face the resize problem Photo by madstreetz

123. 123.

     - Event streams - element

124. 124.

     - Event streams - element initial call

125. 125.

     - Event streams - element initial call

126. 126.

     - Event streams - element initial call resize resize resize

     opening transition
127. 127.

     element initial call resize resize resize - Event streams -

     opening transition
128. 128.

     element initial call resize resize resize resize resize resize -

     Event streams - opening transition closing transition
129. 129.

     - Event streams - element initial call resize resize resize

     resize resize resize opening transition closing transition
130. 130.

     - Event streams - onResize(entry => { drawConfetti(entry); });

131. 131.

     - Event streams - onResize(entry => { drawConfetti(entry); });

132. 132.

     - Event streams - }); let isFirst = true; onResize(entry

     => { if (isFirst) { isFirst = false; return; } drawConfetti(entry);
133. 133.

     - Event streams - }); let isFirst = true; onResize(entry

     => { if (isFirst) { isFirst = false; return; } drawConfetti(entry);
134. 134.

     - 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; }
135. 135.

     Observables

136. 136.

     - Observables - A collection that arrives over time.

137. 137.

     - 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
138. 138.

     - 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
139. 139.

     - 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
140. 140.

     - Observables - It's a collection!

141. 141.

     - Observables - It's a collection! // like Array.prototype.map observable.map

     // like Array.prototype.filter observable.filter // like Array.prototype.reduce observable.reduce
142. 142.

     - Observables - function getResizeStream(elem) { return Rx.Observable.create((observer) => {

     const resizeObserver = new ResizeObserver((entries) => { entries.forEach(entry => { drawConfetti(entry); }); }); resizeObserver.observe(elem); }) }
143. 143.

     - Observables - function getResizeStream(elem) { return Rx.Observable.create((observer) => {

     const resizeObserver = new ResizeObserver((entries) => { entries.forEach(entry => { observer.next(entry); }); }); resizeObserver.observe(elem); }); }
144. 144.

     - 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
145. 145.

     - 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
146. 146.

     - 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
147. 147.

     - 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
148. 148.

     - 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
149. 149.

     - 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
150. 150.

     - 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
151. 151.

     - 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
152. 152.

     - 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
153. 153.

     - 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
154. 154.

     - 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
155. 155.

     None
156. 156.

     None
157. 157.

     Intersection Observer Mutation Observer Performance Observer Resize Observer Observables

158. 158.

     So much has changed

159. 159.

     So much will change

160. 160.

     Let's celebrate!

161. 161.

     Let's celebrate!

162. 162.

     Let's celebrate! Thanks. @stefanjudis Slides ctfl.io/watch-your-back-browser