recipe app startpoint

~$ git clone https://github.com/Pieter-hogent/recipeapp.git  (or git pull)
~$ cd recipeapp
~/recipeapp$ npm install
~/recipeapp$ git checkout -b mybranch 4b40342
        

Observable

• Connecting with our (or any) API is done using Angular's HttpClientModule
• it neatly wraps performing an XHR: easily set headers, cope with errors, response types, progress indicators, and so on
• the async response is handled using an Observable, which we'll explain first
• (note that before Angular 4.3, this was handled by HttpModule, not HttpClientModule, don't include the wrong one)

what is async?

              let notAMoon = buildDeathStar();
              let alderaan = destroyPlanet(notAMoon);
              let disturbedForce = aMillionVoicesCriedOut(alderaan);
            

what is async?

  
                let notAMoon = buildADeathStarAsync();
                let bobbaFett = createACloneArmyAsync();

                ...
                
                let alderaan = destroyPlanet(notAMoon);
                

async solutions

• there are multiple ways to cope with this, you can simply 'wait' for the other function to finish, using mutexes, barriers, ...
• we don't do that in javascript though, we use higher level constructs: you've already learned about callbacks and promises
• let's do a quick recap of how they work, and then introduce another way to handle async functionality: observables

callbacks

  
            function longAsyncOperation(callbackParameter) {
              // loooong operation
              return callbackParameter(calculation);
            }

            let result = longAsyncOperation(doSomethingWithResult);
            doSomethingWithResult(result);
            doOtherStuffThatDoesntNeedResult();
            

multi threaded javascript

• javascript (for now) is always single threaded, concurrency is handled using an event loop and a message queue
• every still-needs-processing (async) function become messages on the message queue
• the event loop will always pop the oldest message, process it, pop the oldest message, process it, ...
• (to make it slightly confusing, it's javascript after all, the browser it's own API methods can run in parallel)
• let's look at a small example to illustrate this

callback hell

• the callback idiom works fine if the callback is a small, isolated, function
• but if the callback basically boils down to "the rest of the program", it will have callbacks itself...
• ...whom have callbacks themselves, and so on, and so on
• leading to 'callback hell', the name already suggests this is not the most fun thing in the world

callback hell

  
              createGalacticEmpire(function (error, empire) {
                if (!error) {
                  empire.buildADeathStar(function (notAMoon) {
                    notAMoon.destroyPlanet(function (error, alderaan) {
                      if (error) {
                        throw new Exception(error.msg);
                      } else {
                        alderaan.eliminateRebels(function (disturbance) {
                          ....
                        })
                      }
                    })
                  })
                } else {
                  console.log(error.message());
                }
              })	    
            

callback problems

  
            function slowAsync(callback) {

            }
            function anotherAsync(callback) {

            }

            let processAfterBoth = ...

            // How can I call processAfterBoth ONLY if both have finished??
            slowAsync( ??? )
            anotherAsync( ??? )
            
            

promises

  
              let deathStarPromise = buildADeathStarAsync();
              let army = buildCloneArmyAsync();
              deathStarPromise.then(notAMoon => notAMoon.destroyPlanet());
              let luke = meetYourDad();
              deathStarPromise.catch(error => console.log(error));
          

callback hell to promise heaven

  
                let empire = createGalacticEmpire(function (error, empire) {);
                  if (!error) {
                    let notAMoon = empire.then(e => e.buildADeathStar(function (notAMoon) {));
                      let alderaan = notAMoon.then(moon => moon.destroyPlanet(function (error, alderaan) {));
                        if (error) {
                          throw new Exception(error.msg);
                        } else {
                          let disturbance = alderaan.then(al => al.eliminateRebels(function (disturbance) {));
                            ....
                          })
                        }
                      })
                    }) 
                  } else {
                    console.log(error.message());
                  }
                })
                disturbance.then( () => { ... } );
              
                empire.catch(err => console.log(err.message()));    
                notAMoon.catch(err => throw new Exception(err.msg));
              

promises

• there's a lot more to say about promises
• how to create them?
• what happens when you return a promise from inside a promise?
• what about Promise.all and Promise.race?
• but we already did that back in web2, and since you all made it into web4, I'm sure you're all very versed in these matters already

promises - problems?

