Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React in a worker, worker, worker...
stefan judis
May 23, 2019
Technology
1
300
React in a worker, worker, worker...
stefan judis
May 23, 2019
Tweet
Share
More Decks by stefan judis
See All by stefan judis
Wanna scale up? Make sure your CMS is ready for it!
stefanjudis
0
98
Did we(b development) lose the right direction?
stefanjudis
6
1.8k
Regular expressions – my secret love
stefanjudis
0
820
Write a Function
stefanjudis
0
380
HTTP headers for the responsible developer
stefanjudis
5
3.7k
I've got 99 problems the server ain't one
stefanjudis
1
170
When a CMS is not enough
stefanjudis
1
480
Markdown, my friend – we have to talk
stefanjudis
2
470
I didn't know that!
stefanjudis
1
660
Other Decks in Technology
See All in Technology
LINEスタンプの実例紹介 小さく始める障害検知・対応・振り返りの 改善プラクティス
line_developers
PRO
3
1.6k
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
ishikawa_pro
0
100
A1A会社紹介資料-2022-05-20
a1a
2
1.1k
失敗から学ぶAWSコスト管理入門 ~想定の50倍以上の請求がきた話~
msato
0
390
[SRE NEXT 2022]組織に対してSREを適用するとはどういうことか
srenext
0
250
0->1 フェーズで E2E 自動テストを導入した私たちの、これまでとこれから
yoyakoba
0
480
事業の成長と共に歩む、ABEMA SRE探求の歴史 / SRE-Next 2022
nagaa052
0
250
読者のことを考えて書いてみよう / Write with your reader in mind
line_developers
PRO
3
360
tfcon-2022-cpp
cpp
5
5.1k
toilを解消した話
asumaywy
0
210
220521_SFN_品質文化試論と『LEADING QUALITY』/220521_SFN_Essay_of_Quality_Culture_and_LEADING_QUALITY
mkwrd
0
270
[SRE NEXT 2022]KaaS桶狭間の戦い 〜Yahoo! JAPANのSLI/SLOを用いた統合監視〜
srenext
0
310
Featured
See All Featured
Optimizing for Happiness
mojombo
365
63k
Writing Fast Ruby
sferik
612
57k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
The Language of Interfaces
destraynor
148
20k
Docker and Python
trallard
27
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
The Invisible Side of Design
smashingmag
289
48k
Git: the NoSQL Database
bkeepers
PRO
415
59k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
GraphQLとの向き合い方2022年版
quramy
16
8.1k
The Cult of Friendly URLs
andyhume
68
4.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Transcript
@stefanjudis React in a worker, worker, worker, worker...
@stefanjudis www.stefanjudis.com Heyo, I'm Stefan!
Let's talk about CRA (create-react-app)
None
A classical Single Page App
There are problems with typical single page apps...
<!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>
<!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>
<!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>
<!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>
<!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>
<!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 Million requests for JavaScript will time out. Ian Feather
(Buzzfeed)
"We don't have any non- JavaScript users". No, all your
users are non-JS while they're downloading your JS. Jake Archibald (Google)
<!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>
<!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
How can we do better?
proxx.app
nextjs.org www.gatsbyjs.org
nextjs.org www.gatsbyjs.org Run the same React code on the server
and client
None
None
None
None
bundle.js
bundle.js
bundle.js Interactive
Better performance!
Better performance! Faster indexed by Google!
Better performance! Faster indexed by Google! It's the same code
front to back!
But is it really the same code?
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); });
github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch
What if we serve HTML from an environment with the
same methods?
The Service Worker worker.js
if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/worker.js') .then(function(registration) {}, function(err)
{}); }
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); } ) ); });
Let's try an experiment?
Crowd Coding...
What did just happen?
None
localhost:8080
localhost:8080
localhost:8080 worker.js
localhost:8080 worker.js
localhost:8080 worker.js Interactive
localhost:8080 worker.js Interactive
localhost:8080 worker.js Interactive
localhost:8080 worker.js Interactive
localhost:8080 worker.js Interactive
localhost:8080 worker.js Interactive
worker.js
worker.js
worker.js
worker.js
Could universal workers be a thing?
Let's create a cloud worker!
www.cloudflare.com/products/cloudflare-workers/
developers.cloudflare.com/workers/reference/
developers.cloudflare.com/workers/reference/
developers.cloudflare.com/workers/reference/
https://dash.cloudflare.com/9dcd7c...
worker.js
worker.js
worker.js
worker.js
worker.js
worker.js
worker.js
worker.js
worker.js worker.js
worker.js worker.js
worker.js worker.js
worker.js
worker.js
worker.js
worker.js
worker.js
Is this the solution to universal JavaScript?
Service worker development is still very tedious
Cache handling is tough
It's worth investigating!
Servers with browser APIs will change how we share code!
react-in-a-worker.netlify.com
www.react-in-a-worker.rocks
github.com/stefanjudis/react-in-a-worker
One last thing...
... let's serve HTML instead of spinners.
@stefanjudis sjudis@twilio.com www.stefanjudis.com Thanks.