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

React in a worker, worker, worker...

Avatar for stefan judis stefan judis
May 23, 2019
Technology
600
2

React in a worker, worker, worker...

Avatar for stefan judis

stefan judis

May 23, 2019

More Decks by stefan judis

See All by stefan judis
Back to boring (part 2)
Avatar for stefan judis stefanjudis
0
360
Playwright can do this?
Avatar for stefan judis stefanjudis
0
240
Things you should know about Frontend Development in 2022
Avatar for stefan judis stefanjudis
0
550
Throw yourself out there for fun and profit
Avatar for stefan judis stefanjudis
0
140
Back to Boring
Avatar for stefan judis stefanjudis
1
530
Wanna scale up? Make sure your CMS is ready for it!
Avatar for stefan judis stefanjudis
0
280
Did we(b development) lose the right direction?
Avatar for stefan judis stefanjudis
6
2.2k
Regular expressions – my secret love
Avatar for stefan judis stefanjudis
1
1.1k
Write a Function
Avatar for stefan judis stefanjudis
0
620

Other Decks in Technology

See All in Technology
「気づいたら仕事が終わっている」バクラクAIエージェント本番運用の裏側 / layerx-bakuraku-aie2026
Avatar for Yuya Matsumura yuya4
19
11k
チームで実践する AI-DLC 思考の軌跡を残すチェックポイント設計
Avatar for Belong inc. belongadmin
0
3k
TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する
Avatar for did0es shuta13
0
370
【Gen-AX】20260530開催_JJUG CCC 2026 Spring
Avatar for Gen-AX株式会社 genax
0
440
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.9k
Mastering Ruby Box
Avatar for Satoshi Tagomori tagomoris
3
150
新規ゲーム開発におけるAI駆動開発のリアル
Avatar for ENSAPIA Engineering株式会社 202409e2
0
2.9k
やさしいA2A入門
Avatar for みのるん minorun365
PRO
4
280
AI活用を推進するために ファインディが下した、一つの小さな決断
Avatar for starfish719 starfish719
0
270
Rubyで音を視る
Avatar for ydah ydah
1
110
2026.06.13_AI時代に事業会社が「SIer出身エンジニア」を求める理由 / Why Businesses Seek Engineers with a System Integrator Background in the AI ​​Era
Avatar for jumpei_ikegami jumtech
0
880
非エンジニアがClaudeと挑んだ「1ヶ月間プロダクト30本ノック」
Avatar for kinako askokc
0
100

Featured

See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
320
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
600
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
140
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
8k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
950
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
430
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
550
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.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 [email protected] www.stefanjudis.com Thanks.