title

filename

Workshop IDEV

Angular.js 8

Décembre 2019

Telegram

Tous les garçons cool l'ont !

Demandez le programme...

AngularJS par la pratique
Programme / courbe d'apprentissage
The occasional diatribe

On plonge !

Si vous aimez...	vous aimerez...
☁️ les nuages ☁️	stackblitz.com
Votre laptop	node.js + cli.angular.io
Emacs	`M-x package-install` ⏎ `tide` ⏎
... vous ne savez pas	Essayez Visual Studio Code

Exercice 1 : “Hello world”

Vous connaissez la musique...

Exercice 1

💡

Commencer par la vue «mock» (avec le HTML souhaité, mais aucun comportement)
Pas besoin de <form>

Exercice 1

«Moustacher» le mot Angular de Hello, Angular depuis une variable d'instance du contrôleur.

🔧 Avec Chrome et Augury, c'est suffisant pour bidouiller «à la main» :

Exercice 1

Google est votre ami.

<input type="text" (input)="console.log('bah!')">

... Mais Angular ? Pas toujours.

@Component{...}
export class AppComponent {
    console = window.console
}

Exercice 1

Comment savoir quoi mettre dans (input)="..." ?

Le débogueur du navigateur est aussi votre ami.

<input type="text" (input)="inputChanged()">

@Component{...}
export class AppComponent {
    inputChanged() {
        debugger;
    }
}

Exercice 1

💡

Tous les «tuyaux» vus pour l'exercice 1 restent valables dans la vraie vie.

Division du travail (HTML, CSS, JS)
Buts intermédiaires
Outillage : débogueur du navigateur + Augury

Exercice 1 : solution

https://stackblitz.com/edit/epfl-angular-exercice1

Exercice 1 : décortiquage

Note:

app.component.ts : le Component
app.module.ts : I is serious framwerk. I haz modules.
Une brève plongée dans les templates et les événements
Les dépendances dans package.json, et en particulier les @types

Exercice 2

refactorer pour créer HelloComponent

<h1>Hello, {{ name }}!</h1>

Pour le ~~JavaScript~~ TypeScript, à vous de jouer !

Exercice 2 : solution

Si vous aviez deviné que la solution serait à l'adresse

https://stackblitz.com/edit/epfl-angular-exercice2

... alors vous avez gagné !

Fin de l'étape

Révisions JS (npm, ES2015, import / export)
TypeScript : types... et décorateurs
Angular : templates, événements... Et bien plus encore !

Tests avec

ng test

Note:

À présent chacun doit installer Angular sur son laptop, si pas déjà fait

Exercice 3

Pré-requis : ng test est «vrai rouge» (pas de crash)

→ Si nécessaire, se resynchroniser depuis go/workshop-angular-exercices

Exercice 3

`app.component.spec.ts`

// ...
describe('AppComponent', () => {
  // ...
  it('updates the title', () => {
  })
})

`app.component.spec.ts`

// ...
describe('AppComponent', () => {
  // ...
  it('updates the title', () => {
    // ...
  })
})

describe, it ← le BDD de Jasmine

// ...
describe('AppComponent', () => {
  // ...
  fit('updates the title', () => {
        // ...
  })
})

💡 fdescribe existe également (f comme “focused”)

// ...
describe('AppComponent', () => {
  // ...
  it('updates the title', () => {
    const fixture = TestBed.createComponent(AppComponent);
  })
})

// ...
describe('AppComponent', () => {
  // ...
  it('updates the title', () => {
    const fixture = TestBed.createComponent(AppComponent);

    const input = fixture.nativeElement.
          querySelector('input');
    // ...
  })
})

... Wait wat ?


  it('updates the title', () => {
      const fixture = TestBed.createComponent(AppComponent);

      debugger;
      // ...
  })

fixture
fixture.nativeElement
... est un élément DOM
... Donc MDN est votre ami


  it('updates the title', () => {
      const fixture = TestBed.createComponent(AppComponent);

      const input = fixture.nativeElement.
          querySelector('input');


      input.value = 'World';
      input.dispatchEvent(new Event('input'));

      // ...
})

Note: Le fait que nous utilisons les API MDN rend la compatibilité des tests sous IE / Edge nettement plus... hasardeuse ? À vrai dire je n'en sais rien, nous sommes quand même en 2019.

  it('updates the title', () => {
    const fixture = TestBed.createComponent(AppComponent);

    const input = fixture.nativeElement.
          querySelector('input') as HTMLInputElement;
    input.value = 'World';
    input.dispatchEvent(new Event('input'));

    // ...

    expect(fixture.nativeElement.
           querySelector('h1').textContent).toContain('World');
  })

