Your SlideShare is downloading. ×
  • Like
Getting Started with HTML 5 Web workers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Getting Started with HTML 5 Web workers

  • 1,367 views
Published

A brief introduction to using HTML5 web workers

A brief introduction to using HTML5 web workers

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,367
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
23
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

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