A brief introduction to using HTML5 web workers

1. AN INTRODUCTION TO
WEB WORKERS
by Steve Butterworth (@stevewillbe)

3. “
Allow code to perform
processor-intensive
calculations without
blocking the UI thread
- Mozilla

4. “
Undoubtedly, the coolest
new feature to arrive
in the latest version of
web browsers
- John Resig

5. WHY?

6. USES
Live syntax highlighting

7. USES
Crunching lots of data
JSON apis....parsing.....
normalising....summing....
ordering.....instantiating templates...
+
‘live’ animated interface
scalable & fast

8. ANIMATION
Smooooooth animation
Smooth animations.... 3D modelling.... Ray
tracing....ambient occlusion
Leave the UI thread for painting
not for calculations

9. MEDIA PROCESSING
image, video and audio processing
motion detection....image filters....face
detection....audio analysis

10. HOW IT WORKS
Multithreading has
never been
this simple

11. CREATE A WORKER

12. MAKE IT WORK
Tell it to do something useful

13. CODE THE WORKER
Handle the messages it receives

14. CODE THE WORKER
Do work and then notify the UI thread

15. CAPTURE RESULTS
Handle messages from worker in UI thread

16. USEFUL NUGGETS
Nice utility method in a worker

17. USEFUL NUGGETS
Call any method in window scope easily

18. USEFUL NUGGETS
logging from within the worker

19. USEFUL NUGGETS
Check if web workers are supported

20. INCLUDE SCRIPTS
From within your worker

21. FINISH WORKING
From within your worker

22. RECAP
In your main UI thread

23. RECAP
In your main UI thread

24. YOU DON’T GET...
- DOM (No UI manipulation)
- No jQuery
- No shared data

25. YOU DO GET...
- Read only location object
- XMLHTTPRequest (ajax)
- setTimeout, setInterval

26. A WORKERS TOOLS
- All the js language goodness
- underscore.js
- jquery.hive.pollen.js

27. GOTCHA’S
- Debugging can be a pain
- pollen.js is NOT jQuery
- Rails asset pipeline problems
- Browser support

28. BROWSER SUPPORT
- Chrome 4.0
- Firefox 3.5
- Safari 4.0
- iOS Safari
- Mobile Chrome
- IE 9 IE 10
- Android Browser

29. YOUR WEB PAGES
CAN NOW DO
MORE THAN ONE
THING AT ONCE!

30. GO FORTH AND...
...MULTITASK

31. GO FORTH AND...
...MULTITASK

32. GO FORTH AND...
...MULTITASK

33. ME
Steve Butterworth
Twitter: @stevewillbe
Email: steve@flumes.com
Web: www.flumes.com