nearform/angular-patterns-workshop

Angular patterns workshop

A workshop about beginner and intermediate Angular patterns.

Getting started

Open and follow the slide deck at https://nearform.github.io/angular-patterns-workshop/.

Running locally

Requirements

• Node LTS
• An API key from The Movie Database

Setup

• Clone this repository
• Add a TMDB API key:
  • Sign up to The Movie Database
  • Make a note of your API key at Settings -> API -> Request an API Key -> Developer -> API Key (v3 auth)
  • Copy apps/movies/src/environments/environment.ts to apps/movies/src/environments/environment.development.ts
  • Update the apiKey property with the value of your API key
• npm i
• npm run movies to start the application
  • To complete the exercises you will need to be signed in to TMDB
  • To sign in, select the "Login" button in the top right of the UI
• npm run slides to start the slide deck (optional)

angular-patterns-workshop's Issues

Add shared utilities package to workshop

Workshop: step 6 seems to be covering items already covered in step4

May be best to move some of the slides back to step 4 (structural directives)

Move watchlist helper and types to utilities

Workshop: step 4 improve instructions for exercise

Mention about updating the html in the template
Mention about creating the movies$ property in the class

Get feedback from a frontend community member

Get feedback from a frontend community member, ideally someone with some angular experience.

Workshop slides: step 4 render a list of movies

New concepts

• *ngIf
• Angular pipes
• Angular async pipe
• *ngFor
• Template interpolation ({{movie.description}})

The challenge

Render a basic list of popular movies based on the response from tmdb. Feel free to use material cards to add some formatting to each item and also the stack utility class on the container to add some space between items.

Trying it out

View the rendered list in the browser

Angular resources

Collection of Angular resources

Spike: investigate web containers as a way to host the workshop

https://webcontainers.io

The investigation will be to see how straightforward or involved it would be to host and angular app (with nx) on web containers and to see if it has the potential to remove barriers to getting started with the workshop (i.e. no need to clone the repo locally).

Add additional content and examples

Add learning resources to community page

https://www.notion.so/nearform/Angular-e1614e0eabe642599ea9828e15a3b8be?pvs=4#9cc1e4224971420dbd82d7d85fe2aa2f

Build out shared functionality of app

Primarily the setup to integrate with the tmdb backend.

Workshop slides: step 7 add an "Add to watchlist" service method

New concepts

• RxJs throwError (when user id is not available)
• Angular event binding

Challenge

Create a new service method that post to the watchlist tmdb endpoint and do a basic call when a button is clicked in the UI

Trying it out

Click the button and observe the network panel in dev tools to ensure a 201 is correctly returned

Workshop: change the description movie property to 'overview'

This will reflect the tmdb api more and prevent confusion

Update both slides and code

Spike: investigate using nx schematics generators to reduce copy and pasting of solutions and starting points

N.B. may not be necessary and git branches #46 or web containers could be the better approach

Workshop slides: step 10 auto refresh on updating watchlist

New concepts

• None

Challenge

Refresh the watch list query automatically when the user adds an item to their watchlist. As a bonus show a "Remove from watchlist" button when the item is already added and remove the item from their watchlist when this is clicked.

Trying it out

Try adding an item to your watch list. The UI should now automatically update (after a slight delay for request to complete).

Workshop slides: step 6 add a loading indicator

New concepts

• RxJs startWith
• ngIf negation - *ngIf="!movies.isLoading"

Challenge

Add a loading indicator to show before the popular movies request has completed

Trying it out

Simulate a slow network delay in browser DevTools and load the page or add a delay in the observable pipe before returning the result

nit: Step 1: "app-start-here" is misleading.

That's the selector name. Maybe just call it "start-here component"

Review slides and readme

Workshop: expand step 5 to also include creating a new component to encapsulate the movie card

As suggested in #32 by @allforabit and @coston

Workshop: add instructions on creating a new service

By including the relevant generate command

Workshop: Slide 0 (intro to RxJS streams)

setup: use dotenv file for environment variable for the TMDB_API_KEY

Make use of a common .env file for loading the process.env.TMDB_API_KEY so folks don't have to directory drill in the initial setup.

Fix build

Workshop slides: step 2 creating a service

New concepts

• Angular service
• Angular http
• Angular dependency injection
• RxJs Observables pipe and map
• RxJs subscription

Challenge

• Create a service that uses the ApiService to call the popular movies endpoint, subscribe in the component and log the results of the call

Trying it out

View the results in the browser console log

bug: instructions for starting slides do not work

Workshop: add a loading indicator for complete solution

Leapsome - Angular Learning Path (Basic)

Review Angular Learning Path for Leapsome

Customise nx generator config so it is tuned for workshop

