SlideShare ist ein Scribd-Unternehmen logo
1 von 50
Downloaden Sie, um offline zu lesen
Multicore?
But isn't
that hard?
JavaScript Web Workers
JavaScript Web Workers
JavaScript Web Workers
Tobias Pfeiffer*
@PragTob
pragtob.wordpress.com
JavaScript Web Workers
Tobias Pfeiffer*
@PragTob
pragtob.wordpress.com
*with contributions from Tobias Metzke
JavaScript Web Workers
Multi-threaded
Share nothing
Not blocking the
main thread
Web Page
Create
Web Page
Web Page
A
B
Web Page
A
B
Send Message
Web Page
A
B
Work
Web Page
A
B
Answer
Web Page
A
B
Web Page
A
B
Web Page
A
B
What about
thread safety?
„The Worker interface spawns real OS-level threads, and
concurrency can cause interesting effects in your code if you
aren't careful. However, in the case of web workers, (...)it's
actually very hard to cause concurrency problems. (...) So you
have to work really hard to cause problems in your code.“
Mozilla Developer Network
JavaScript Web Workers
JavaScript Web Workers
Limitations
● Can not access the DOM
● High setup and memory cost
● Data may not contain functions or cycles
● Debugging
Getting to work
Starting a web worker
var worker = new Worker('worker_script.js');
Starting a web worker
var worker = new Worker('worker/counter.js');
Listening to the worker
var worker = new Worker('worker/counter.js');
worker.addEventListener('message', function(event){
// do stuff
});
Listening to the worker
var worker = new Worker('worker/counter.js');
worker.addEventListener('message', function(event){
$('#result').html(event.data);
});
Sending the worker messages
var worker = new Worker('worker/counter.js');
worker.addEventListener('message', function(event){
$('#result').html(event.data);
});
worker.postMessage(data);
Sending the worker messages
var worker = new Worker('worker/counter.js');
worker.addEventListener('message', function(event){
$('#result').html(event.data);
});
worker.postMessage({});
The Worker
var counter = 0;
self.onmessage = function(message) {
counter++;
self.postMessage(counter);
}
The Worker
var counter = 0;
self.onmessage = function(message) {
counter++;
self.postMessage(counter);
}
The Worker
var counter = 0;
self.onmessage = function(message) {
counter++;
self.postMessage(counter);
}
A Prime Number worker
findPrime = function(n) {
for (var i = 2; i <= Math.sqrt(n); i += 1) {
if (n % i == 0) {
return false;
}
}
return n;
}
self.onmessage = function(event) {
var num = parseInt(event.data);
self.postMessage(findPrime(num);
}
A Prime Number worker
findPrime = function(n) {
for (var i = 2; i <= Math.sqrt(n); i += 1) {
if (n % i == 0) {
return false;
}
}
return n;
}
self.onmessage = function(event) {
var num = parseInt(event.data);
self.postMessage(findPrime(num);
}
Importing Scripts in a worker
importScripts('script_path.js');
Background I/O
importScripts('io.js');
var timer;
var symbol;
function update() {
postMessage(symbol + ' ' + get('stock.cgi?' +
symbol));
timer = setTimeout(update, 10000);
}
onmessage = function (event) {
if (timer)
clearTimeout(timer);
symbol = event.data;
update();
};
Background I/O
importScripts('io.js');
var timer;
var symbol;
function update() {
postMessage(symbol + ' ' + get('stock.cgi?' +
symbol));
timer = setTimeout(update, 10000);
}
onmessage = function (event) {
if (timer)
clearTimeout(timer);
symbol = event.data;
update();
};
Background I/O
importScripts('io.js');
var timer;
var symbol;
function update() {
postMessage(symbol + ' ' + get('stock.cgi?' +
symbol));
timer = setTimeout(update, 10000);
}
onmessage = function (event) {
if (timer)
clearTimeout(timer);
symbol = event.data;
update();
};
Background I/O
importScripts('io.js');
var timer;
var symbol;
function update() {
postMessage(symbol + ' ' + get('stock.cgi?' +
symbol));
timer = setTimeout(update, 10000);
}
onmessage = function (event) {
if (timer)
clearTimeout(timer);
symbol = event.data;
update();
};
Listening for errors
worker.addEventListener('error', function(event){
// happy debugging
});
Use Cases
● Expensive non UI computations
● Handling big data
● Background I/O
● Ray Tracers
● AI
● …
● https://developer.mozilla.org/en-US/demos/tag/tech:webworkers/
Actors?
Actors
● Run in their own thread
● Do not share state
● Communicate via asynchronous
messages
JavaScript Web Workers
Web Workers
● Using modern multi core computers on
the client side
● Allow you to do the heavy lifting on the
client side
● Relatively easy to use
Resources
● Web Hypertext Application Technology Working Group. HTML
Specification - Web Workers.Website, 2013.
http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
● Mozilla Developer Network. Using Web Workers. Website, 2013.
https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers
● MDN: Web Worker Demos
https://developer.mozilla.org/en-US/demos/tag/tech:webworkers
● Visualization from the end (don't use actor and actor2, use the others)
http://www.lively-kernel.org/repository/webwerkstatt/users/tmetzke/
Photo Credit
● Creative Commonts Attribution:
– http://www.w3.org/html/logo/downloads/HTML5_Logo.svg
– http://www.flickr.com/photos/klearchos/5580186619/
– http://www.flickr.com/photos/tedmurphy/8482500187/
● Creative Commons Attribution no derivative Works
– http://www.flickr.com/photos/49333775@N00/2383975585/
– http://www.flickr.com/photos/adplayers/5758743751/
● Creative Commons Attribution Share Alike
– http://www.flickr.com/photos/amatuer_44060/2831112854/
● Logos
– https://assets.mozillalabs.com/Brands-Logos/Firefox/logo-only/firefox_logo-only_RGB.png
– http://de.wikipedia.org/wiki/Datei:Internet_Explorer_9.svg
– https://en.wikipedia.org/wiki/File:Apple_Safari.png
– http://commons.wikimedia.org/wiki/File:Opera_O.svg
–
● Wikimedia Commons
– http://en.wikipedia.org/wiki/File:Chromium_11_Logo.svg
– http://en.wikipedia.org/wiki/File:Athlon64x2-6400plus.jpg
Photo Credit 2
● Creative Commons Attribution-No Derivs – No Commercial
– http://www.flickr.com/photos/cheesy42/8414666632/

Más contenido relacionado

Was ist angesagt?

Node, express & sails
Node, express & sailsNode, express & sails
Node, express & sailsBrian Shannon
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developerscacois
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman
 
Complete MVC on NodeJS
Complete MVC on NodeJSComplete MVC on NodeJS
Complete MVC on NodeJSHüseyin BABAL
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentHyunghun Cho
 
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirstBuilding CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirstJun-ichi Sakamoto
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsRyan Weaver
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!Chris Mills
 
Service Worker 201 (en)
Service Worker 201 (en)Service Worker 201 (en)
Service Worker 201 (en)Chang W. Doh
 
Node js training (1)
Node js training (1)Node js training (1)
Node js training (1)Ashish Gupta
 
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08Tim Stephenson
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"Chris Mills
 
Back to the future: Isomorphic javascript applications
Back to the future:  Isomorphic javascript applicationsBack to the future:  Isomorphic javascript applications
Back to the future: Isomorphic javascript applicationsLuciano Colosio
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the futureChris Mills
 
React server side rendering performance
React server side rendering performanceReact server side rendering performance
React server side rendering performanceNick Dreckshage
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationAndrew Rota
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkitPaul Jensen
 

Was ist angesagt? (20)

Node, express & sails
Node, express & sailsNode, express & sails
Node, express & sails
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developers
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
Complete MVC on NodeJS
Complete MVC on NodeJSComplete MVC on NodeJS
Complete MVC on NodeJS
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side Development
 
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirstBuilding CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
Building CLR/H Registration Site with ASP.NET MVC4 and EF4CodeFirst
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
 
Node azure
Node azureNode azure
Node azure
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
 
Service Worker 201 (en)
Service Worker 201 (en)Service Worker 201 (en)
Service Worker 201 (en)
 
Node js training (1)
Node js training (1)Node js training (1)
Node js training (1)
 
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
 
Back to the future: Isomorphic javascript applications
Back to the future:  Isomorphic javascript applicationsBack to the future:  Isomorphic javascript applications
Back to the future: Isomorphic javascript applications
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the future
 
React server side rendering performance
React server side rendering performanceReact server side rendering performance
React server side rendering performance
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
 
Best node js course
Best node js courseBest node js course
Best node js course
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
 

Andere mochten auch

Quick dive into WebVR
Quick dive into WebVRQuick dive into WebVR
Quick dive into WebVRJanne Aukia
 
Firefox Extension Development
Firefox Extension DevelopmentFirefox Extension Development
Firefox Extension Developmentphamvanvung
 
WebVR with Three.js!
WebVR with Three.js!WebVR with Three.js!
WebVR with Three.js!誠人 堀口
 
WebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco StrategyWebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco StrategyJose de Castro
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR WebLiv Erickson
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 
WebRTC: A front-end perspective
WebRTC: A front-end perspectiveWebRTC: A front-end perspective
WebRTC: A front-end perspectiveshwetank
 
JavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJenn Lukas
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++ubshreenath
 
WebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitWebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitDan Jenkins
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVRDaosheng Mu
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRCodemotion
 
WebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and OpportunitiesWebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and OpportunitiesVladimir Beloborodov
 

Andere mochten auch (20)

Quick dive into WebVR
Quick dive into WebVRQuick dive into WebVR
Quick dive into WebVR
 
Firefox Extension Development
Firefox Extension DevelopmentFirefox Extension Development
Firefox Extension Development
 
Web vr creative_vr
Web vr creative_vrWeb vr creative_vr
Web vr creative_vr
 
Estudo 01
Estudo 01Estudo 01
Estudo 01
 
WebVR with Three.js!
WebVR with Three.js!WebVR with Three.js!
WebVR with Three.js!
 
WebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco StrategyWebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco Strategy
 
WebVR - JAX 2016
WebVR -  JAX 2016WebVR -  JAX 2016
WebVR - JAX 2016
 
Javascript the New Parts
Javascript the New PartsJavascript the New Parts
Javascript the New Parts
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR Web
 
20160713 webvr
20160713 webvr20160713 webvr
20160713 webvr
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
WebRTC: A front-end perspective
WebRTC: A front-end perspectiveWebRTC: A front-end perspective
WebRTC: A front-end perspective
 
JavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a Tree
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++
 
Photo and photo
Photo and photoPhoto and photo
Photo and photo
 
WebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitWebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC Summit
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVR
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
 
WebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and OpportunitiesWebRTC on Mobile Devices: Challenges and Opportunities
WebRTC on Mobile Devices: Challenges and Opportunities
 
WebVR
WebVRWebVR
WebVR
 

Ähnlich wie JavaScript Web Workers

Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineRicardo Silva
 
InterConnect2016: WebApp Architectures with Java and Node.js
InterConnect2016: WebApp Architectures with Java and Node.jsInterConnect2016: WebApp Architectures with Java and Node.js
InterConnect2016: WebApp Architectures with Java and Node.jsChris Bailey
 
Spicy javascript: Create your first Chrome extension for web analytics QA
Spicy javascript: Create your first Chrome extension for web analytics QASpicy javascript: Create your first Chrome extension for web analytics QA
Spicy javascript: Create your first Chrome extension for web analytics QAAlban Gérôme
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyDavid Padbury
 
Introducing to node.js
Introducing to node.jsIntroducing to node.js
Introducing to node.jsJeongHun Byeon
 
Scalable Cloud Solutions with Node.js
Scalable Cloud Solutions with Node.jsScalable Cloud Solutions with Node.js
Scalable Cloud Solutions with Node.jsmpneuried
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 
Javascript Everywhere
Javascript EverywhereJavascript Everywhere
Javascript EverywherePascal Rettig
 
Mobile webapplication development
Mobile webapplication developmentMobile webapplication development
Mobile webapplication developmentGanesh Gembali
 
Web workers | JavaScript | HTML API
Web workers | JavaScript | HTML APIWeb workers | JavaScript | HTML API
Web workers | JavaScript | HTML APIpcnmtutorials
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Patrick Chanezon
 
Adobe analytics implementation secret hacks
Adobe analytics implementation secret hacksAdobe analytics implementation secret hacks
Adobe analytics implementation secret hacksAlban Gérôme
 
Why Nodejs Guilin Shanghai
Why Nodejs Guilin ShanghaiWhy Nodejs Guilin Shanghai
Why Nodejs Guilin ShanghaiJackson Tian
 
Why Node.js
Why Node.jsWhy Node.js
Why Node.jsguileen
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Tugdual Grall
 
Testing for fun in production Into The Box 2018
Testing for fun in production Into The Box 2018Testing for fun in production Into The Box 2018
Testing for fun in production Into The Box 2018Ortus Solutions, Corp
 
Empowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsEmpowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsFITC
 

Ähnlich wie JavaScript Web Workers (20)

Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
mobl
moblmobl
mobl
 
A First Date With Scala
A First Date With ScalaA First Date With Scala
A First Date With Scala
 
InterConnect2016: WebApp Architectures with Java and Node.js
InterConnect2016: WebApp Architectures with Java and Node.jsInterConnect2016: WebApp Architectures with Java and Node.js
InterConnect2016: WebApp Architectures with Java and Node.js
 
Spicy javascript: Create your first Chrome extension for web analytics QA
Spicy javascript: Create your first Chrome extension for web analytics QASpicy javascript: Create your first Chrome extension for web analytics QA
Spicy javascript: Create your first Chrome extension for web analytics QA
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
Introducing to node.js
Introducing to node.jsIntroducing to node.js
Introducing to node.js
 
Scalable Cloud Solutions with Node.js
Scalable Cloud Solutions with Node.jsScalable Cloud Solutions with Node.js
Scalable Cloud Solutions with Node.js
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
Javascript Everywhere
Javascript EverywhereJavascript Everywhere
Javascript Everywhere
 
Mobile webapplication development
Mobile webapplication developmentMobile webapplication development
Mobile webapplication development
 
Web workers | JavaScript | HTML API
Web workers | JavaScript | HTML APIWeb workers | JavaScript | HTML API
Web workers | JavaScript | HTML API
 
Power ai image-pipeline
Power ai image-pipelinePower ai image-pipeline
Power ai image-pipeline
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Adobe analytics implementation secret hacks
Adobe analytics implementation secret hacksAdobe analytics implementation secret hacks
Adobe analytics implementation secret hacks
 
Why Nodejs Guilin Shanghai
Why Nodejs Guilin ShanghaiWhy Nodejs Guilin Shanghai
Why Nodejs Guilin Shanghai
 
Why Node.js
Why Node.jsWhy Node.js
Why Node.js
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Scripting Oracle Develop 2007
Scripting Oracle Develop 2007
 
Testing for fun in production Into The Box 2018
Testing for fun in production Into The Box 2018Testing for fun in production Into The Box 2018
Testing for fun in production Into The Box 2018
 
Empowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsEmpowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris Mills
 

Mehr von Tobias Pfeiffer

Metaphors are everywhere: Ideas to Improve Software Development
 Metaphors are everywhere: Ideas to Improve Software Development  Metaphors are everywhere: Ideas to Improve Software Development
Metaphors are everywhere: Ideas to Improve Software Development Tobias Pfeiffer
 
Elixir & Phoenix – Fast, Concurrent and Explicit
Elixir & Phoenix – Fast, Concurrent and ExplicitElixir & Phoenix – Fast, Concurrent and Explicit
Elixir & Phoenix – Fast, Concurrent and ExplicitTobias Pfeiffer
 
Functioning Among Humans
Functioning Among HumansFunctioning Among Humans
Functioning Among HumansTobias Pfeiffer
 
Functioning Among Humans
Functioning Among HumansFunctioning Among Humans
Functioning Among HumansTobias Pfeiffer
 
Do You Need That Validation? Let Me Call You Back About It
Do You Need That Validation? Let Me Call You Back About ItDo You Need That Validation? Let Me Call You Back About It
Do You Need That Validation? Let Me Call You Back About ItTobias Pfeiffer
 
Elixir, your Monolith and You
Elixir, your Monolith and YouElixir, your Monolith and You
Elixir, your Monolith and YouTobias Pfeiffer
 
Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)
Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)
Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)Tobias Pfeiffer
 
