Angular mix chrisnoring

How SPAs got their groove back
Christoffer Noring
Google Developer Expert
@chris_noring

© AngularMIX All rights reserved.
https://www.angularmix.com
Speaker: Christoffer Noring
 Google Developer Expert
 Telerik Developer Expert ( NativeScript )
 Fullstack Developer at Digital McKinsey
 London Javascript meetup Organizer
 Author of RxJS Ultimate

Introduction
 Overview
 The lost groove
 Async and Callback Hell
 The limitations of Promises
 Introducing the App fu
 RxJS beginner to master
 Everything is not Response/ Request
 Web Sockets, Socket.io
 E.g Updated feeds and polling, Earthquake API, Firebase
 All together now – The Feed pattern
We all need a Rob in a our lives

Why should I care?
Remember, we write code for humans
Knowing RxJS and how to use it Angular will:
Make you write less code
Make less mistakes that leads to memory leaks
Make you write simpler code that is easier to maintain

We’ve lost our direction ( groove )
 Dealing with async code is painful
 Our paradigm is usually how over what = we write too much code

Async history
callback hell
getData('url', data => {
getMoreData('url2/'+ data.id, (moreData) => {
getEvenMoreData('url3' + moreData.id, (evenMoreData) => {
/* do something*/
});
});
});
Pain, so much pain

Async history
enter Promises
getData()
.then( getMoreData )
.then( getEvenMoreData )
.catch( handleError );
Now we are talking, readable async

Async present day
async/await
async function get () {
let data = await getData('url');
let moreData = await getMoreData('url2' + data.id);
let evenMore = await getEvenMore('url3',moreData.id);
return evenMore;
}
get().then( data => console.log( 'data', data ));
Everything is great or?

Promises are limited
what to use for complex scenarios?
 Returns one value
 Hard to retry
 No cancellation
 Doesn’t mix easily with other async concepts

There is a better to way to do async
and its part of Angular – RxJS
from Daniel La Russo to Miyagi

1 2 3
Time
Observable – stream of data over time

Observables
let stream$ = Observable.create( observer => {
observer.next( 1 );
});
stream$.subscribe(
data => console.log('data', data)
);
Generate value here
Subscribe here

Observables + error
observer.next( 1 );
observer.error('err');
});
stream$.subscribe(
data => console.log('data', data),
err => console.error('err', err) // err
);
Error produced
Subscribe to error here

Observables - completion
observer.next( 1 );
observer.complete();
});
stream$.subscribe(
data => console.log('data', data),
err => console.error('err', err),
() => console.log('complete')
);
Complete the stream
Subscribe to complete
No more value will be generated

let counter = 0;
let id = setInterval(() => observer.next(counter++), 1000);
return function(){ clearInterval(id); }
});
let subscription = stream$.subscribe(
data => console.log(‘data’, data)
);
setTimeout(() => subscription.unsubscribe());
Cancelling aka unsubscribing
Cleaning up resources
Define a clean up method

But mostly because Kobra Kai says we can’t
Knowledge is understanding how to build it,
So let’s build our own RxJS

 create() operator
 subscribe()
 unsubscribe()
 adding a filter() operator
What to build

We should have a behaviour function
that takes an observer as a parameter
We should have a create method
on our Observable class
We should have an Observable class
observer.next( 1 );
});
Create a stream

create() needs to return an Observable instance and
save the behaviour function
class Observable {
constructor( behaviourFn ) { this.behaviourFn = behaviourFn; }
create( behaviourFn ) { return new Observable(behaviourFn); }
}
Observer class

Data callback
We need to define an Observer class
class Observable {
create(behaviourFn) { return new Observable(behaviourFn); }
subscribe( dataFn ) {
behaviourFn( observer );
}
}
stream$.subscribe( data => console.log(data));
And this guy, dataFn
needs to go somewhere
Subscribe to the stream

class Observer {
constructor( dataFn ) { this.dataFn = dataFn; }
next(val) { this.dataFn( val ); }
}
When we call next(),
we need to call dataFn()
Observer class

class Observable {
let observer = new Observer( dataFn );
behaviourFn( observer );
}
}
provide dataFn() to Observer so it may be used when calling
.next()
Update Observable class

observer.next(1);
observer.next(2);
});
stream$.subscribe( data => console.log(‘sub1’, data));
// Sub1 1, Sub1 2
stream$.subscribe( data => console.log(‘sub2’, data));
// Sub2 1,Sub 2 2
It works!!
Put it to the test

We are one with the stream

let counter = 0;
let id = setInterval(() => {
observer.next(counter++);
}, 1000);
return function() { clearInterval(id); }
});
Let’s create something
worth unsubscribing to
Let’s define a clean up
method
Add unsubscribe

class Observable {
let observer = new Observer( dataFn );
let cleanUpFn = behaviorFn( observer );
return {
unsubscribe : cleanUpFn
};
}
}
behaviourFn IS our clean up function,
just return it from the unsubscribe() method
Let’s update Observable class

