Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React in a worker, worker, worker...

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

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
6
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
5
1.4k
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
730
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
330
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
5
3.5k
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
160
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
370
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
2
390
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
600

Other Decks in Technology

See All in Technology
Dce5df1d6cddfca0b3823ebaee7b6864?s=48 harunakanishi
0
210
494defe9442c2c5f72296544b04db4f7?s=48 kusumicorp
0
300
Cd891a89dfec6ca7bd278b5f5bd87c90?s=48 tzkoba
3
1.6k
3373c144fef1d3518b9b3f24a6b46ad0?s=48 lmi
1
500
6ddc65998177a0f05be629dc31321a8f?s=48 kken78
0
110
4e7f712e4bba241f579d3dc0eaf130d4?s=48 mito201
0
340
9c551bfc52665c832b89e2748e33cf60?s=48 hitomi___kt
1
240
609308e6510e41133d30460eef1ccd36?s=48 no24oka
1
13k
325afd2c9db540c83485f509f2845acb?s=48 hiro_y
0
200
13725f35541aa680ed5f85d16b85947a?s=48 tacck
1
300
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
180
F51e113117352226a2583a1f24d4de6d?s=48 shimashima35
1
180

Featured

See All Featured
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
161
6.7k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
591
210k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
189
14k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
291
110k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.2k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.5k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
36k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
118
10k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
40
1.9k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
119
7.3k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k

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.