It's About the Humans, Stupid (Lightning)
It's About the Humans, Stupid (Lightning)It's About the Humans, Stupid (Lightning)
It's About the Humans, Stupid (Lightning)Tobias Pfeiffer
 
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
 Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version) Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)Tobias Pfeiffer
 
Code, Comments, Concepts, Comprehension – Conclusion?
Code, Comments, Concepts, Comprehension – Conclusion?Code, Comments, Concepts, Comprehension – Conclusion?
Code, Comments, Concepts, Comprehension – Conclusion?Tobias Pfeiffer
 
How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)Tobias Pfeiffer
 
How fast ist it really? Benchmarking in practice
How fast ist it really? Benchmarking in practiceHow fast ist it really? Benchmarking in practice
How fast ist it really? Benchmarking in practiceTobias Pfeiffer
 
Introducing Elixir the easy way
Introducing Elixir the easy wayIntroducing Elixir the easy way
Introducing Elixir the easy wayTobias Pfeiffer
 
Elixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicitElixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicitTobias Pfeiffer
 
What did AlphaGo do to beat the strongest human Go player?
What did AlphaGo do to beat the strongest human Go player?What did AlphaGo do to beat the strongest human Go player?
What did AlphaGo do to beat the strongest human Go player?Tobias Pfeiffer
 
Elixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicitElixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicitTobias Pfeiffer
 

Mehr von Tobias Pfeiffer (20)

Going Staff
Going StaffGoing Staff
Going Staff
 
Stories in Open SOurce
Stories in Open SOurceStories in Open SOurce
Stories in Open SOurce
 
Metaphors are everywhere: Ideas to Improve Software Development
 Metaphors are everywhere: Ideas to Improve Software Development  Metaphors are everywhere: Ideas to Improve Software Development
Metaphors are everywhere: Ideas to Improve Software Development
 
Stories in Open Source
Stories in Open SourceStories in Open Source
Stories in Open Source
 
Elixir & Phoenix – Fast, Concurrent and Explicit
Elixir & Phoenix – Fast, Concurrent and ExplicitElixir & Phoenix – Fast, Concurrent and Explicit
Elixir & Phoenix – Fast, Concurrent and Explicit
 
Functioning Among Humans
Functioning Among HumansFunctioning Among Humans
Functioning Among Humans
 
Functioning Among Humans
Functioning Among HumansFunctioning Among Humans
Functioning Among Humans
 
Do You Need That Validation? Let Me Call You Back About It
Do You Need That Validation? Let Me Call You Back About ItDo You Need That Validation? Let Me Call You Back About It
Do You Need That Validation? Let Me Call You Back About It
 
