@stefanjudisReact in a worker,worker, worker, worker...
View Slide
@stefanjudiswww.stefanjudis.comHeyo,I'm Stefan!
Let's talk about CRA(create-react-app)
A classical Single Page App
There are problems withtypical single page apps...
React App No JavaScriptzzzz ...
React App No JavaScriptzzzz ... NoJavaScriptzzzz ...
13 Million requests forJavaScript will time out.Ian Feather (Buzzfeed)
"We don't have any non-JavaScript users".No, all your users are non-JS whilethey're downloading your JS.Jake Archibald (Google)
React App No JavaScriptzzzz ... The spinner of death
How can we do better?
proxx.app
nextjs.orgwww.gatsbyjs.org
nextjs.orgwww.gatsbyjs.orgRun the same React code onthe server and client
bundle.js
bundle.jsInteractive
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 reallythe 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 HTMLfrom an environmentwith the same methods?
The Service Workerworker.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 responseif (response) {return response;}return fetch(event.request);}));});
Let's try anexperiment?
Crowd Coding...
What did just happen?
localhost:8080
localhost:8080worker.js
localhost:8080worker.jsInteractive
worker.js
Could universalworkers be a thing?
Let's createa cloud worker!
www.cloudflare.com/products/cloudflare-workers/
developers.cloudflare.com/workers/reference/
https://dash.cloudflare.com/9dcd7c...
worker.jsworker.js
Is this the solutionto universal JavaScript?
Service worker developmentis still very tedious
Cache handlingis tough
It's worthinvestigating!
Servers withbrowser APIs will changehow 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 HTMLinstead of spinners.
@stefanjudis[email protected]www.stefanjudis.comThanks.
stefanjudis
nttcom
sinsoku
aoshun7
niftycorp
lwug
ufried
k1style
yuj1osm
fujiwara3
yutoy
chumajin
dougneiner
tammyeverts
michaelherold
soudai
scottboms
palkan
zenorocha
bkeepers
holman
frogandcode
tenderlove