Sebastian Bauer | Nero D&S GmbH

Web Workers

„Das Arbeitstier Browser“

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

Ü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?? ;-)

WEB WORKERS? WTF?

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

UND WOFÜR SO?

WEB WORKERS IM EINSATZ

Legen wir los!

Einfaches Beispiel

• Simulierte, 5 Sekunden lange

„Berechnung“

The Web Worker‘s Way - Dedicated Worker

Dedicated Worker – bsp1_worker.js

„Liebe ist die einzige Sache,die sich vermehrt,

wenn man sie teilt.“Autor unbekannt

SHARED WORKERS

Einen Schritt weiter..

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

Beispiel Shared Worker

Shared Worker –

bsp2_sharedworker.js

Shared Worker – bsp2_sharedworker.js

EINSCHRÄNKUNGEN

Was geht nicht?

Kein Zugriff auf den DOM!

• alert()

• document.getElementById()

• …

Kein Zugriff auf Elternseite!

• window Objekt

• Objekte aus globalem Scope

WAS GEHT DENN ÜBERHAUPT?

Geht’s noch?

Zugriff auf…

• navigator

• location (nur lesend!)

• XMLHttpRequest

• Object, Array, Date, Math, String

• setTimeout(), setInterval()

• importScripts() (innerhalb der gleichen

Domain)

• ApplicationCache API

Übertragen von Daten via

postMessage()

• Strings

• Arrays

• JSON Objekte

• …

Und natürlich…

„Spawnen“ weiterer Worker

Best Practices

• Worker spezialisieren!

• Keine riesigen Objekte hin- und

herschieben!

• addEventListener() benutzen

• Keine „Trivialarbeiten“

WEITERE EINSATZGEBIETE /

INTERESSANTE DEMOS

Motion Tracking with Web

Workers

http://bit.ly/ww_motion

„Simulated Annealing“

http://bit.ly/ww_annealing

Außerdem interessant für..

• Spiele-Engines

• Desktop Anwendungen (AIR?)

• Berechnungen von Graphen (Canvas)

• …euer Projekt? Ideen?

KOMPATIBILITÄT?

Zu guter Letzt…

WEB WORKERS FTW!

Web Workers – WTF?

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/