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.555 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.555
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
237
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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/

×