expect, toContain ← moar Jasmine


      // ...    // ???


      fixture.detectChanges();

Pour finir...

go/workshop-angular-exercices

// ...
describe('AppComponent', () => {
  // ...
  it('updates the title', () => {
    const fixture = TestBed.createComponent(AppComponent);

    const input = fixture.nativeElement.
          querySelector('input') as HTMLInputElement;
    input.value = 'World';
    input.dispatchEvent(new Event('input'));

    fixture.detectChanges();

    expect(fixture.nativeElement.
           querySelector('h1').textContent).toContain('World');
  })
})

Fin de l'étape

Karma
Jasmine et le BDD
L'API du DOM selon Mozilla
Le mécanisme¹ de détection des changements

¹ Ou plus précisément, son absence

Quelques derniers conseils...

Peaufinez vos recherches sur Google ("2019", "Angular 7", "Angular 8")

Quelques derniers conseils...

Ne vous éloignez pas trop des sentiers battus ! Votre app risquerait (par exemple) de ne plus compiler en prod'
Malgré cela, attendez-vous à des changements incompatibles (ex : adoption de async / await et Puppeteer pour les tests unitaires)

Exercice 4 : chercher-en-tapant

Test-first¹
RxJS

Exercice 4

stackblitz.com/edit/epfl-angular-exercice4-jquery

Exercice 4

... Ça ne marche pas très bien

Exercice 4

ng new --defaults --no-routing search-as-you-type
cd search-as-you-type
ng test

```
ng generate component search-as-you-type
ng test
```
💡 ng create change les dépendances, il faut donc stopper/redémarrer les tests en continu (commande ng test).

Exercice 4 : révisions

Faisons une mini-app pour les tests manuels :

Tout effacer dans src/app/app.component.html; remplacer par
```
<app-search-as-you-type></app-search-as-you-type>
```
ng serve @ http://localhost:4200/
ng test : revenir à la barre verte (solution)

Exercice 4 : diviser pour régner

Une «carrosserie» graphique
- Fournit : les mots-clefs de recherche
- Reçoit : les résultats
Un service de recherche
La tuyauterie pour les relier : RxJS

Carrosserie graphique

Test first second

... À ce stade de notre apprentissage, commençons par un test manuel, et voyons en second lieu comment l'automatiser.

<input type="text" #searchterm
    (keyup)="search(searchterm.value)">

Suite et fin

Test second

angular.io/guide/testing
... et Google
By.css(...)
.triggerEventHandler()
(exemple)
spyOn (exemple)

Test second

Solution

Test pas du tout maintenant

it("shows results");

RxJS

  search(value: string) {
    console.log(value);  // TODO: peut mieux faire.
  }

RxJS et les `Observable`s

... et les Subjects

import { Subject } from 'rxjs';
// ...
  private searchString = new Subject<string>();

// ...
  search(value: string) {
    this.searchString.next(value);
  }

RxJS et les `Subscriptions`

export class SearchAsYouTypeComponent implements OnInit {
  // ...
  ngOnInit() {
    this.searchString.subscribe(console.log);
  }

}

RxJS et les fuites de mémoire

import { debounceTime, tap } from 'rxjs/operators';
// ...

export class SearchAsYouTypeComponent implements OnInit {
  // ... 

  private searchString = new Subject<string>();
  searchStringDebounced = searchString.pipe(
      debounceTime(400),
      tap(console.log)
  );
}

RxJS : au-delà de `console.log`

.pipe()

import { tap, debounceTime,
         distinctUntilChanged } from 'rxjs/operators';

export class SearchAsYouTypeComponent implements OnInit {
  searchStringDebounced = this.searchString.pipe(
    debounceTime(400),
    distinctUntilChanged(),
    tap(console.log)
  );
}

🚑 Le diff

... Plus rien.

Les Observables sont paresseux. Tant qu'on n'y .subscribe() pas, ils ne font rien.

&lt;p&gt;Current search term:&lt;/p&gt;
&lt;pre&gt;{{searchStringDebounced | async }}&lt;/pre&gt;

| async rend la dernière valeur d'un Observable, n'a pas besoin d'être importé, et est auto-unsubscribe.

Exercice 4 : l'exercice

Implémenter le search-as-you-type et présenter votre approche.

Ne pas s'attarder sur la présentation des résultats (console.log() ou bien <pre>{{ searchResults | async | json}}</pre>)
Rappel : la version jQuery contient une fonction searchEPFL() prête à copier-coller.

