Angular Advanced Workshop (+ Challenges)

Georgios Kaleadis
· @deluxee (Twitter)
· @georgiee (Github)
· Workshop Repository
· Working for Satellytes, Munich

What's in the box?
· Dec 05 - Dec 07 2018
· Level: Intermediate/Advanced
· Angular 7
· 1st & 2nd day: Workshop
· 3th day: Hackathon (tensorflow, remote
games)

Everything is here:
github.com/georgiee/angular-workshop-
skipbo

Day 2
· Chapter 04 — RxJS
· Chapter 05 — Testing
· Chapter 06 — Animation

Day 1
· Chapter 01 — Modules
· Chapter 02 — Components
· Chapter 03 — Routing

"What would you have
ripped out of Angular if
you had one breaking
change for free ?"

NgModules
— Igor Minar, AngularConnect 2018

· Providers
· Declarations
· Imports/Exports
· EntryComponents
· Bootstrap
· Schema

Providers
· provider array
· { provide: Token, useClass: Value }
· InjectionToken
· providedIn 'root' or OtherModule
· (Greeting Example)

Declarations
· components, pipes and directives
· tell Angular about their existence — once!
· SharedModules, FeatureModule, per
Element Module

Imports/Exports
· Export: What to use outside
· Import: What to use inside
· (ButtonModule Example)

EntryComponents
· For dynamic components
· Routers do this this automatically for you
· (Dynamic Example)

Bootstrap
· Deﬁne your app root component
· There can be multiple app roots
· (Example)

Schemas
· CUSTOM_ELEMENTS_SCHEMA
· <my-component my-prop="lorem">
· NO_ERRORS_SCHEMA: anything
· (Example)

Your tasks
· Create our GameService
· Provide expected interface (TDD)
· Inject the GameService
· Break the Injection and ﬁx it
· Answer a quick question

· Introduction
· preserveWhitespaces
· Selectors on existing elements
· View Encapsulation
· Smart & Dumb Components
· OnPush
· Template References

Introduction
A component controls a patch of screen
called a view.
· Meta, Component Class, Template
· Directive vs. Components

preserveWhitespaces
<button>1</button>
<button>2</button>
<button>3</button>
vs
<button>1</button><button>2</button><button>3</button>

Selectors
<my-custom-component></my-custom-component>
<some-component myDirective></some-component>
What about Components on existing
Elements?

View Encapsulation
· BEM anyone?
· Scoped Styles in ShadowDOM standard
!
· Angular Native & Emulated
· Native 0, ShadowDom 1
· (Example)

Smart & Dumb
· presentational not dumb!
· presentational: rely on inputs only, no
huge logic inside
· smart: state, sometimes business logic,
fetch data
· (Example)

OnPush
· Important Concept but CD makes it
diﬃcult
· Rely only on inputs (presentational )
· Performance: Website Example
· Still updating: UI events, Async Pipes
· Live Example

Template References
· exportAs
· #myComponent1='myAppOne'
· Live Example

Your tasks
· Create Components
· Use Gameplay Component
· Use CardPile Component
· Fix Bug in the CardPile
· Inject parent component

· Router Outlet
· Lazy Load
· Manual Loading a Module
· Guards
· Resolver

Router Outlet
· Anchor point for mounted components
· Exposes reference #myTemplateVar="outlet"

Lazy Load
So easy to do.
loadChildren: './lazy-load/lazy-load.module#LazyLoadModule'
· Works by convention
· Usually you use a empty route inside.
· (Example)

Manual Loading a Module
· lazyModules key in angular.json
· creates a chunk
· load by convention url
· Use it with NgModuleFactoryLoader
· (Example)

Guards
· Protect your pages
· Interfaces: CanActivate, CanDeactivate, ..
· ng g guard my-protector
· (Example)

Resolver
· Ensure a component gets its data
· Access via route.snapshot.data
· Example

Your tasks
· Route to the new pages
· Make GameModule lazy load
· Routing Guards: CanActivate
· Routing Guards: CanDeactivate with
prompt

· @deluxee (Twitter)
· Workshop Project

Day 1
· Chapter I — Modules
· Chapter II — Components
· Chapter III — Routing

Schedule
· Chapter IV — RxJS
· Chapter V — Testing
· Chapter VI — Animation

· Introduction
· Debugging
· About Dollar Signs
· Cold vs Hot Observables
· Make Cold Observables Hot
· RxJS in the wild
· Testing

