React in a worker, worker, worker...

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

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
1
950
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
650
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
290
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
5
3.2k
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
140
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
280
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
2
340
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
550
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
67

Other Decks in Technology

See All in Technology
Ea29e2b19d11b48f867ae71d6a6de5df?s=48 opelab
1
250
B2a04c1ec959edba430bcb38ca6ffc81?s=48 corestate55
0
260
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
0
420
Cf18e42df2acc7a1fc1700bcd8e76487?s=48 syrusakbary
0
240
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
180
Cc8a208e174943d1da814783841abd50?s=48 shinodogg
0
180
1d8947ec45ce78c83251f4d076abe329?s=48 rpabank
0
160
E783e2d26dc6388730b73ced1348c638?s=48 vkbaba
0
220
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
170
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
1
2k
C79a3191aa67cae35282fb129587696b?s=48 hendrikebbers
0
100
332f89cc697355902a817506b6995f2b?s=48 ytaka23
0
370

Featured

See All Featured
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
12
1.3k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
60k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
118
15k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
197
9.5k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
622
40k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
325
15k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
27
890
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
71
7k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
191
8.4k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
12
1.6k

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.