let counter = 0;
let id = setInterval(() => {
observer.next(counter++);
}, 1000);
return function() { clearInterval(id); }
});
stream$.unsubscribe();
This is called
When we call this
And using it

Cleanup successful

Summary so far
 Observables
 Observer
 Unsubscribe
We know how to build

Wisdom is to NOT build it, because other people do
it better
And there is a GitHub project already,
so contribute

Operators
The thing that empowers Observables

Operators
Operators can:
- Operate on your data
- Decide the speed of the stream
- Combine streams
- Change streams
And much more
let stream$ = Rx.Observable
.of(1, 2, 3);
.operator()
.operator()
.operator();
Define your stream
Apply operator after operator

Operators- categories
Construction Conversion Combination
Mathematical Time Grouping

There is an operator for everything
let stream$ = Rx.Observable
.of(1,2,3)
.map( )
.filter()
.toPromise()
.then(
data => console.log(data)
)
Don’t make bunny sad though
Even for converting Observable to
Promise

Operators- build it yourself

class Observable {
constructor( behaviour ) {
this.behaviour = behaviour;
}
filter(fnFilter) {
let obs = new FilterableObservable(this.behaviour, fnFilter);
return obs;
}
static create( behaviour ) {
return new Observable( behaviour );
}
subscribe( fnData ) {
let observer = new Observer(fnData);
this.behaviour( observer );
}
}
Add filter() – update our Observable class
We need a new
type of Observable
We send in behaviour
and filter function

class FilterableObservable extends Observable {
constructor(behaviour, filter) {
super(behaviour);
this.filter = filter;
}
subscribe(fnData) {
let observer = new Observer( fnData );
observer.next = (val) => {
if(this.filter(val)){ fnData( val ); }
};
this.behaviour( observer );
}
}
FilterableObservable
For every value, check
with our filter() if it should
be emitted
We even know how to build
Operators now

Before talking about Angular with RxJS
Wrap Observable
Change from
one stream to the next
Let’s learn a couple of more concepts

let elem = document.getElementById('text');
let stream = Rx.Observable
.fromEvent(elem,'keyup')
.switchMap( data => {
return new Rx.Observable.of('some data back based on: '+ data);
});
stream.subscribe( data => {
console.log('data', data);
})
Change from one type of stream to the next
flatMap(), switchMap()
keyUp stream
Change into new stream

Working with switchMap/flatMap is a key concept
You are able to divide up your code into multiple stream,
Aka you are able to break down the problem
keykey key
AJAX AJAX AJAX
Combine different types of streams
to build your algorithm
It will also make it easier to isolate errors into
a specific stream

Angular comes with RxJS in everything

Angular comes with RxJS
an async scenario that grows with you
class Service{
constructor(private http:HttpClient) {}
getData() {
return this.httpClient
.get('url')
.map( this.mapPeople );
}
mapPeople():Array<Person> {
return json => json.map( person => new Person(person));
}
}
Get your HTTP data with HttpClien