Introduction
· Extended Observer Pattern (Gang of Four)
· Subject and Observers
· Event System is an Observer Pattern
Chapter 04 — RxJS: Introduction

of(1, 2, 3, 4, 5, 6)
.pipe(
take(3),
filter(value => value%2 === 0),
).subscribe()
);
Chapter 04 — RxJS: Introduction

Debugging
Tap
fromEvent(window, 'keydown')
.pipe(
tap(event => console.log('key pressed'))
).subscribe();
Chapter 04 — RxJS: Debugging

RxJS Spy (Tool)
import { tag } from 'rxjs-spy/operators/tag';
fromEvent(window, 'keydown')
.pipe(
tag('
!
Key'),
).subscribe();

Tag =
!
Key; notification = subscribe<br>
Tag =
!
Key; notification = next; value = {key: "a"…}
Tag =
!
Key; notification = next; value = {key: "b"…}
!
Key notification = unsubscribe<br>

Dollar Sign
const click$ = Observable.fromEvent(button, 'click');
· pluralization, called Finnish notation
· peopl€, mic€, oxe₦

Cold vs Hot Observables
A cold observable creates its producer on
each subscription, a hot observables closes
over an already existing instance.
— Ben Lesh
Chapter 04 — RxJS: Cold vs Hot

// COLD (unicast)
var cold = new Observable((observer) => {
var producer = new Producer();
producer.listen(() => {
observer.next()
});
});
// HOT (multicast)
var producer = new Producer();
var hot = new Observable((observer) => {
producer.listen(() => {
observer.next()
});
});
Chapter 04 — RxJS: Cold vs Hot

Make Cold Observable Hot
· Cold: Create a producer (like a
websocket) for each subscriber
· Make Hot: Create only one producer,
then send same data to all susbcribers
Chapter 04 — RxJS: Make Cold Observable Hot

const myInterval = interval(500).pipe(
tap(value => console.log('interval produced a value'))
);
myInterval.subscribe(value => {
console.log('received a value', value)
});
myInterval.subscribe(value => {
console.log('received a value', value)
});
/**
interval produced a value
received a value 0
received a value 0
*/

const myInterval = interval(500).pipe(
tap(value => console.log('interval produced a value'))
);
const subject = new Subject();
// 1. let this subject subscribe to the cold observable
myInterval.subscribe(subject);
// 2. now let future observables subscribe to the subject instead of the interval
subject.subscribe(value => console.log('received a value', value));
/**
received a value 0
received a value 0
received a value 0
*/

RxJS in the wild
· asObservable vs. Subject
· BehaviourSubject
· destroy & takeUntil
· toArray

private _changed: Subject<any> = new Subject();
get changed(): Observable<any> {
return this._changed.asObservable();
}
· A subject is both an observer and
observable
· Prevent the observer part (next)
· changed.next('new value')
Chapter 04 — RxJS: RxJS in the wild

· Hot Observables can produce values
without someone listening.
· Page mounted vs Data already
delivered
!
· BehaviorSubject is the solution

const subjectA = new Subject();
const subjectB = new BehaviorSubject(null);
subjectA.next('your loaded data');
subjectB.next('your loaded data');
subjectA.subscribe(value => console.log('value from subjectA:', value));
subjectB.subscribe(value => console.log('value from subjectB:', value));
// value from subjectB: your loaded data

· addEvenListener -> removeEventListener
· subscribe -> unsubscribe
· This is bad
class YourComponent {
initService() {
this.yourService.subscribe(data => {
// do something nice
})
}
}

private _subscription: Subscription = Subscription.EMPTY;
initService() {
this._subscription = this.yourService.subscribe();
}
ngOnDestroy() {
this._subscription.unsubscribe();
}

private _destroyed: Subject<any> = new Subject();
initService() {
this.yourService
.pipe(
takeUntil(this._destroyed)
).subscribe(data => {
// do something nice
})
}
ngOnDestroy() {
this._destroyed.next();
}

RxJS Testing
· RxJS is basically synchronous
· Test for eﬀects, don't test the stream
itself.
· Forward time with tick & fakeAsync
· Never use Marble Testing to test streams
· (Example rxjs/testing)

Your tasks
· Redirect to the Gameover Page
· AI
!
Autoplay V1
· AI
!
Autoplay V2
· AI
!
Autoplay V3
· Stop the AI after game is over

· Setup
· Component Testing
· Micro & Macro Tasks (Theory)
· Testing Async Code
· Change Detection
· Testing Routing

Setup
· Diﬀerent Reporter (mocha
vs progress (default))
· Headless (no browser
window)
· Firefox als works Headless
!
· No, not IE.

Component Testing
· Angular CLI default is not good
beforeEach(() => {
fixture = TestBed.createComponent(SomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});

TestBed.configureTestingModule({
declarations: [ FooComponent, TestSomeComponent ]
})
it('should create v2', () => {
const myFixture=TestBed.createComponent(TestSomeComponent);
myFixture.componentInstance.helperVariable = 345;
fixture.detectChanges();
expect(myFixture.componentInstance.myComponent).toBeTruthy();
});
@Component({ template: `<app-some [myInput]="helperVariable"></app-some>` })
class TestSomeComponent {
public helperVariable = 123;
@ViewChild(SomeComponent) myComponent: SomeComponent;
}
Chapter 04 — RxJS: Component Testing

Micro & Macro Tasks
What's the output ?
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
});
console.log('script end');
Chapter 05 — Testing: Micro & Macro Tasks