L'approche RxJS

Avec l'opérateur switchMap (démo sur rxmarbles.com), on peut

créer un nouvel Observable pour chaque valeur de l'Observable «parent»;
fusionner les valeurs.

💡 La fonction «switchMappée» peut renvoyer une Promise à la place d'un Observable.

Note: Ce n'est pas la solution parfaite pour l'instant.

L'approche RxJS

En savoir plus sur switchMap et son utilité pour le search-as-you-type : blog.angular-university.io/rxjs-higher-order-mapping/ (§ “Search TypeAhead”)

L'approche RxJS

Corrigé

Fin de l'étape

RxJS : Observables, opérateurs, Observables d'Observables
Functional reactive programming
Mieux que ~~les Promises~~ rien (jQuery et asynchronie incontrôlée)
Beaucoup de progrès à faire
- Rendu des résultats
- Limitation / annulation des requêtes
- Couverture de tests

Chercher-en-tapant : on améliore

Au cours de cette partie,

nous explorerons l'API HTTP d'Angular, qui propose des requêtes annulables
nous verrons comment séparer (et tester séparément) le code «graphique» et le client de l'API

Injection de dépendances

constructor(private http : HttpClient) {}

Exercice 5

Réécrire la fonction searchEPFL(q) en termes de @angular/common/http.

→ blog.angular-university.io/angular-http

Exercice 5

Solution

⊕	⊖
Meilleur style Les requêtes sont à présent annulables	Les tests sont cassés (solution)

Fin d'étape

Du point de vue du consommateur, l'injection de dépendances

fournit automagiquement des singletons à tout endroit de la hiérarchie des composants,
permet d'utiliser des instances séparées pour le test et la production (⇒ tests hermétiques)

Pour aller plus loin...

Couverture de tests
- Erreurs côté serveur (500 / timeouts) — Mocking avec HttpTestingController
- Refactorer pour extraire le pipe-line comme un nouvel opérateur RxJS, et le mettre sous tests (“marble testing”)
Injection de dépendances en tant que producteur (ex : I18NService)

Note:

Sujets potentiellement intéressants pour la journée 3

Le décor

ng-select
ng-bootstrap

Exercice 6 : ng-select + chercher-en-tapant

Partir du premier exemple de la doc de ng-select
Écouter l'événement search (plutôt que chercher une seule fois dans ngOnInit())

Exercice 6 : ng-select + chercher-en-tapant

Tuyauter ce qui doit l'être pour rechercher dans l'API de l'EPFL
- .pipe(map()) pour transformer les .sciper en .id

Solution

Exercice 7

Même chose que l'exercice 6, mais sans le cloud.

Raccrochage au debounceTime etc. des exercices précédents
(Optionnel) Réutiliser l'idée d'un DataService injecté comme fait dans le StackBlitz

Files

prez-Angular.md

Latest commit

History

prez-Angular.md

File metadata and controls

Workshop IDEV

Angular.js 8

go/workshop-angular

Telegram

Demandez le programme...

On plonge !

Exercice 1 : “Hello world”

Exercice 1

Exercice 1

Exercice 1

Exercice 1

Exercice 1

Exercice 1 : solution

Exercice 1 : décortiquage

Exercice 2

Exercice 2 : solution

Fin de l'étape

Tests avec

Exercice 3

Exercice 3

app.component.spec.ts

app.component.spec.ts

... Wait wat ?

Pour finir...

go/workshop-angular-exercices

Fin de l'étape

Quelques derniers conseils...

Quelques derniers conseils...

Exercice 4 : chercher-en-tapant

Exercice 4

Exercice 4

Exercice 4

Exercice 4 : révisions

Exercice 4 : diviser pour régner

Carrosserie graphique

Test first second

Test second

Test second

Test pas du tout maintenant

RxJS

RxJS et les Observables

RxJS et les Subscriptions

RxJS et les fuites de mémoire

RxJS : au-delà de console.log

Exercice 4 : l'exercice

L'approche RxJS

L'approche RxJS

L'approche RxJS

Fin de l'étape

Chercher-en-tapant : on améliore

Injection de dépendances

Exercice 5

Exercice 5

Fin d'étape

Pour aller plus loin...

Le décor

Exercice 6 : ng-select + chercher-en-tapant

Exercice 6 : ng-select + chercher-en-tapant

Exercice 7

`app.component.spec.ts`

`app.component.spec.ts`

RxJS et les `Observable`s

RxJS et les `Subscriptions`

RxJS : au-delà de `console.log`