• promises solve async handling pretty well
• nothing is ever perfect though, there is room for some improvement
• once a promise is created it will complete and call the resolve (then) or reject (catch) callback, there's no easy way to cancel it
• if a promise failed, given only the promise object there's no easy way to 'retry' the promise

observables

• reactive programming, which uses observables, is a fairly new way of dealing with asynchronous functions
• angular uses the RxJS library for this (ºMicrosoft)
• it's not just javascript, reactive extension exist for pretty much every language you'd want to use (java, .net, c++, kotlin, swift, python, ...)

observables

• put simply: reactive programming is programming with asynchronous data streams
• we said a Promise is the future result of an operation
• well, an observable are ALL future results of an operation, and an immense toolbox to work with them
• imperative code 'pulls' data where reactive code 'pushes' data, you subscribe to get notified of changes, and those changes are pushed to you

observables

• you could say an array is a collection of data you get handed (and which you'll loop over yourselves)

• and an observable gives you a collection of data, one by one, with certain time intervals in between. This is often visualized using 'marble diagrams', a timeline with some values (shown as circles)

• RxJS' test framework is designed around ASCII drawings of such marble diagrams

observables

• this is a lot like responding to user events, e.g. click events can be seen as an async event stream, which you observe and respond to, a 'stream of clicks'
• the streams are composable, think of streams as a pipeline of operations over your data, you can subscribe to any part of the stream or combine them to make new streams
• working with observables requires a different way of thinking, you subscribe to streams, and update your app based on these changes. There is very little imperative thinking left
• more reading about what this is all about? "the introduction to reactive programming you've been missing"

observables - operators

• the real power of RxJS comes from the available operators to combine and manipulate streams.
• Just like can apply map, filter, reduce to arrays to use 'converted' arrays, there are operators available to do the same with observable streams
• but there are many (many) more, let's introduce a few to show what I mean

observables - map

• just like with an array, there's also a map operator, similar to an array, you define a function to convert T to U and your Observable<T> becomes an Observable<U>

observables - delay

• there are operators who work on the timing of your stream, rather than the values, e.g. delay will, well, delay the values being fired

observables - merge

• then there are operators which allow you to combine multiple streams together, the simplest one is merge, which simply creates a new stream firing everything all the other streams do

pipeable operators

• this is just the tip of the iceberg, there are many (many) more, allowing you to sometimes do really cool stuff with little code
• they are called pipeable operators
• (until 12 januari 2018 they were called 'lettable operators', if you google)
• RxMarbles.com has a great visual overview of many of these
• but there are many more resources to learn these, and more pop up every day, reactive programming is on the rise, and not just in the web world

recipe filter

src/app/recipe/recipe-list/recipe-list.component.ts  
                import { Subject } from 'rxjs';
    
                  export class RecipeListComponent {
                    public filterRecipeName: string;
                    public filterRecipe$ = new Subject<string>();
                  
                    constructor(private _recipeDataService: RecipeDataService) {
                      this.filterRecipe$.subscribe(
                        val => this.filterRecipeName = val);
                      }
                    }
                  } 
            

recipe list

src/app/recipe/recipe-list/recipe-list.component.html  
              <mat-form-field>
                <input matInput (keyup)='filterRecipe$.next($event.target.value)'
                  type='text' 
                  placeholder='filter recipe name...' #filter>
              </mat-form-field>      
              <button (click)="applyFilter(filter.value)" mat-raised-button> 
                filter
              </button> 
            

recipe list

src/app/recipe/recipe-list/recipe-list.component.ts  
                import { distinctUntilChanged, debounceTime,
                    map, filter } from 'rxjs/operators';
                  
                constructor(private _recipeDataService: RecipeDataService) {
                  this.filterRecipe$
                    .pipe(
                      distinctUntilChanged(),
                      debounceTime(400),
                      map(val => val.toLowerCase()),
                      filter(val => !val.startsWith('s'))
                    )
                    .subscribe(val => (this.filterRecipeName = val));
                } 
            87dd96b

pipeable operators

• one last remark before we get to http, the pipe() syntax where you pass other functions is rather new
• so on google, stackoverflow... you'll often find code with the following syntax

  
        import 'rxjs/add/operator/map'
        import 'rxjs/add/operator/distinctUntilChanged'
        
        this.filterRecipe$
          .distinctUntilChanged()
          .debounceTime(400)
          .map(val => val.toLowerCase());
                    

