1. Sebastian Bauer | Nero D&S GmbH
Web Workers
„Das Arbeitstier Browser“

2. Wer spricht?
• Sebastian Bauer
• Team Leader Intranet Services Team
• Webentwickler aus Leidenschaft
• „Web/Mobile addicted“
• @litervollmilch
• http://xing.com/profile/Sebastian_Bauer22
• http://www.itkrauts.com

3. Über die Nero D&S GmbH
• Entwickler für Liquid Media Technologien
• Tochter der Nero AG
• 1995 gegründet
• Hauptsitz: Karlsbad, Deutschland
• Regionale Niederlassungen:
• Karlsbad, Deutschland
• Glendale, Kalifornien, USA
• Yokohama, Japan
• Ca. 500 Mitarbeiter weltweit
• Über 300 Millionen Installationen
• Job gesucht?? ;-)

5. WEB WORKERS? WTF?

6. Ein Überblick über Web Workers
• W3C Working Draft
• HTML5
• JavaScript API für Arbeitsprozesse
im Hintergrund
• Parallelisierung ohne UI Blocking
• Kein echtes Multi-Threading!
• Dedicated Workers / Shared Workers

7. UND WOFÜR SO?

12. Legen wir los!
WEB WORKERS IM EINSATZ

13. Einfaches Beispiel
• Simulierte, 5 Sekunden lange
„Berechnung“

14. The Web Worker‘s Way - Dedicated Worker

15. Dedicated Worker – bsp1_worker.js

16. „Liebe ist die einzige Sache,
die sich vermehrt,
wenn man sie teilt.“
Autor unbekannt

17. Einen Schritt weiter..
SHARED WORKERS

18. Ein Worker, Sie alle zu
knechten..
• Ein Worker für mehrere Seiten
• Verbindung über „Ports“
• „Stirbt“ wenn alle Seiten geschlossen
• Posten von Nachrichten an alle
„Ports“ möglich

19. Beispiel Shared Worker

20. Shared Worker –
bsp2_sharedworker.js

21. Shared Worker – bsp2_sharedworker.js

22. Was geht nicht?
EINSCHRÄNKUNGEN

23. Kein Zugriff auf den DOM!
• alert()
• document.getElementById()
•…

24. Kein Zugriff auf Elternseite!
• window Objekt
• Objekte aus globalem Scope

25. Geht’s noch?
WAS GEHT DENN ÜBERHAUPT?

26. Zugriff auf…
• navigator
• location (nur lesend!)
• XMLHttpRequest
• Object, Array, Date, Math, String
• setTimeout(), setInterval()
• importScripts() (innerhalb der gleichen
Domain)
• ApplicationCache API

27. Übertragen von Daten via
postMessage()
• Strings
• Arrays
• JSON Objekte
•…

28. Und natürlich…
„Spawnen“ weiterer Worker

29. Best Practices
• Worker spezialisieren!
• Keine riesigen Objekte hin- und
herschieben!
• addEventListener() benutzen
• Keine „Trivialarbeiten“

30. WEITERE EINSATZGEBIETE /
INTERESSANTE DEMOS

31. Motion Tracking with Web
Workers
http://bit.ly/ww_motio

32. „Simulated Annealing“
http://bit.ly/ww_annealing

33. Außerdem interessant für..
• Spiele-Engines
• Desktop Anwendungen (AIR?)
• Berechnungen von Graphen (Canvas)
• …euer Projekt? Ideen?

34. Zu guter Letzt…
KOMPATIBILITÄT?

36. Web Workers – WTF?
WEB WORKERS FTW!

37. Bildernachweis
• -nw- @flickr: http://www.flickr.com/photos/-nw-/4900267921/
• Éole @flickr: http://www.flickr.com/photos/eole/73301169/
• Saschaaa @ flickr: http://www.flickr.com/photos/saschaaa/152502539/
• Stefan Baudy @flick: http://www.flickr.com/photos/-bast-/349497988/
• RavenFire @flickr:
http://www.flickr.com/photos/escapethematrix/525800552/
• Ka Lodger @flickr: http://www.flickr.com/photos/kaeau/31336163/
• Chris-Håvard Berge @flickr:
http://www.flickr.com/photos/chberge/4113323306/
• Tara Hunt @flickr:
http://www.flickr.com/photos/missrogue/199208087/