React in a worker, worker, worker...

22725c2d3eb331146549bf0d5d3c050c?s=47 stefan judis
May 23, 2019
Technology
1
190

React in a worker, worker, worker...

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

May 23, 2019
Tweet

More Decks by stefan judis

See All by stefan judis
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
680
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
620
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
280
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
5
3k
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
130
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
260
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
2
340
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
530
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
63

Other Decks in Technology

See All in Technology
24606216ae4bbee28494552cb71cc220?s=48 yosshi_
12
2.6k
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
0
150
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
13
1.9k
Cd823abda454a7a2065fe6fe273ae84b?s=48 viva_tweet_x
2
230
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
180
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
210
B1cc148711c6a37a5c922b6e72a4ad52?s=48 upura
1
850
93cee2893801a424aab6ce248d88b515?s=48 shimizukaz
0
190
Ecad9d801d79f6c6e5df93094690685e?s=48 sinsoku
6
830
8db231d3fe08b46242f6e0e45c95eee1?s=48 darkomesaros
0
160
46fdd2ebc85d68659b83d5eb5c6a49aa?s=48 keisukeyamashita
2
330
835671ae91e49b2637313b91dacda1db?s=48 tdys13
1
920

Featured

See All Featured
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
65
2.9k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
295
39k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
215
16k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.2k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
68
3.4k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
342
20k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
17
1.2k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.8k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
35k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k

Transcript

  1. @stefanjudis React in a worker, worker, worker, worker...

  2. @stefanjudis www.stefanjudis.com Heyo, I'm Stefan!

  3. Let's talk about CRA (create-react-app)

  4. None

  5. A classical Single Page App

  6. There are problems with typical single page apps...

  7. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html>

  8. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html>

  9. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html>

  10. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html>

  11. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html>

  12. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html> No JavaScript zzzz ...

  13. 13 Million requests for JavaScript will time out. Ian Feather

    (Buzzfeed)

  14. "We don't have any non- JavaScript users". No, all your

    users are non-JS while they're downloading your JS. Jake Archibald (Google)

  15. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html>

  16. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut

    icon" href="/favicon.ico" /> <meta name="viewport" content="[ ...]" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <title>React App </title> </head> <body> <noscript>No JavaScriptzzzz ... </noscript> <div id="root"> </div> <script src="/static/js/bundle.js"> </script> <script src="/static/js/0.chunk.js"> </script> <script src="/static/js/main.chunk.js"> </script> </body> </html> The spinner of death

  17. How can we do better?

  18. proxx.app

  19. nextjs.org www.gatsbyjs.org

  20. nextjs.org www.gatsbyjs.org Run the same React code on the server

    and client
  21. None
  22. None
  23. None
  24. None

  25. bundle.js

  26. bundle.js

  27. bundle.js Interactive

  28. Better performance!

  29. Better performance! Faster indexed by Google!

  30. Better performance! Faster indexed by Google! It's the same code

    front to back!

  31. But is it really the same code?

  32. module.exports = global.fetch = global.fetch || (typeof process == 'undefined'

    ? require('unfetch').default || require('unfetch') : function(url, opts) { return require('node-fetch')(url.replace(/^\/\ //g, 'https: //'), opts); });

  33. github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch

  34. What if we serve HTML from an environment with the

    same methods?

  35. The Service Worker worker.js

  36. if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/worker.js') .then(function(registration) {}, function(err)

    {}); }

  37. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit

    - return response if (response) { return response; } return fetch(event.request); } ) ); });

  38. Let's try an experiment?

  39. Crowd Coding...

  40. What did just happen?

  41. None

  42. localhost:8080

  43. localhost:8080

  44. localhost:8080 worker.js

  45. localhost:8080 worker.js

  46. localhost:8080 worker.js Interactive

  47. localhost:8080 worker.js Interactive

  48. localhost:8080 worker.js Interactive

  49. localhost:8080 worker.js Interactive

  50. localhost:8080 worker.js Interactive

  51. localhost:8080 worker.js Interactive

  52. worker.js

  53. worker.js

  54. worker.js

  55. worker.js

  56. Could universal workers be a thing?

  57. Let's create a cloud worker!

  58. www.cloudflare.com/products/cloudflare-workers/

  59. developers.cloudflare.com/workers/reference/

  60. developers.cloudflare.com/workers/reference/

  61. developers.cloudflare.com/workers/reference/

  62. https://dash.cloudflare.com/9dcd7c...

  63. worker.js

  64. worker.js

  65. worker.js

  66. worker.js

  67. worker.js

  68. worker.js

  69. worker.js

  70. worker.js

  71. worker.js worker.js

  72. worker.js worker.js

  73. worker.js worker.js

  74. worker.js

  75. worker.js

  76. worker.js

  77. worker.js

  78. worker.js

  79. Is this the solution to universal JavaScript?

  80. Service worker development is still very tedious

  81. Cache handling is tough

  82. It's worth investigating!

  83. Servers with browser APIs will change how we share code!

  84. react-in-a-worker.netlify.com

  85. www.react-in-a-worker.rocks

  86. github.com/stefanjudis/react-in-a-worker

  87. One last thing...

  88. ... let's serve HTML instead of spinners.

  89. @stefanjudis sjudis@twilio.com www.stefanjudis.com Thanks.