console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
}).then(function() {
});
console.log('script end');
/*
script start
script end
promise1
promise2
setTimeout
*/

What are Macro Tasks?
Queued up but allow the browser engine
to render between each task.
· scripts
· setTimeout / setInterval
· event listener callbacks
document.appendChild(el);
el.style.display = 'none';

What are Microtasks?
They are queued up and executed at the
end of a task. No browser action in
between.
· MutationObserver callback (DOM
changes)
· Promises (even settled ones)

// endless (macro) tasks queue - is useless but okay
function cb() {
console.log('cb');
setTimeout(cb, 0)
}
cb();
//
⚠ ⚠ ⚠
This will hang your browser
// — save everything then try
"
function cb() {
console.log('cb');
Promise.resolve().then(cb);
}
cb();

Testing Async Code
· What is async ?
· ngZone Primer
· fakeAsync & tick + flush
· async & ﬁxture.whenStable
· done (jasmine)
Chapter 05 — Testing: Testing Async Code

What is async?
· User does something
· Time passes
· Nothing else can change your application

Ever wondered what ngZone is ? Here a
ngZone Primer
· Zone.setInterval()
· Zone.alert()
· Zone.prompt()
· Zone.requestAnimationFrame()
· Zone.addEventListener()

it('setTimeout & tick & flushMicrotasks ', fakeAsync(() => {
let state = [];
state.push('promise result');
});
setTimeout(() => { state.push('timeout called'); });
setTimeout(() => { state.push('timeout called after 2s'); }, 2000);
expect(state).toEqual([]);
flushMicrotasks();
expect(state).toEqual(['promise result']);
tick();
expect(state).toEqual(['promise result', 'timeout called']);
tick(2000);
expect(state).toEqual(['promise result', 'timeout called', 'timeout called after 2s']);
}));

it('setTimeout(0) & tick ', fakeAsync(() => {
let state = [];
setTimeout(() => { state.push('timeout called'); });
setTimeout(() => { state.push('timeout called after 2s'); }, 2000);
expect(state).toEqual([]);
// tick wont' work -> Error: 1 timer(s) still in the queue.
// tick();
flush();
expect(state).toEqual(['timeout called', 'timeout called after 2s']);
}));

· async & ﬁxture.whenStable
· done
it('manually finish your spec', (done) => {
console.log('run');
expect(true).toBe(true);
done();
});

If you expect changes in
your template call
!
fixture.detectChanges()

Testing Routing
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes(routes),/*...*/
],
declarations: [/*...*/],
}).compileComponents();
router = TestBed.get(Router);
location = TestBed.get(Location);
fixture = TestBed.createComponent(AppComponent);
}));
describe('application routing', () => {
it('navigate to "" redirects you to /welcome', fakeAsync(() => {
fixture.ngZone.run(() => router.navigate(['']));
tick();
expect(location.path()).toBe('/welcome');
}));
});

Your tasks
· Stock Bug (Investigate)
· Stock Bug — Part 1, 2, 3
· Test RxJS w/ Oscar
"
— CPUs
· Test RxJS w/ Oscar
"
— Humans
· Can Oscar play multiple cards ?

· Animation Basics
· Appear & Disappear
· Numeric Triggers
· Disable
· Router Animations
· Animate Children

