AN INTRODUCTION TOWEB WORKERSby Steve Butterworth (@stevewillbe)
“    Allow code to perform       processor-intensive       calculations without    blocking the UI thread                 ...
“    Undoubtedly, the coolest        new feature to arrive      in the latest version of               web browsers       ...
WHY?
USESLive syntax highlighting
USES        Crunching lots of data      JSON apis....parsing.....     normalising....summing....ordering.....instantiating...
ANIMATION            Smooooooth animationSmooth animations.... 3D modelling.... Ray     tracing....ambient occlusion     L...
MEDIA PROCESSING    image, video and audio processingmotion detection....image filters....face     detection....audio analy...
HOW IT WORKSMultithreading has    never been   this simple
CREATE A WORKER
MAKE IT WORKTell it to do something useful
CODE THE WORKER  Handle the messages it receives
CODE THE WORKERDo work and then notify the UI thread
CAPTURE RESULTSHandle messages from worker in UI thread
USEFUL NUGGETS Nice utility method in a worker
USEFUL NUGGETSCall any method in window scope easily
USEFUL NUGGETS logging from within the worker
USEFUL NUGGETSCheck if web workers are supported
INCLUDE SCRIPTS  From within your worker
FINISH WORKING  From within your worker
RECAPIn your main UI thread
RECAPIn your main UI thread
YOU DON’T GET...- DOM (No UI manipulation)- No jQuery- No shared data
YOU DO GET...- Read only location object- XMLHTTPRequest (ajax)- setTimeout, setInterval
A WORKERS TOOLS- All the js language goodness- underscore.js- jquery.hive.pollen.js
GOTCHA’S-   Debugging can be a pain-   pollen.js is NOT jQuery-   Rails asset pipeline problems-   Browser support
BROWSER SUPPORT-   Chrome 4.0-   Firefox 3.5-   Safari 4.0-   iOS Safari-   Mobile Chrome-   IE 9 IE 10-   Android Browser
YOUR WEB PAGES CAN NOW DOMORE THAN ONETHING AT ONCE!
GO FORTH AND...  ...MULTITASK
GO FORTH AND...  ...MULTITASK
GO FORTH AND...  ...MULTITASK
ME  Steve Butterworth Twitter: @stevewillbeEmail: steve@flumes.com Web: www.flumes.com
Getting Started with HTML 5 Web workers
Upcoming SlideShare
Loading in...5
×

Getting Started with HTML 5 Web workers

1,522

Published on

A brief introduction to using HTML5 web workers

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,522
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Getting Started with HTML 5 Web workers

    1. 1. AN INTRODUCTION TOWEB WORKERSby Steve Butterworth (@stevewillbe)
    2. 2. “ Allow code to perform processor-intensive calculations without blocking the UI thread - Mozilla
    3. 3. “ Undoubtedly, the coolest new feature to arrive in the latest version of web browsers - John Resig
    4. 4. WHY?
    5. 5. USESLive syntax highlighting
    6. 6. USES Crunching lots of data JSON apis....parsing..... normalising....summing....ordering.....instantiating templates... + ‘live’ animated interface scalable & fast
    7. 7. ANIMATION Smooooooth animationSmooth animations.... 3D modelling.... Ray tracing....ambient occlusion Leave the UI thread for painting not for calculations
    8. 8. MEDIA PROCESSING image, video and audio processingmotion detection....image filters....face detection....audio analysis
    9. 9. HOW IT WORKSMultithreading has never been this simple
    10. 10. CREATE A WORKER
    11. 11. MAKE IT WORKTell it to do something useful
    12. 12. CODE THE WORKER Handle the messages it receives
    13. 13. CODE THE WORKERDo work and then notify the UI thread
    14. 14. CAPTURE RESULTSHandle messages from worker in UI thread
    15. 15. USEFUL NUGGETS Nice utility method in a worker
    16. 16. USEFUL NUGGETSCall any method in window scope easily
    17. 17. USEFUL NUGGETS logging from within the worker
    18. 18. USEFUL NUGGETSCheck if web workers are supported
    19. 19. INCLUDE SCRIPTS From within your worker
    20. 20. FINISH WORKING From within your worker
    21. 21. RECAPIn your main UI thread
    22. 22. RECAPIn your main UI thread
    23. 23. YOU DON’T GET...- DOM (No UI manipulation)- No jQuery- No shared data
    24. 24. YOU DO GET...- Read only location object- XMLHTTPRequest (ajax)- setTimeout, setInterval
    25. 25. A WORKERS TOOLS- All the js language goodness- underscore.js- jquery.hive.pollen.js
    26. 26. GOTCHA’S- Debugging can be a pain- pollen.js is NOT jQuery- Rails asset pipeline problems- Browser support
    27. 27. BROWSER SUPPORT- Chrome 4.0- Firefox 3.5- Safari 4.0- iOS Safari- Mobile Chrome- IE 9 IE 10- Android Browser
    28. 28. YOUR WEB PAGES CAN NOW DOMORE THAN ONETHING AT ONCE!
    29. 29. GO FORTH AND... ...MULTITASK
    30. 30. GO FORTH AND... ...MULTITASK
    31. 31. GO FORTH AND... ...MULTITASK
    32. 32. ME Steve Butterworth Twitter: @stevewillbeEmail: steve@flumes.com Web: www.flumes.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×