Angular 2

Enhance Web Development

Reactive

Le projet
Une vue d'ensemble du Reactive
Observable et RxJS
Opérations Immutable
Reactive State and @ngrx/store
Reactive async
Reactive Data Models

Le projet

Disponible sur la branche `ngrx`
Met à disposition un serveur avec `json-server`
Utilisation de `@ngrx/store`
Transformation de widgets en Reactive

Une vue d'ensemble du Reactive

Historique Angular
Pourquoi Reactive ?
Reactive Angular 2
Découvrons Reduc

Historique Angular

Ok, petit problème !

Des etats de partout

Il faut absolument gérer ces états d'une meilleure façon

Pourquoi ne pas les pousser ces états dans notre application ?

Pourquoi ne pas simplifier la gestion de évènement utilisateurs ?

Pourquoi Reactive ?

Dans cette formation, Reactive fait référence à quand nous réagissons au données poussées sur le temps
Utilisation des Observables Objects qui sont une extension du Pattern Observable

Observer Pattern

Iterator Pattern

Observable sequence

Time + Value

Value consumption

Reactive Angular 2

Les Observables sont au coeur des modules Angular 2 (Http, Animations)
Le pipe Async permet de les afficher facilement sans les transformer
Observables et Immutability permettent d'effacer tout les problèmes liés à la détection de changement

Observable sequence

this.http.get(BASE_URL) 
  .map(res => res.json()) 
  .map(payload => ({ type: 'ADD_ITEMS', payload }))
  .subscribe(action => this.store.dispatch(action))

Observable sequence

<div class="mdl-cell mdl-cell--6-col">
  <items-list [items]="items | async" 
              (selected)="selectItem($event)"
              (deleted)="deleteItem($event)">
  </items-list> 
</div> 
<div class="mdl-cell mdl-cell--6-col"> 
  <item-detail (saved)="saveItem($event)"
               (cancelled)="resetItem($event)"
               [item]="selectedItem | async">
    Select an Item
  </item-detail> 
</div>