@Component({
selector: 'app-my',
template: 'hello animations',
animations: [
trigger('stateAnimation', [
state('on', style({
backgroundColor: 'red'
})),
state('off', style({
backgroundColor: 'green'
})),
])
]
})
export class MyComponent {
@HostBinding('@stateAnimation')
public state = 'on';
@HostListener('click')
toggleState() {
this.state = this.state === 'on' ? 'off' : 'on';
}
}
Chapter 06 — Animation: Basics

animations: [
...
]),
transition('on => off', [
animate('1s')
]),
transition('off => on', [
animate('1s')
])
]

animations: [
...
]),
// Variant A
transition('off => on, off => on', [
animate('1s')
])
// Variant B
transition('* => *', [
animate('1s')
])
]

animate(1000);
animate('1s');
animate('5s 250ms');
animate('5s 10ms cubic-bezier(.17,.67,.88,.1)');
animate(500, style({ background: "blue" })));
// ...

!
:host {
transition: background-color 1s;
}

<div [@stateAnimation]='valueOrState'></div>
@Component({...})
class MyComponent {
@HostBinding('@stateAnimation')
public valueOrState: 'on'|'off' = 'on'
}
Chapter 06 — Animation: Basics (Target)

Appear & Disappear
transition('void => *' ,...)
transition(':enter' ,...)
transition('* => void' ,...)
transition(':leavce' ,...)

animations: [
state('on', style({
backgroundColor: 'yellow'
})),
state('off', style({
backgroundColor: 'green'
})),
transition('on => off, off => on', [
animate('0.5s')
]),
transition(':enter', [
style({
height: 0,
backgroundColor: 'green',
overflow: 'hidden'
}),
animate('0.5s',
style({
height: '*',
overflow: 'auto'
})
)
])
])
]
Chapter 06 — Animation: Appear & Disappear

Disable
<div [@boxCounter]="boxCounter" [@.disabled]="true">
<div *ngFor="let items of boxes" class="box"></div>
</div>

<div [@boxCounter]="boxCounter">
<div *ngFor="let items of boxes" class="box" [@.disabled]="true"></div>
</div>

Events
<div
[@animateAnyChange]="counter"
(@animateAnyChange.start)="start($event)"
(@animateAnyChange.done)="end($event)">
</div>

More in the box:
· Query to target children elements
· Group vs. Sequence
· Stagger to insert small delays between
elements

animations: [
trigger('animateAnyChange', [
group([
query('h1', [
style({ backgroundColor: 'red'}),
animate('1s')
]),
query('p', [
animate('0.25s')
]),
query('button', [
style({ backgroundColor: 'yellow'}),
animate('0.5s')
]),
]),
])
])
]

animations: [
sequence([
query('h1', [
animate('1s')
]),
query('p', [
animate('0.25s')
]),
query('button', [
style({ backgroundColor: 'yellow'}),
animate('0.5s')
]),
]),
])
])
]

animations: [
query('h1, p', [
style({ opacity: 0, transform: 'translateY(-100px)'}),
stagger(-250, [
animate('500ms cubic-bezier(0.35, 0, 0.25, 1)',
style({ opacity: 1, transform: 'none' })
)
])
])
])
])
]

Router
Animations
animations: [
trigger('routeAnimation', [
group([
query(':enter', [
style({ transform: 'translateX(100%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
], { optional: true }),
query(':leave', [
animate('0.5s ease-in-out', style({
transform: 'translateY(100%)',
opacity: 0
}))
], { optional: true })
])
])
])
]
<a routerLink='a'>go to a</a><br>
<a routerLink='b'>go to b</a>
<div
[@routeAnimation]="yourOutlet.isActivated && yourOutlet.activatedRoute.routeConfig.path"
(@routeAnimation.start)="start($event)"
(@routeAnimation.done)="end($event)">
<router-outlet #yourOutlet="outlet"></router-outlet>
</div>

animateChild
query('@yourNestedTrigger', [
animateChild()
], { optional: true })

Your tasks
· First Flip - Part 1 & 2
· Flip Party
· Flip with Style
· Make the Hand Cards flip
· Animate Stock Flip

THANKS· @deluxee (Twitter)
· Workshop Project

Angular Advanced Workshop (+ Challenges)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Angular Advanced Workshop (+ Challenges)

Similaire à Angular Advanced Workshop (+ Challenges) (20)

Dernier

Dernier (20)

Angular Advanced Workshop (+ Challenges)