• DON'T DO THAT ANYMORE, it's always easily converted to the new syntax

http - observables

• in Angular, http request will always return an observable
• this is done so you can easily cancel and retry requests (http responses are not real 'streams' of data, there is always just one result)

HttpClientModule

src/app/recipe/recipe.module.ts  
                @NgModule({
                  declarations: [
                    RecipeComponent,
                    IngredientComponent,
                    RecipeListComponent,
                    AddRecipeComponent,
                    RecipeFilterPipe
                  ],
                  imports: [
                    CommonModule,
                    HttpClientModule,
                    MaterialModule
                  ],
                  exports: [RecipeListComponent]
                })
                export class RecipeModule {}           
            

CORS

• before we can use our API from Angular we have to make sure our cross domain calls work (http on port 4200 to https on port 5001 doesn't work out of the box)
• for security reasons, web browsers do not allow Ajax requests to servers other than the site you're visiting ('same-origin policy')
• while developing it's easiest to set up a proxy server (for our webpack) to handle this

Proxy

./proxy.conf.json  
                {
                  "/api": {
                    "target": {
                      "host": "localhost",
                      "protocol": "https:",
                      "port": 5001
                    },
                    "secure": false,
                    "changeOrigin": true,
                    "logLevel": "info"
                  }
                }
            

Proxy

    ~$ ng serve --proxy-config proxy.conf.json
            

• if you want to use this you have to pass it as a command line parameter
• let's add it to the package.json scripts so we don't have to type this every time

package.json
    "scripts": {
      "start": "ng serve --proxy-config proxy.conf.json",  
    }
              

environment.

• we'd rather not have our backend url hardcoded in the source code
• it's also not unlikely we'd use a different backend server during production and when developing, Angular uses the environment mechanism for this
• by default you have an environments folder in the root folder with two files, one regular and one for production
• we'll add a new variable apiUrl to both, pointing to '/api', which is where our frontend can find our backend

environments/environment.ts
                export const environment = {
                  production: false,
                  apiUrl: '/api'
                };
                          

recipedataservice.

src/app/recipe.data.service.ts 
                import { HttpClient } from '@angular/common/http';
                import { map } from 'rxjs/operators';
                
                @Injectable({
                  providedIn: 'root'
                })
                export class RecipeDataService {
                  private _recipes = RECIPES;
                  constructor(private http: HttpClient) {}

                  get recipes$(): Observable< Recipe[] > {
                    return this._recipes;
                    return this.http.get(`${environment.apiUrl}/recipes/`)).pipe(
                      tap(console.log),
                      map(
                        (list: any[]): Recipe[] => {}list.map(Recipe.fromJSON)              
                      )
                    );
                  }
                }
            

http.

src/app/recipe/recipe-list/recipe-list.component.html 
                export class RecipeListComponent {
                  // ....

                  get recipes$(): Observable<Recipe[]> {
                    return this._recipeDataService.recipes$;
                  }
                
                } 
            

http - observable

• if we have a look in the browser, nothing will be shown
• the console has an error that tells us what's going wrong

• it basically says ngFor only works for Iterables such as Arrays
• inside our html, we loop over our 'recipes' property, but it became on Observable of Recipe[], we can no longer simply do that

http - observable

• there's more, it's not just that we can't simply loop over the result of an Observable, there *is* no result
• if we would have used Promises, the http call would have already happened, we'd only need to adapt the way we show the result
• but here nothing has happened yet, if you look in the backend logs, there's nothing there
• Observables are 'cold' constructs, as long as nobody subscribes, nothing happens
• so we need to subscribe, wait for the async result, and then capture it and loop over the list