The NX generator config should be tuned so that it works well for the workshop, reflects the solution structures, puts the files in the correct folder and doesn't create too much boilerplate.

• Change the default directory to start-here directory
• Include flag no tests
• Include flag no style
• Include flag to make the component structure flat
• Include flag to put template inline

We should also mention that the config has been tuned slightly in the README or the slides or both.

Workshop slides: step 9 combine data from the watchlist endpoint with the the popular movies list

New concepts

• RxJs combineLatest
• RxJs subject that emits values (movie ids)

Challenge

Combine data from two observable sources to create a single observable that merges data from both the popular movies list and the watchlist endpoint. Disable the "Add to watchlist" button if the movie is already on the users watchlist.

Trying it out

Try adding an item to your watchlist and then refresh the page and the button should now be disabled if it's already on the watch list

Angular Patterns Workshop Outline

Develop an outline and project plan for an Angular Patterns Workshop, similar to the https://nearform.github.io/react-patterns-workshop/1.

This workshop may be worked on by this team and other folks on the bench.

Workshop: add starting points for each step in in workshop

Workshop: misc text fixes for slides

• Path is incorrect for start here in some places
• Slide 6, replace an "and" with a comma
• Update Readme with new commands and updated instructions
• withWatchListFlag -> withWatchlistFlag (casing) in slides
• "Day to day" -> "When working with Angular"
• Slide 8 change "async behaviours are" -> "async behaviour is"
• Slide 9 link to tmdb api docs
• Mention that you have to be logged in to tmdbs in README and a slide

Workshop slides: step 3 unsubscribe to a service on component destroy

New concepts

• Angular component OnDestroy life cycle
• RxJs subject
• RxJs delay and takeUntil operators
• RxJs subscribe with object syntax {next: (v) => {}, complete: () => {}}

Challenge

Unsubscribe from the popular movies observable when the component is destroyed. To simulate a slow network temporarily add a delay operator with a long time out (e.g. 10 seconds) and ensure that the stream is completed automatically if you navigate away from the page. Use complete callback to see when the stream has been completed.

Trying it out

Load the page and before the query has completed navigate away (e.g. by clicking the top right home button) and observe that the completed callback is immediately called, cancelling any requests that may be in flight.

Angular Patterns Workshop Outline

Dupe of #4 Recreating here as will work on outline in this repo.

Develop an outline and project plan for an Angular Patterns Workshop, similar to the https://nearform.github.io/react-patterns-workshop/1.

This workshop may be worked on by this team and other folks on the bench.

Code examples and UX

Step 2: Trying it out - there's space to redistribute the example of the service

Overall, there's room for more code examples when talking about different available functions.

The description in step 2 really minimizes what the output will really be. See where more guidance can be provided.

Workshop slides: step 1 angular component

See https://nearform.github.io/react-patterns-workshop/6 for an idea of how much detail to include.

The basic format is:

• some background information about the topic
• details about the exercise
• instructions on trying it out

Challenge

Write a component that displays "Hello world!!!" on the page.

New concepts

• Angular component
• Angular templates
• Standalone components

Trying it out

Can try it out by viewing it in the browser

Workshop: use git branches to organise the different starting points and solutions

Workshop: step 5 slide improvements

• Mention about copy pasting html from movie list component
• Hint about using ! for the movie input
• Mention using the flex class to place image beside the description

Workshop slides: step 5 add a poster image

New concepts

• Property binding: [src]="movie.poster" and [alt]="movie.title"
• More complex dom elements in Angular

Challenge

Add an image to go alongside the movie title and description

Trying it out

Can be viewed in the browser

Notes

Not many new concepts here, could possibly have user put the movie card into a new component???

Restructure folders using nx apps

As suggested by Ian:

apps
  movies
  slides

Workshop: add a "Trying it out" slide for step 1 for consistency with other steps

Github pages slide show

Workshop slides: step 8 "Add to watchlist" unsubscribe on component destroy

New concepts

• switchMap

Challenge

Unsubscribe from the post to add a movie to your watchlist when the component is destroyed.

Trying it out

Introduce a false delay to the api post service and navigate away after clicking the button and observe that the stream is completed immediately and the call to the endpoint is cancelled or never occurs.

Note

Similar to step 3 but will require using an advanced RxJs operator switchMap: https://blog.angular-university.io/rxjs-switchmap-operator/

Rework api and auth to only use version 3 of api as v4 not needed

Setup angular patterns workshop repo

Remove elf and use custom state management for auth store

Workshop: build out solutions steps for workshop

Revert merged commit accidentally merged to main

Workshop: port error handling from prep repo

Workshop: include a slide on types that can be used to help throughout