Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 addicte...
Über die Nero D&S GmbH
•   Entwickler für Liquid Media Technologien
•   Tochter der Nero AG
•   1995 gegründet
•   Hauptsi...
WEB WORKERS? WTF?
Ein Überblick über Web Workers
• W3C Working Draft
• HTML5
• JavaScript API für Arbeitsprozesse
  im Hintergrund
• Paralle...
UND WOFÜR SO?
Legen wir los!

WEB WORKERS IM EINSATZ
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
Einen Schritt weiter..

SHARED WORKERS
Ein Worker, Sie alle zu
knechten..
• Ein Worker für mehrere Seiten
• Verbindung über „Ports“
• „Stirbt“ wenn alle Seiten g...
Beispiel Shared Worker
Shared Worker –
bsp2_sharedworker.js
Shared Worker – bsp2_sharedworker.js
Was geht nicht?

EINSCHRÄNKUNGEN
Kein Zugriff auf den DOM!
• alert()
• document.getElementById()
•…
Kein Zugriff auf Elternseite!
• window Objekt
• Objekte aus globalem Scope
Geht’s noch?

WAS GEHT DENN ÜBERHAUPT?
Zugriff auf…
• navigator
• location (nur lesend!)
• XMLHttpRequest
• Object, Array, Date, Math, String
• setTimeout(), set...
Ü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
• K...
WEITERE EINSATZGEBIETE /
INTERESSANTE DEMOS
Motion Tracking with Web
Workers




               http://bit.ly/ww_motio
„Simulated Annealing“




  http://bit.ly/ww_annealing
Außerdem interessant für..
• Spiele-Engines
• Desktop Anwendungen (AIR?)
• Berechnungen von Graphen (Canvas)
• …euer Proje...
Zu guter Letzt…

KOMPATIBILITÄT?
Web Workers – WTF?

WEB WORKERS FTW!
Bildernachweis
•   -nw- @flickr: http://www.flickr.com/photos/-nw-/4900267921/
•   Éole @flickr: http://www.flickr.com/pho...
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
Nächste SlideShare
Wird geladen in …5
×

Web Workers - Das Arbeitstier Browser

2.592 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Web Workers - Das Arbeitstier Browser

  1. 1. Sebastian Bauer | Nero D&S GmbH Web Workers „Das Arbeitstier Browser“
  2. 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. 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?? ;-)
  4. 4. WEB WORKERS? WTF?
  5. 5. 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
  6. 6. UND WOFÜR SO?
  7. 7. Legen wir los! WEB WORKERS IM EINSATZ
  8. 8. Einfaches Beispiel • Simulierte, 5 Sekunden lange „Berechnung“
  9. 9. The Web Worker‘s Way - Dedicated Worker
  10. 10. Dedicated Worker – bsp1_worker.js
  11. 11. „Liebe ist die einzige Sache, die sich vermehrt, wenn man sie teilt.“ Autor unbekannt
  12. 12. Einen Schritt weiter.. SHARED WORKERS
  13. 13. 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
  14. 14. Beispiel Shared Worker
  15. 15. Shared Worker – bsp2_sharedworker.js
  16. 16. Shared Worker – bsp2_sharedworker.js
  17. 17. Was geht nicht? EINSCHRÄNKUNGEN
  18. 18. Kein Zugriff auf den DOM! • alert() • document.getElementById() •…
  19. 19. Kein Zugriff auf Elternseite! • window Objekt • Objekte aus globalem Scope
  20. 20. Geht’s noch? WAS GEHT DENN ÜBERHAUPT?
  21. 21. Zugriff auf… • navigator • location (nur lesend!) • XMLHttpRequest • Object, Array, Date, Math, String • setTimeout(), setInterval() • importScripts() (innerhalb der gleichen Domain) • ApplicationCache API
  22. 22. Übertragen von Daten via postMessage() • Strings • Arrays • JSON Objekte •…
  23. 23. Und natürlich… „Spawnen“ weiterer Worker
  24. 24. Best Practices • Worker spezialisieren! • Keine riesigen Objekte hin- und herschieben! • addEventListener() benutzen • Keine „Trivialarbeiten“
  25. 25. WEITERE EINSATZGEBIETE / INTERESSANTE DEMOS
  26. 26. Motion Tracking with Web Workers http://bit.ly/ww_motio
  27. 27. „Simulated Annealing“ http://bit.ly/ww_annealing
  28. 28. Außerdem interessant für.. • Spiele-Engines • Desktop Anwendungen (AIR?) • Berechnungen von Graphen (Canvas) • …euer Projekt? Ideen?
  29. 29. Zu guter Letzt… KOMPATIBILITÄT?
  30. 30. Web Workers – WTF? WEB WORKERS FTW!
  31. 31. 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/

×