Elixir, your Monolith and You
Elixir, your Monolith and YouElixir, your Monolith and You
Elixir, your Monolith and You
 
Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)
Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)
Stop Guessing and Start Measuring - Benchmarking in Practice (Lambdadays)
 
Where do Rubyists go?
 Where do Rubyists go?  Where do Rubyists go?
Where do Rubyists go?
 
It's About the Humans, Stupid (Lightning)
It's About the Humans, Stupid (Lightning)It's About the Humans, Stupid (Lightning)
It's About the Humans, Stupid (Lightning)
 
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
 Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version) Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
Stop Guessing and Start Measuring - Benchmarking Practice (Poly Version)
 
Code, Comments, Concepts, Comprehension – Conclusion?
Code, Comments, Concepts, Comprehension – Conclusion?Code, Comments, Concepts, Comprehension – Conclusion?
Code, Comments, Concepts, Comprehension – Conclusion?
 
How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)How fast is it really? Benchmarking in Practice (Ruby Version)
How fast is it really? Benchmarking in Practice (Ruby Version)
 
How fast ist it really? Benchmarking in practice
How fast ist it really? Benchmarking in practiceHow fast ist it really? Benchmarking in practice
How fast ist it really? Benchmarking in practice
 
Introducing Elixir the easy way
Introducing Elixir the easy wayIntroducing Elixir the easy way
Introducing Elixir the easy way
 
Elixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicitElixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicit
 
What did AlphaGo do to beat the strongest human Go player?
What did AlphaGo do to beat the strongest human Go player?What did AlphaGo do to beat the strongest human Go player?
What did AlphaGo do to beat the strongest human Go player?
 
Elixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicitElixir & Phoenix – fast, concurrent and explicit
Elixir & Phoenix – fast, concurrent and explicit
 

Último

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 

Último (20)

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 

JavaScript Web Workers

  • 5. JavaScript Web Workers Tobias Pfeiffer* @PragTob pragtob.wordpress.com
  • 6. JavaScript Web Workers Tobias Pfeiffer* @PragTob pragtob.wordpress.com *with contributions from Tobias Metzke
  • 21. „The Worker interface spawns real OS-level threads, and concurrency can cause interesting effects in your code if you aren't careful. However, in the case of web workers, (...)it's actually very hard to cause concurrency problems. (...) So you have to work really hard to cause problems in your code.“ Mozilla Developer Network
  • 24. Limitations ● Can not access the DOM ● High setup and memory cost ● Data may not contain functions or cycles ● Debugging
  • 26. Starting a web worker var worker = new Worker('worker_script.js');
  • 27. Starting a web worker var worker = new Worker('worker/counter.js');
  • 28. Listening to the worker var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ // do stuff });
  • 29. Listening to the worker var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ $('#result').html(event.data); });
  • 30. Sending the worker messages var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ $('#result').html(event.data); }); worker.postMessage(data);
  • 31. Sending the worker messages var worker = new Worker('worker/counter.js'); worker.addEventListener('message', function(event){ $('#result').html(event.data); }); worker.postMessage({});
  • 32. The Worker var counter = 0; self.onmessage = function(message) { counter++; self.postMessage(counter); }
  • 33. The Worker var counter = 0; self.onmessage = function(message) { counter++; self.postMessage(counter); }
  • 34. The Worker var counter = 0; self.onmessage = function(message) { counter++; self.postMessage(counter); }
  • 35. A Prime Number worker findPrime = function(n) { for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) { return false; } } return n; } self.onmessage = function(event) { var num = parseInt(event.data); self.postMessage(findPrime(num); }
  • 36. A Prime Number worker findPrime = function(n) { for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) { return false; } } return n; } self.onmessage = function(event) { var num = parseInt(event.data); self.postMessage(findPrime(num); }
  • 37. Importing Scripts in a worker importScripts('script_path.js');
  • 38. Background I/O importScripts('io.js'); var timer; var symbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
  • 39. Background I/O importScripts('io.js'); var timer; var symbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
  • 40. Background I/O importScripts('io.js'); var timer; var symbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
  • 41. Background I/O importScripts('io.js'); var timer; var symbol; function update() { postMessage(symbol + ' ' + get('stock.cgi?' + symbol)); timer = setTimeout(update, 10000); } onmessage = function (event) { if (timer) clearTimeout(timer); symbol = event.data; update(); };
  • 42. Listening for errors worker.addEventListener('error', function(event){ // happy debugging });
  • 43. Use Cases ● Expensive non UI computations ● Handling big data ● Background I/O ● Ray Tracers ● AI ● … ● https://developer.mozilla.org/en-US/demos/tag/tech:webworkers/
  • 45. Actors ● Run in their own thread ● Do not share state ● Communicate via asynchronous messages
  • 47. Web Workers ● Using modern multi core computers on the client side ● Allow you to do the heavy lifting on the client side ● Relatively easy to use
  • 48. Resources ● Web Hypertext Application Technology Working Group. HTML Specification - Web Workers.Website, 2013. http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html ● Mozilla Developer Network. Using Web Workers. Website, 2013. https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers ● MDN: Web Worker Demos https://developer.mozilla.org/en-US/demos/tag/tech:webworkers ● Visualization from the end (don't use actor and actor2, use the others) http://www.lively-kernel.org/repository/webwerkstatt/users/tmetzke/
  • 49. Photo Credit ● Creative Commonts Attribution: – http://www.w3.org/html/logo/downloads/HTML5_Logo.svg – http://www.flickr.com/photos/klearchos/5580186619/ – http://www.flickr.com/photos/tedmurphy/8482500187/ ● Creative Commons Attribution no derivative Works – http://www.flickr.com/photos/49333775@N00/2383975585/ – http://www.flickr.com/photos/adplayers/5758743751/ ● Creative Commons Attribution Share Alike – http://www.flickr.com/photos/amatuer_44060/2831112854/ ● Logos – https://assets.mozillalabs.com/Brands-Logos/Firefox/logo-only/firefox_logo-only_RGB.png – http://de.wikipedia.org/wiki/Datei:Internet_Explorer_9.svg – https://en.wikipedia.org/wiki/File:Apple_Safari.png – http://commons.wikimedia.org/wiki/File:Opera_O.svg – ● Wikimedia Commons – http://en.wikipedia.org/wiki/File:Chromium_11_Logo.svg – http://en.wikipedia.org/wiki/File:Athlon64x2-6400plus.jpg
  • 50. Photo Credit 2 ● Creative Commons Attribution-No Derivs – No Commercial – http://www.flickr.com/photos/cheesy42/8414666632/