React in a worker, worker, worker...

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)
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
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?
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.