Das Dokument präsentiert Sebastian Bauer von der Nero D&S GmbH und erklärt das Konzept der Web Workers, eine JavaScript-API zur Durchführung von Hintergrundprozessen. Es werden die Funktionsweise, typische Anwendungsbereiche sowie Einschränkungen von Dedicated und Shared Workers beschrieben. Abschließend werden Best Practices und interessante Anwendungsmöglichkeiten von Web Workers in der Entwicklung erwähnt.

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/