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

React in a worker, worker, worker...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for stefan judis stefan judis
May 23, 2019
Technology
610
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
380
Playwright can do this?
Avatar for stefan judis stefanjudis
0
250
Things you should know about Frontend Development in 2022
Avatar for stefan judis stefanjudis
0
560
Throw yourself out there for fun and profit
Avatar for stefan judis stefanjudis
0
140
Back to Boring
Avatar for stefan judis stefanjudis
1
540
Wanna scale up? Make sure your CMS is ready for it!
Avatar for stefan judis stefanjudis
0
290
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は実装を速くする。では、私たちは何を今作るべきか？－立場を越えてリリースに向き合ったチーム開発の実践 / 20260801 Hiromi Nakaya and Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
450
AIエージェントを前提としたプラットフォーム エンジニアリング：GKEで作るAgent-Ready Golden Path
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
2
220
サイバー捜査員研修（前半）
Avatar for Nomizo Nomizo nomizone
1
1.9k
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
8.1k
認知負荷をGemini で溶かす — GKE 基盤「Orbit」における AI エージェントの実践
Avatar for SansanTech sansantech
PRO
1
270
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
150
クラウドセキュリティ入門　～安全なクラウド利用のための基礎知識～
Avatar for LHazy lhazy
11
8.4k
ボトムアップ文化が強い組織で セキュリティをどう根付かせていくかの現在進行形の話 / Making Security Stick in a Bottom-Up Organization
Avatar for Takashi Yamaguchi yamaguchitk333
0
200
個人OSSが、机の上から世界に広がるまでの話
Avatar for Shinya Saita shinyasaita
1
370
Breaking the Seal: Static Deobfuscation of Compiled V8 JavaScript Bytecode Malware
Avatar for hasherezade hshrzd
0
660
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
230
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
Avatar for kk0n kk0n
0
1.7k

Featured

See All Featured
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
210
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
570
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.9k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
380
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
10k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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.