export class PeopleComponent
implements OnInit,
implements OnDestroy {
people:Array<Person>;
subscription;
constructor(private srv: Service) {}
ngOnInit() {
this.subscription = srv.getData()
.subscribe( data => this.people = data );
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
Subscribe
Call unsubscribe on destroying
component
Angular WITHOUT async pipe

Angular removes Cancelling
with async pipe@Component({
template : `
<div *ngFor="let person of people$ | async">
{{ person.name }}
</div>
`
})
export class PeopleComponent implements OnInit {
people$:Observable<Person>;
constructor(private srv: Service) {}
ngOnInit() { this.people$ = srv.getData(); }
}
No more
subscribe()
Or
Unsubscribe()

class Service{
people: Array<Person>;
getData() {
.get('url')
.map( this.mapPeople )
.do( data => localStorage.setItem(‘people’,data); )
.catch( err => {
let people = localStorage.getItem(‘people’);
return of(people !== null ? people : []);
})
}
}
Handle offline
with localStorage
Save response to cac
Retrieve cached response
if erroring out

class Service{
getData() {
.get('url')
.retryWhen( err => err.delay(200) )
.take(noOfAttemptsBeforeGivingUp)
}
}
Handle shaky connections
with retryWhen
Delays each attempt with 200ms,
Also retries x times
Ok to do, but stream finishes,
after x attempts

class Service{
getData() {
.get('url')
.retryWhen( err => {
err
.scan((errCount, err) =>
if(errCount === 2) { throw ‘giving up’ }
else { return errCount + 1; }
,0)
.delay(200 * errCount) // progressive increase
time
})
.take(noOfAttemptsBeforeGivingUp) // 404,500
}
}
Handle shaky connections
better solution
stream$.subscribe(
data => console.log(
'err stream',
data
),
err => console.log(
'erroring out after x retries',
respondWithCachedData)
)
errorCount, delay and termination
Sort out why it failed to see
wether it is worth retrying

From a service to a feed
What is a feed?
Why do we want a feed?
There might be more than one component wanting to consume the data
We don’t want to do unnecessary HTTP calls
An exposed Observable that can have many subscribers

From a service to a feed
class Service{
people: Array<Person>;
constructor(private http:HttpClient) {
this.fetchData();
}
fetchData() {
.get('url')
.subscribe( data => this.people = data );
}
} @Component({})
export class PeopleComponent implements OnInit
{
private people: Array<Person>;
constructor(private srv: PersonService) { }
get people() { return this.srv.people; }
}
We can do this with a minimum of RxJS,
Trust in Angulars change detection
Use this for Change Detection
to trigger

What did we learn on services?
We should handle offline
We should handle shaky connections
How to build a feed service

There is more than HTTP
 HTTP
 Web Sockets, Full Duplex connections
 Firebase
 Socket.io
 HTTP + Polling feeds
And it affects how we write our
service and consumes it

Building our service
add Socket.io
import * as io from 'socket.io-client';
export class TaskService {
subscription;
tasks:Task[] = [];
constructor(private http:Http) {
this.fetchData();
this.socket = io(this.url);
this.socket.on('task', (data) => {
this.tasks = [ ...this.tasks, data ];
});
}
private fetchData() { /* omitted */ }
}
We can use our feed pattern,
but what if we want to
listen to changes?
And display CSS

Two different approaches
we want to know when a change happens
One of the few cases when a Subject might be need
.share()
.replay(1)
BehaviourSubject

Adding BehaviourSubject
export class TaskService {
private internalStore:BehaviourSubject;
constructor() { this.internalStore = new BehaviourSubject([]); }
get store() { return this.internalStore.asObservable(); }
private fetchTasks(){
this.http
.get('/data/tasks.json')
.map(response => response.json())
.map(this.mapTasks)
.do( data => {
this._store.next( data );
localStorage.setItem('tasks', JSON.stringify(data))
})
.catch( err => {
return Rx.Observable.of(this.fetchLocalStorage());
});
}
}
Initialize Subject
Expose as Observable, aka
defensive coding
Gives us start data,
also remembers last emitted

Building our service
consuming our service
@Component({})
export class TaskComponent implements OnInit {
constructor(private srv: TaskService) {}
ngOnInit() {
this.srv.store.subscribe( tasks => {
// tasks where updated somehow, show CSS
});
}
}
Only when we care about changes,
REMEMBER most of the time we don’t need a Subject

Earthquake API
HTTP Polling
 The title (28 pt) uses the dark red (the 4th color in the template)
 The subtitle is 1 size smaller (24 pt) and should always uses the theme
gray color (2nd color in the template)
 Text here is 20 pt
 18 pt
 16 pt

Mixing different async concepts
Rich composition
Naive Little better Angular version

First naive approach
.map( ev => ev.key )
.filter( key => {
return elem.value.length > 3;
})
return new Rx.Observable.of('some data back based on: '+ data);
});
Only do something when
We have enough entered charac
From keystream to AJAX stream, playing nice with
other async concepts – rich composition

Better approach
.map( ev => ev.key )
.debounceTime(500)
return new Rx.Observable.of('some data back
based on: '+ data);
});
Wait til the user stopped
typing for 500ms

Angular approach - service
export class ServiceService {
constructor(private http: HttpClient) {}
httpSearch(inputText: string) {
return this.http.get('url?query=${inputText}');
}
}
A simple http.get() call

Angular approach - component
<input type="text" [formControl] = "input" class="form-control” />
<div *ngFor="let term in result | async">
{{term}}
</div>
@Component({})
export class SearchComponent {
result$:Observable;
input = new FormControl();
constructor(private srv:SearchService) {
this.result$ = this.input
.valueChanges
.debounceTime(500)
.distinctUntilChanged()
.switchMap(inputText => this.srv.httpSearch(inputText))
}
}
Capture change,
when it happens

Summary
 We actually understand how to build RxJS
 Angular helps out with async pipe and its own change detection
 RxJS does a lot of the heavy lifting thanks to
 Operators for manipulating data
 Operators for advanced error scenarios such as retry etc..
 Some constructs in RxJS should be sparsely used like Subject
 We can rich composition, cause everything async can be made into
an Observable

My free gitbook on RxJS
 angular.io/resources RxJS 5 Ultimate
 Help me make it better or just tell your friends
 Power to the community

Thank you
promise
.retry(4)
.kungfuKid(1)
@chris_noring

Angular mix chrisnoring

More Related Content

What's hot (20)

Similar to Angular mix chrisnoring (20)

More from Christoffer Noring (20)

Recently uploaded (20)

Angular mix chrisnoring