Skip to content

Commit

Permalink
seo
Browse files Browse the repository at this point in the history
  • Loading branch information
tidusIO committed Dec 21, 2024
1 parent 540a1f8 commit e435ead
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,7 @@ case TodoActions.SET_CURRENT_FILTER:
```

### Die Todo-Liste anzeigen
Wir verwenden eine untergeordnete Komponente todo, um ein einzelnes Todo zu verkapseln, das einige Eigenschaften als Attribute (id, abgeschlossen) und die Beschreibung (Text) als Inhalt übergibt. Dieses Muster ist als [Container Component](https://medium.com/@learnreact/container-components-c0e67432e005) bekannt.
Wir verwenden eine untergeordnete Komponente todo, um ein einzelnes Todo zu verkapseln, das einige Eigenschaften als Attribute (id, abgeschlossen) und die Beschreibung (Text) als Inhalt übergibt. Dieses Muster ist als [Container Component](https://medium.com/@learnreact/container-components-c0e67432e005){:rel="noopener noreferrer nofollow"} bekannt.

```javascript
//src/todoList.ts
Expand Down Expand Up @@ -520,6 +520,6 @@ Lass uns überprüfen, wie sich eine Redux-Anwendung in verschiedenen Stadien ve



Dies ist eine Übersetzung und Überarbeitung von Gerard's großartigem Artikel [Angular — Introduction to Redux](https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e)
Dies ist eine Übersetzung und Überarbeitung von Gerard's großartigem Artikel [Angular — Introduction to Redux](https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e){:rel="noopener noreferrer nofollow"}