http - observable

 src/app/recipe/recipe-list/recipe-list.component.ts 
                export class RecipeComponent {
                  private _recipes: Recipes[];
                private _fetchRecipes$: Observable<Recipe[]> 
                    = this._recipeDataService.recipes$;
                
                  constructor(private _recipeDataService: RecipeDataService) {
                    this._recipeDataService.recipe$.subscribe( 
                      res => this._recipes = res
                    );
                  }
                
                  get recipes$(): Observable<Recipe[]> {
                    return this._fetchRecipes$this._recipesthis._recipeDataService.recipes$;
                  } 
            

http - observable

 src/app/app.component.html 
            <div>
              <!-- ... -->
              <div fxLayout="row" [...] >
                <div fxFlex="0 0 calc(25%-0.5%)"
                  *ngFor="
                    let localRecipe of (recipes$ | async | recipeFilter: filterRecipeName)
                  "
                >
                  <app-recipe [recipe]="localRecipe"></app-recipe>
                </div>
              </div>
            </div>
            
            97466f4

async pipe

• change detection! An async pipe whose input resolves triggers a change detection cycle
• so the (recipes$ | async) would trigger get recipes() in RecipeDataService, which triggers a http get call
• when the http get call resolves, async pipe signals to the change detection system that something changed, on this new cycle (recipes$ | async) are requested again, triggering get recipes() on RecipedataService once more, and hence a new http get call is triggered
• which returns a new Observable as well, which returns new results, so the async pipe has changed again, and triggers a new cycle!
• and so on and so on, you end up in an endless loop, because a http get always creates a new observable, so we have to avoid this
• let's try it

ingredient model

• so that mostly works, but we get all these [Object object]'s for our ingredients
• this is because our frontend still stores ingredients as strings, while the API returns proper Ingredient objects
• this can be solved by adding an Ingredient model class, adapting the ingredient component, and using the model when converting the recipe
• this is extremely similar to what we've done for Recipe, I consider this an exercise
• (if you have trouble with this, it's probably advised to start studying for this course)
• (and if you reeeaally can't figure it out: commit 837cc7c)

loading...

src/app/recipe/recipe-list/recipe-list.component.html  
              <div *ngIf="(recipes$ | async) as recipes; else loading">
                <div
                  fxLayout="row wrap"
                  fxLayout.xs="column"
                  fxLayoutWrap
                  fxLayoutGap="0.5%"
                  fxLayoutAlign="left"
                >
                  <div
                    *ngFor="let localRecipe of (recipes$ | async | recipeFilter: filterRecipeName)"
                  >
                    <app-recipe [recipe]="localRecipe"></app-recipe>
                  </div>
                </div>
              </div>
              <ng-template #loading><mat-spinner></mat-spinner></ng-template>
            

loading...

src/app/recipe.data.service.ts  
                export class RecipeDataService {
                  constructor(private http: HttpClient) {}
                
                  get recipes$(): Observable<Recipe[]> {
                    return this.http.get(`${environment.apiUrl}/recipes/`).pipe(
                      delay(2000),
                      map((list: any[]): Recipe[] => list.map(Recipe.fromJSON))
                    );
                  } 
                }
            eb23d85

error handling

• it's important to realize any given stream can only error out once
• streams can complete, ending their lifecycle without any error, the stream will no longer produce values
• an alternative to completion is erroring out, the stream's lifecycle ended with an error, it will no longer emit values
• notice that there is no obligation for a stream to complete or error out, both are optional, but they are mutually exclusive

error handling

• just as Promises have a catch function, you can specify a second function when subscribing to Observables to process any errors that happened
• (and a third, to be called when a stream completes)
• but we only subscribe implicitly by using our AsyncPipe, adding error handling at the point of our AsyncPipe would be messy
• once more, we'll rely on an RxJS operator to help us out: catchError

error handling - service

 src/app/recipe-data.service.ts 
              export class RecipeDataService {
                constructor(private http: HttpClient) {}
              
                get recipes$(): Observable<Recipe[]> {
                  return this.http.get(`${environment.apiUrl}/recipes/`).pipe(
                    catchError(handleError),
                    map((list: any[]): Recipe[] => list.map(Recipe.fromJSON))
                  );
                }

                handleError(err: any): Observable<never> {
                  let errorMessage: string;
                  if (err instanceof HttpErrorResponse) {
                    errorMessage = `'${err.status} ${err.statusText}' when accessing '${err.url}'`;
                  } else {
                    errorMessage = `an unknown error occurred ${err}`;
                  }
                  console.error(err);
                  return of([]);
                  return throwError(errorMessage);
                }
              }
            

error handling - component

 src/app/recipe/recipe-list/recipe-list.component.ts 
                  export class RecipeListComponent implements OnInit {
                    private _fetchRecipes$: Observable<Recipe[]> = this._recipeDataService
                    .recipes$;
                    public errorMessage: string = '';
                      
                    // [...] 

                    ngOnInit(): void {
                      this._fetchRecipes$ = this._recipeDataService.recipes$.pipe(
                        catchError(err => {
                          this.errorMessage = err;
                          return EMPTY;
                        })
                      );
                    }
                 
                }
            

error handling - component

 src/app/recipe/recipe-list/recipe-list.component.html 
              <div *ngIf="(recipes$ | async) as recipes; else loadingloadingOrError">
                <div
                  fxLayout="row"
                >
                  <div *ngFor="let localRecipe of (recipes | recipeFilter: filterRecipeName)">
                    <app-recipe [recipe]="localRecipe"></app-recipe>
                  </div>
                </div>
              </div>
              <ng-template #loadingOrError>
                <mat-card class="error" *ngIf="errorMessage; else loading">
                   Error loading the recipe list: {{ errorMessage }}. <br/>
                    Please try again later.
                  <ng-template #loading>
                    <mat-spinner></mat-spinner>
                  </ng-template>
                </mat-card>
              </ng-template> 
            4fd078b

http post

 src/app/recipe/recipe-data.service.ts 
              export class RecipeDataService {
              
                constructor(private http: HttpClient) {}
              
                addNewRecipe(recipe: Recipe) {
                  return this.http
                    .post(`${environment.apiUrl}/recipes/`, recipe.toJSON())
                    .pipe(catchError(this.handleError), map(Recipe.fromJSON))
                    .subscribe();
                  
                }
              }
          

http post

• the recipe gets added, but it doesn't get added to the list of recipes automatically, we need to manually refresh
• while this makes sense (the methods retrieving the recipes can't automatically know something was added in the backend) this is not what we want
• there are essentially two ways around this
• you either make sure the list gets refreshed when needed (so a GET of all recipes happens everytime a recipe was succesfully added or removed)
• you keep a local cache of the recipes and update it when you add or remove a recipe
• both have their advantages / disadvantages and their uses

local cache

advantage

• less http requests, meaning a faster webapp, and you need less server resources
• user action feedback is immediatelly reflected in the UI

disadvantage

• what if multiple people manipulate the data?
• even if it's just you, keeping state in sync correctly is HARD (see lesson 9)

local cache

• it greatly depends on the use case as well, when designing a stock market ticker, or an orderpage for tomorrowland tickets you most definitely do not want to much caching
• we'll have a lot more to say about state management later, for now we'll create a local array with a copy of the recipes and provide observable access to that array
• I'd like to stress again that this is FAR from a good solution to this problem, you just haven't learned enough rxjs to do this properly
• we'll get back to this...

local copy of the recipes

 src/app/recipe/recipe-data.service.ts 
            export class RecipeDataService {
              private _recipes$ = new BehaviorSubject<Recipe[]>([]);
              private _recipes: Recipe[];
            
              constructor(private http: HttpClient) {
                this.recipes$.subscribe((recipes: Recipe[]) => {
                  this._recipes = recipes;
                  this._recipes$.next(this._recipes);
                });
              }
            
              get allRecipes$(): Observable<Recipe[]> {
                return this._recipes$;
              }
            
              get recipes$(): Observable<Recipe[]> {
                return this.http.get(`${environment.apiUrl}/recipes/`).pipe(
                  catchError(this.handleError),
                  map((list: any[]): Recipe[] => list.map(Recipe.fromJSON))
                );
              }
            
              addNewRecipe(recipe: Recipe) {
                return this.http
                  .post(`${environment.apiUrl}/recipes/`, recipe.toJSON())
                  .pipe(catchError(this.handleError),map(Recipe.fromJSON))
                  .subscribe((rec: Recipe) => {
                    this._recipes = [...this._recipes, rec];
                    this._recipes$.next(this._recipes);
                  });
              } 
   

that's all folks

• this will do for now, we'll tackle this for real when we learn about more advanced rxjs operators
• so that's it for today, we covered a bit of reactive programming and how to perform http requests
• as an exercise try to add a trashcan button to each recipe and call a http delete when clicked (solution: see ffec8a5)
• note that you know most things you need for your task now, we still need to cover forms and routing, but if you ignore forms for now, and show everything in one big html (so you don't need routing yet), you can do pretty much everything needed
• so no excuses! start working