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
300

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
Wanna scale up? Make sure your CMS is ready for it!
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
98
Did we(b development) lose the right direction?
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
6
1.8k
Regular expressions – my secret love
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
820
Write a Function
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
380
HTTP headers for the responsible developer
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
5
3.7k
I've got 99 problems the server ain't one
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
170
When a CMS is not enough
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
480
Markdown, my friend – we have to talk
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
2
470
I didn't know that!
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
660

Other Decks in Technology

See All in Technology
LINEスタンプの実例紹介 小さく始める障害検知・対応・振り返りの 改善プラクティス
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
3
1.6k
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
62e3beb467ce4d447d1491263dcf8d46?s=48 ishikawa_pro
0
100
A1A会社紹介資料-2022-05-20
154d77627bc95f4eb226c722023b5168?s=48 a1a
2
1.1k
失敗から学ぶAWSコスト管理入門 ~想定の50倍以上の請求がきた話~
D4d93646eedaaf5a9551cfc0ccd5b020?s=48 msato
0
390
[SRE NEXT 2022]組織に対してSREを適用するとはどういうことか
667ad57b416187cb22589158805603b4?s=48 srenext
0
250
0->1 フェーズで E2E 自動テストを導入した私たちの、これまでとこれから
Cf37e498a7fc8d3c589c91f56fb98e1c?s=48 yoyakoba
0
480
事業の成長と共に歩む、ABEMA SRE探求の歴史 / SRE-Next 2022
762fa63fae184f8e08f11d527a93ba3f?s=48 nagaa052
0
250
読者のことを考えて書いてみよう / Write with your reader in mind
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
3
360
tfcon-2022-cpp
Dcc589548f0372645aaeb95bda8e22c2?s=48 cpp
5
5.1k
toilを解消した話
632368cb0b90fa711cec36a082a7e24e?s=48 asumaywy
0
210
220521_SFN_品質文化試論と『LEADING QUALITY』/220521_SFN_Essay_of_Quality_Culture_and_LEADING_QUALITY
C8cde92274f0ca1ff9b046673d4f2d29?s=48 mkwrd
0
270
[SRE NEXT 2022]KaaS桶狭間の戦い 〜Yahoo! JAPANのSLI/SLOを用いた統合監視〜
667ad57b416187cb22589158805603b4?s=48 srenext
0
310

Featured

See All Featured
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.5k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.6k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
48k
Git: the NoSQL Database
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1M
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.1k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
890

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.