Benutze diese Links für die finalen Lösungen: [Demo](https://embed.plnkr.co/6UJUYh7nbyU3TMS2Xd6l/) - [Source](https://plnkr.co/edit/6UJUYh7nbyU3TMS2Xd6l?p=preview)
16 changes: 8 additions & 8 deletions _posts/2020-08-03-angular-10/2020-08-03-angular-10.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Der Grund ist schnell erklärt CommonJS-Pakete können durch Tree-Shaking-Algori

![CLI Output vom Angular Build](cli-output.png)

Bildquelle: [https://blog.angular.io/version-10-of-angular-now-available-78960babd41](https://blog.angular.io/version-10-of-angular-now-available-78960babd41)
Bildquelle: [https://blog.angular.io/version-10-of-angular-now-available-78960babd41](https://blog.angular.io/version-10-of-angular-now-available-78960babd41){:rel="noopener noreferrer nofollow"}

### Mit dem neuen Strict Mode mehr Typsicherheit und Kontrolle über die JS-Bundles

Expand All @@ -80,7 +80,7 @@ Der Einsatz von `--strict` bewirkt folgende Einstellungen in der TypeScript-Konf
}
```

- ℹ️ Eine detaillierte Erläuterung zu den Compiler-Optionen von TypeScript gibt es [hier](https://www.typescriptlang.org/docs/handbook/compiler-options.html).
- ℹ️ Eine detaillierte Erläuterung zu den Compiler-Optionen von TypeScript gibt es [hier](https://www.typescriptlang.org/docs/handbook/compiler-options.html){:rel="noopener noreferrer nofollow"}.

Darüber hinaus bewirkt Angulars `strict-mode` , dass in der `angular.json` die Maximalgröße der Bundles stark reduziert wird.

Expand Down Expand Up @@ -187,8 +187,8 @@ ng update @angular/core @angular/cli --force --create-commits
Das Update auf Angular 10 aktualisiert übrigens auch TypeScript, TSLint und tslib.

- TypeScript [](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html)v[3.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html)
- TSLib v[2.0](https://github.com/microsoft/tslib/releases/tag/2.0.0)
- TSLint v[6](https://github.com/palantir/tslint/blob/master/CHANGELOG.md)
- TSLib v[2.0](https://github.com/microsoft/tslib/releases/tag/2.0.0){:rel="noopener noreferrer nofollow"}
- TSLint v[6](https://github.com/palantir/tslint/blob/master/CHANGELOG.md){:rel="noopener noreferrer nofollow"}

## Fazit

Expand All @@ -200,10 +200,10 @@ Zum Ende bleibt zu sagen: Wir sind schon sehr gespannt auf Angular 11!

## Ressourcen

[Version 10 of Angular Now Available](https://blog.angular.io/version-10-of-angular-now-available-78960babd41)
[Version 10 of Angular Now Available](https://blog.angular.io/version-10-of-angular-now-available-78960babd41){:rel="noopener noreferrer nofollow"}

[Angular 10 erschienen - das sind die Neuerungen auf einen Blick](https://entwickler.de/online/javascript/angular-10-579937743.html)
[Angular 10 erschienen - das sind die Neuerungen auf einen Blick](https://entwickler.de/online/javascript/angular-10-579937743.html){:rel="noopener noreferrer nofollow"}

[What's new in Angular 10](https://www.infoworld.com/article/3537449/whats-new-in-angular-10.html)
[What's new in Angular 10](https://www.infoworld.com/article/3537449/whats-new-in-angular-10.html){:rel="noopener noreferrer nofollow"}

[What is New in Angular 10?](https://volosoft.com/blog/what-is-new-in-angular-10)
[What is New in Angular 10?](https://volosoft.com/blog/what-is-new-in-angular-10){:rel="noopener noreferrer nofollow"}
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ categories: "angular signals update"

## Das Angular 16 Update

Vielleicht hast Du es mitbekommen: Mit Angular 16 wurde das, gemessen am Umfang, größte Update nach dem initialen Release von Angular veröffentlicht. Neben Features wie [Non-Destructive Hydration](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d#:~:text=of%20full%20app-,non%2Ddestructive%20hydration,-!) oder dem Support für Typescript 5.0 enthält das Update drei Reactivity Primitives und damit einen Mechanismus für Reaktivität. Sarah Drasnger, Director of Engineering bei Google, spricht auf [Twitter bzw. X](https://twitter.com/sarah_edo/status/1628065696247857152) sogar von einer Angular Renaissance.
Vielleicht hast Du es mitbekommen: Mit Angular 16 wurde das, gemessen am Umfang, größte Update nach dem initialen Release von Angular veröffentlicht. Neben Features wie [Non-Destructive Hydration](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d#:~:text=of%20full%20app-,non%2Ddestructive%20hydration,-!){:rel="noopener noreferrer nofollow"} oder dem Support für Typescript 5.0 enthält das Update drei Reactivity Primitives und damit einen Mechanismus für Reaktivität. Sarah Drasnger, Director of Engineering bei Google, spricht auf [Twitter bzw. X](https://twitter.com/sarah_edo/status/1628065696247857152){:rel="noopener noreferrer nofollow"} sogar von einer Angular Renaissance.

## Motivation hinter Signals

Expand All @@ -24,7 +24,7 @@ RxJS hat in Angular Anwendungen zwei Kernaufgaben: die Koordination von asynchro

Ein Signal in Angular hält immer einen Wert und Konsumenten können diesen Wert lesen. Ein Signal ist ein zyklischer Prozess und jedes Mal, wenn es seinen Zyklus durchläuft, produziert er eine bestimmte Menge an Informationen.

Ist also eine bestimmte Komponente ein Consumer des Signals, weil es die Informationen benötigt, so wird der Consumer informiert über Änderungen. Wie auch RxJS implementiert ein Signal das [Observer-Pattern](https://de.wikipedia.org/wiki/Beobachter_(Entwurfsmuster)), setzt dieses technisch allerdings anders um.
Ist also eine bestimmte Komponente ein Consumer des Signals, weil es die Informationen benötigt, so wird der Consumer informiert über Änderungen. Wie auch RxJS implementiert ein Signal das [Observer-Pattern](https://de.wikipedia.org/wiki/Beobachter_(Entwurfsmuster)){:rel="noopener noreferrer nofollow"}, setzt dieses technisch allerdings anders um.

Angular unterscheidet bei den Signals zwischen „Writable Signals“ und „Computed Signals“.

Expand Down Expand Up @@ -141,7 +141,7 @@ const canDeleteInvoice$ = combineLatest([permissions$, isAuthenticated$]).pipe(
);
```

Würden sich also mit diesem Ansatz die Streams `permissions$` und `isAuthenticated$` aktualiseren, so kann es durchaus passieren, dass unerwartete Ergebnisse herauskommen: Angenommen der Benutzer wird angemeldet (isAuthenticated$ wird `true` emitten) und die Berechtigung "createInvoice" wird entzogen zur gleichen Zeit. Das würde kurzzeitig dazu führen, dass `canDeleteInvoices$` true emitted bevor es dann mit dem Emit von `permissions$` wieder `false` wird. Man nennt das auch das [Diamond-Problem](https://de.wikipedia.org/wiki/Diamond-Problem).
Würden sich also mit diesem Ansatz die Streams `permissions$` und `isAuthenticated$` aktualiseren, so kann es durchaus passieren, dass unerwartete Ergebnisse herauskommen: Angenommen der Benutzer wird angemeldet (isAuthenticated$ wird `true` emitten) und die Berechtigung "createInvoice" wird entzogen zur gleichen Zeit. Das würde kurzzeitig dazu führen, dass `canDeleteInvoices$` true emitted bevor es dann mit dem Emit von `permissions$` wieder `false` wird. Man nennt das auch das [Diamond-Problem](https://de.wikipedia.org/wiki/Diamond-Problem){:rel="noopener noreferrer nofollow"}.


## Effects
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -240,22 +240,22 @@ Wie immer laden wir euch ein, Teil unserer [Angular Community auf Discord](https

### Signals/Realitivity/Producer-Consumer-Pattern

- [How to build an event emitter in JavaScript - educative.io](https://www.educative.io/answers/how-to-build-an-event-emitter-in-javascript)
- [How to build an event emitter in JavaScript - educative.io](https://www.educative.io/answers/how-to-build-an-event-emitter-in-javascript){:rel="noopener noreferrer nofollow"}

- [How Angular Signals Solves an Age-Old Problem - betterprogramming.pub](https://betterprogramming.pub/how-angular-signals-solves-an-age-old-problem-ae7ec60f042f)
- [How Angular Signals Solves an Age-Old Problem - betterprogramming.pub](https://betterprogramming.pub/how-angular-signals-solves-an-age-old-problem-ae7ec60f042f){:rel="noopener noreferrer nofollow"}

- [Angular’s Signal Revolution: Effortless Change Detection Explained - netbasal.com](https://netbasal.com/angulars-signal-revolution-effortless-change-detection-explained-unveiling-the-inner-workings-8a5e44c95b65)
- [Angular’s Signal Revolution: Effortless Change Detection Explained - netbasal.com](https://netbasal.com/angulars-signal-revolution-effortless-change-detection-explained-unveiling-the-inner-workings-8a5e44c95b65){:rel="noopener noreferrer nofollow"}

### Change Detection

- [Deep dive into the OnPush change detection strategy in Angular - Max Koretskyi](https://medium.com/angular-in-depth/deep-dive-into-the-onpush-change-detection-strategy-in-angular-fab5e4da1d69){:rel="noopener noreferrer nofollow"}

- [Understating Angular Change Detection with example - DHANANJAY KUMAR](https://debugmode.net/2018/06/05/understating-angular-change-detection-with-example/)
[https://www.thinktecture.com/en/angular/whats-the-hype-onpush/](https://www.thinktecture.com/en/angular/whats-the-hype-onpush/)
- [Understating Angular Change Detection with example - DHANANJAY KUMAR](https://debugmode.net/2018/06/05/understating-angular-change-detection-with-example/){:rel="noopener noreferrer nofollow"}
[https://www.thinktecture.com/en/angular/whats-the-hype-onpush/](https://www.thinktecture.com/en/angular/whats-the-hype-onpush/){:rel="noopener noreferrer nofollow"}

- [Future of Change Detection in Angular with Signals - Thomas Laforge](https://medium.com/ngconf/future-of-change-detection-in-angular-with-signals-fb367b66a232){:rel="noopener noreferrer nofollow"}

### Memes

- [Angular Memes - github.com](https://github.com/dzhavat/angular-memes)
- [Angular Memes - github.com](https://github.com/dzhavat/angular-memes){:rel="noopener noreferrer nofollow"}

Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ Ja, und wir sind sogar bereits mitten in der "Angular Renaissance"!
Betrachten wir die Entwicklung des Frameworks der letzten Jahre, wird eines deutlich: die Angular-User-Experience hatte mindestens eine ähnliche Priorität wie die Performance des Frameworks. Features wie Signals oder der neue Control Flow erhöhen nicht nur die Performance des Frameworks, sondern vereinfachen vor allem das Arbeiten mit Angular. Auch das neue moderne Design muss in dieser Logik gedacht werden.
Die Entwicklung ist kein Zufall.Über die letzten Jahre hat sich das Angular-Team wieder verstärkt auf das Feedback und die Bedürfnisse der Angular-Community fokussiert und aktiv in die Weiterentwicklung des Frameworks integriert. Insbesondere die [Ergebnisse der jährlichen Angular-Umfrage](https://blog.angular.io/angular-developer-survey-2023-86372317c95f) tragen zur Priorisierung für das nächste Jahr bei, wie es Minko Gechev selbst sagt:
Die Entwicklung ist kein Zufall.Über die letzten Jahre hat sich das Angular-Team wieder verstärkt auf das Feedback und die Bedürfnisse der Angular-Community fokussiert und aktiv in die Weiterentwicklung des Frameworks integriert. Insbesondere die [Ergebnisse der jährlichen Angular-Umfrage](https://blog.angular.io/angular-developer-survey-2023-86372317c95f){:rel="noopener noreferrer nofollow"} tragen zur Priorisierung für das nächste Jahr bei, wie es Minko Gechev selbst sagt:
>One of the strongest guiding indicators which has been highly influential in our prioritization process are the results from the Angular developer survey.
Expand Down

0 comments on commit e435ead

Please sign in to comment.