1. Building responsive apps and sites with HTML5 web workers
12/6/2018 3:52 PM
PLAT-379P
Building responsive apps and sites with HTML5 web workers
Travis Leithead
Program Manager
Microsoft Corporation
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Agenda
Understand how web workers can improve responsiveness in your Windows Metro style app or site
You’ll leave with examples of how to
Use web workers to improve app responsivenss
Use web workers in appropriate scenarios

3. Customers expect Metro style apps and sites to be responsive
Customers expect Metro style apps and sites to be responsive. Don’t disappoint.

4. demo Stained Glass Artist 12/6/2018 3:52 PM
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. App Expectations
and Web Workers

6. Customer’s App Expectations
Starts fast
Ready-to-use immediately
Responds immediately to user-input
Never hangs

7. Building Responsive Apps and Sites
Start with a solid foundation
Learn and embrace the asynchronous pattern
Use best practices
Limit your execution time on the UI thread
Session 162
Build Fast and Fluid Metro style Apps in HTML5
Session 203
Async Everywhere: Creating Responsive APIs and Apps
Session 386
50 Performance Tricks to Make your HTML5 Apps and Sites Faster

8. Typical Execution Flow on the UI Thread
JavaScript
User Input Event,
Timer,
or Callback
Update App Logic
Update View
Layout
Session 384
Anatomy of an App
UI Thread

9. Typical Execution Flow on the UI thread
JavaScript
User Input Event,
Timer,
or Callback
Update App Logic
Update View
Layout
UI Thread
JavaScript
Web Worker

10. Web Workers Key Concepts
Client-side JavaScript “services” (not JavaScript “threads”)
Run JavaScript in parallel with the main app
Aysnc, event-driven communication
No synchronization primitives necessary

11. Web Workers Architecture
UI Thread
Document Object
(HTML Elements, CSS)
Objects Attached To The Window
(XMLHttpRequest, Navigator, Location
Indexed Database, Web Sockets)
Objects Attached To The Window
(XMLHttpRequest, Navigator, Location
Indexed Database, Web Sockets)
Worker Global Scope Object
Window Object
JavaScript Engine
JavaScript Engine

12. Creating a Web Worker // Create a Web Worker
var myworker = new Worker("worker.js");
myworker.onerror = function(errorEvent) {
/* handle error condition */ };
myworker.onmessage = function(messageEvent){
alert("echo:" + messageEvent.data);
var data = "hello";
myworker.postMessage(data);
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13. Inside a Web Worker // Load additional script
importScripts("moreScript.js, additionalScript.js");
onmessage = function(uiMessage) {
var message = uiMessage.data;
/* process message */ };
// Pass complex data structures via postMessage
var data = {strings: "hello world", numbers: 1};
postMessage(data);
/* Enter message loop (wait for something to do) */
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14. Only a limited set of Object types can be sent to/from a web worker.

15. Objects That Can Be Passed to Web Workers
JavaScript Built-in Objects
Object, Array, Boolean, Number, String, RegExp, Date
DOM Objects
ImageData, CanvasPixelArray, File, Blob, FileList
Notable Objects that Cannot Be Sent
Function, Error, HTML Elements

16. Tips for Web Worker Usage

17. Use Web Workers To… Execute the "primary thread" of your app
Perform background processing
Create asynchronous tasks

18. Use Web Workers as the "Primary" Thread
Improve Metro style app load time
Structure your app logic using MVC architecture
Sandboxed script
Scenarios: drawing app, memory game

19. Use Web Workers for Background Processing
Long-running algorithms
Easy progress updates
Yielding still required to process messages
see also "setImmediate"
Scenarios: image/audio processing, "computer player" logic, custom gesture/facial recognition, distributed or highly parallelizable algorithms

20. Use Web Workers for Asynchronous Tasks
"fire-and-forget" web workers:
new Worker("goAndDoTask.js");
Custom asynchronous APIs
Scenarios: background save state, refine search queries while typing

21. Important Web Worker Considerations
No latency guarantees
Delayed start-up
Message storms
No access to the DOM
Scenarios (less effective): "real-time" UI updates

22. In Conclusion
Web workers provide the means to build powerful and responsive Metro style apps and sites
Web workers are easy to learn and use
Web workers are available everywhere you code JavaScript

23. Related sessions
APP-162T: Building high performance Metro style apps using HTML5
PLAT-203T: Async everywhere: creating responsive APIs & apps
PLAT-384T: Anatomy of HTML5 sites and Metro style apps using HTML5
PLAT-386T: 50 performance tricks to make your Metro style apps and sites using HTML5 faster
PLAT-375H: HOL: Optimizing Metro style apps using HTML5 and other HTML5 sites for performance

24. Further reading and documentation
Web Workers in IE10: Background JavaScript Makes Web Apps Faster
Debugging Web Workers in IE10
Web Workers MSDN Reference
Web Workers W3C Standard Specification (includes examples)
Contact info –

25. thank you Feedback and questions http://forums.dev.windows.com
Session feedback

26. 12/6/2018 3:52 PM
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.