Skip to content

Commit

Permalink
seo
Browse files Browse the repository at this point in the history
  • Loading branch information
tidusIO committed Dec 22, 2024
1 parent 3692339 commit 2269c3f
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,14 @@ Weitere Quellen zum Verständnis von Web Workern:

* Offizielle W3C Spezifikation: <http://www.w3.org/TR/workers/>
* Wikipedia-Artikel: [Web Worker][5]
* Artikel auf Developer.com: [7 Things You Need To Know About Web Workers][6]

Web Worker werden von allen modernen (inklusive fast aller mobilen) Browsern unterstützt. Eine Übersicht hierzu bietet [Can I use...][7]
Web Worker werden von allen modernen (inklusive fast aller mobilen) Browsern unterstützt. Eine Übersicht hierzu bietet [Can I use...][6]

## Web Worker in einer AngularJS-Applikation

Die Behandlung von Web Workern in monkkee habe ich jüngst als Mini-Open-Source-Projekt ausgelagert. monkkee nutzt nun den ausgelagerten Code als AngularJS-Modul und verwendet einen fertigen Service per Dependency Injection.

Das Projekt heißt [webworkerpool.js][8] und ermöglicht es, einen Pool an Workern zu verwalten. Die maximale Anzahl an Workern lässt sich konfigurieren. Wird ein Worker benötigt, wird dieser dem Pool entnommen. Sobald dieser mit seiner Aufgabe fertig ist, kommt er in den Pool zurück. Falls keine Worker verfügbar sind, werden die Aufträge in eine Warteschlange eingestellt. Ob Aufträge direkt oder später ausgeführt werden, ist für den Auftraggeber bedeutungslos, da die Promise API (**$q**) zum Einsatz kommt.
Das Projekt heißt [webworkerpool.js][7] und ermöglicht es, einen Pool an Workern zu verwalten. Die maximale Anzahl an Workern lässt sich konfigurieren. Wird ein Worker benötigt, wird dieser dem Pool entnommen. Sobald dieser mit seiner Aufgabe fertig ist, kommt er in den Pool zurück. Falls keine Worker verfügbar sind, werden die Aufträge in eine Warteschlange eingestellt. Ob Aufträge direkt oder später ausgeführt werden, ist für den Auftraggeber bedeutungslos, da die Promise API (**$q**) zum Einsatz kommt.

Die Anzahl der Worker ist sehr wichtig. Für monkkee kommen aktuell maximal 8 gleichzeitige Worker zum Einsatz. Beim Spielen mit hohen Zahl habe ich einen Browser auch schon zum Absturz gebracht. Abhängig von den Aufgaben ist also ein sinnvoller Wert zu wählen.

Expand Down Expand Up @@ -95,7 +94,7 @@ Weitere Codebeispiele bieten die Jasmine-Specs des Projekts.

## Installation von webworkerpool.js

Im [dist-Ordner][9] des Github-Projekts befinden sich mehrere Dateien. Für den Einsatz mit Angular ist webworkerpool-core-angular.js oder die komprimierte Versionwebworkerpool-core-angular.min.js am Besten geeignet.
Im [dist-Ordner][8] des Github-Projekts befinden sich mehrere Dateien. Für den Einsatz mit Angular ist webworkerpool-core-angular.js oder die komprimierte Versionwebworkerpool-core-angular.min.js am Besten geeignet.

## Fazit

Expand All @@ -110,7 +109,6 @@ Durch den Einsatz der WebWorkerPool.js-Bibliothek lassen sich sehr einfach mehre
[3]: angularjs-web-worker-monkkee.png
[4]: angularjs-web-worker-communication.png
[5]: http://en.wikipedia.org/wiki/Web_worker
[6]: http://www.developer.com/lang/jscript/7-things-you-need-to-know-about-web-workers.html
[7]: https://caniuse.com/#feat=webworkers
[8]: https://github.com/bjoerne2/webworkerpool.js
[9]: https://github.com/bjoerne2/webworkerpool.js/tree/master/dist
[6]: https://caniuse.com/#feat=webworkers
[7]: https://github.com/bjoerne2/webworkerpool.js
[8]: https://github.com/bjoerne2/webworkerpool.js/tree/master/dist
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ Alle *Reducers* müssen [reine Funktionen](https://en.wikipedia.org/wiki/Pure_fu
* Sie produzieren keine *side effects* (z.B.: mutierter Zustand, Anrufe zum Backend)

Reducers erschaffen bei Änderungen immer ein neues State-Objekt, um Nebenwirkungen zu vermeiden.
Eine erweiterte Option ist, eine Bibliothek wie [immutable.js](https://immutable-js.github.io/immutable-js/) zu verwenden.
Eine erweiterte Option ist, eine Bibliothek wie [immutable.js](https://immutable-js.com/) zu verwenden.
Somit können Komponenten, die auf diesen State zugreifen, anhand der Object-Referenz entscheiden, ob sie neu rendern oder nicht.
Denn nur wenn der State durch ein neues Object dargestellt wird, hat sich der State verändert.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -230,5 +230,5 @@ Für andere CI-System könnte man unser vorher definiertes npm Skript nutzen. Je
- [Englischer Originalartikel von David](https://dev.to/angular/ci-ready-e2e-tests-for-angular-with-cypress-and-typescript-in-under-60-minutes-4f30)
- [Offizielle Angular Dokumentation](https://v17.angular.io/docs)
- [Briebug Cypress Schematic](https://github.com/briebug/cypress-schematic)
- [Offizielle Cypress Dokumentation](https://docs.cypress.i)
- [Offizielle Cypress Dokumentation](https://docs.cypress.io)
- [CircleCI](https://circleci.com/)
2 changes: 1 addition & 1 deletion _posts/2020-08-03-angular-10/2020-08-03-angular-10.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ Damit soll unter anderem erreicht werden, dass der initiale Ladevorgang so kurz
]
```

- ℹ️ Eine genaue Beschreibung für die einstellbaren Budgets gibt es [hier](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/budgets.md#budget-definition). Jeffrey Bosch hat einen [prägnanten Artikel](https://dev.to/jefiozie/a-new-type-of-angular-budget-on-the-block-4l8) geschrieben, der auf den `anyComponentStyle` eingeht
- ℹ️ Eine genaue Beschreibung für die einstellbaren Budgets gibt es [hier](https://web.dev/articles/performance-budgets-with-the-angular-cli). Jeffrey Bosch hat einen [prägnanten Artikel](https://dev.to/jefiozie/a-new-type-of-angular-budget-on-the-block-4l8) geschrieben, der auf den `anyComponentStyle` eingeht.

## Standardeinstellung für unterstützte Browser wurde verschlankt

Expand Down

0 comments on commit 2269c3f

Please sign in to comment.