Introduction to RxJS 5 

by Gerard Sans (@gerardsans)

 

 

shield-large Created with Sketch.

Google Developer Expert

Master of Ceremonies

International Speaker

Angular 2 Trainer

Community Leader

800

500

ng-conf - May 4-6th

@ngconf​

AngularConnect - Sept 27-28th

@AngularConnect

Asynchronous Data Streams

Asynchronous Data Streams

will happen some time in the future

Asynchronous Data Streams

raw information

Asynchronous Data Streams

values made available over time

Examples

1

2

3

1

2

3

[               ,                ,               ]

Stream

Array

Pull vs Push

Pull Push
Arrays, Generators, 
Iterables		 Promises
Observables
synchronous asynchronous

Streams timeline

pipes (Unix 3, 1973)

streams (Node.js, 2009)

observables (Microsoft, 2012)

observables (Angular 2, 2014)

101 Arrays

forEach

var team = [
  { name: "Igor Minar", commits: 259 },
  { name: "Jeff Cross", commits: 105 },
  { name: "Brian Ford", commits: 143 }
];

for(var i=0, ii=team.length; i<ii; i+=1){
  console.log(team[i].name);
}

team.forEach( member => console.log(member.name) );

map

var team = [
  { name: "Igor Minar", commits: 259 },
  { name: "Jeff Cross", commits: 105 },
  { name: "Brian Ford", commits: 143 }
];

var newTeam = [];
for(var i=0, ii=team.length; i<ii; i+=1){
  newTeam.push({ name: team[i].name });
}

var onlyNames = team.map( 
    member => ({ name: member.name })
);

filter

var team = [
  { name: "Igor Minar", commits: 259 },
  { name: "Jeff Cross", commits: 105 },
  { name: "Brian Ford", commits: 143 }
];
var onlyOver120Commits = [];
for(var i=0, ii=team.length; i<ii; i+=1){
  if (team[i].commits>120) {
    onlyOver120Commits.push(team[i]);
  }
}
var onlyOver120Commits = team.filter( 
    member => member.commits>120 
);

reduce

var team = [
  { name: "Igor Minar", commits: 259 },
  { name: "Jeff Cross", commits: 105 },
  { name: "Brian Ford", commits: 143 }
];
var total = 0; // initial value
for(var i=0, ii=team.length; i<ii; i+=1){
  total = total + team[i].commits;
}
var total = team.reduce( 
  (total, member) => total + member.commits
, 0); // initial value

// 507

Composition

var over120Commits = x => x.commits>120;
var memberName = x => x.name;
var toUpperCase = x => x.toUpperCase();
var log = x => console.log(x);

team
  .filter(over120Commits)
  .map(memberName)
  .map(toUpperCase)
  .forEach(log);

"IGOR MINAR"
"BRIAN FORD"

RxJS 5

beta2

Main Contributors

@BenLesh

@AndreStaltz

@_ojkwon

@trxcllnt

@robwormald

Observable

//Observable constructor
let obs$ = new Observable(observer => {
  try {
    //pushing values
    observer.next(1);
    observer.next(2);
    observer.next(3);

    //complete stream
    observer.complete();
  }
  catch(e) {
    //error handling
    observer.error(e);
  }
});

Basic Stream

//ASCII Marble Diagram

----0----1----2----3---->   Observable.interval(1000);
----1----2----3|            Observable.fromArray([1,2,3]);
----#                       Observable.of(1,2).do(x => throw '#');

---> is the timeline
0, 1, 2, 3 are emitted values
# is an error
| is the 'completed' signal

RxMarbles

Observable helpers

//Observable creation helpers

Observable.of(1);                        // 1|
Observable.of(1,2,3).delay(100);         // ---1---2---3|

Observable.from(promise);
Observable.from(numbers$);
Observable.fromArray([1,2,3]);           // ---1---2---3|

Observable.fromEvent(inputDOMElement, 'keyup');

Subscribe

Observable.subscribe(
  /* next */      x => console.log(x),
  /* error */     x => console.log('#'),
  /* complete */  () => console.log('|')
);

Observable.subscribe({
  next:  x => console.log(x),
  error: x => console.log('#'),
  complete: () => console.log('|')
});

Hot vs Cold

Hot Cold
obs.shared() default
broadcasted pre-recorded
subscribers synced subscribers
not synced

Unsubscribe

var subscriber = Observable.subscribe(
  twit => feed.push(twit),
  error => console.log(error),
  () => console.log('done')
);

subscriber.unsubscribe();

Operators

// simple operators
map(), filter(), reduce(), scan(), first(), last(), single(), 
elementAt(), toArray(), isEmpty(), take(), skip(), startWith()

// merging and joining
merge(), mergeMap(flatMap), concat(), concatMap(), switch(), 
switchMap(), zip()

// spliting and grouping
groupBy(), window(), partition()

// buffering
buffer(), throttle(), debounce(), sample()

Debugging RxJS

  • No debugger support yet
  • obs.do(x => console.log(x)) 
  • Drawing a marble diagram

RxJS 5 in Angular2

  • Asynchronous processing
  • Http
  • Forms: controls, validation
  • Component events
    • EventEmitter

Wikipedia Search

  • Http (Jsonp)
  • Form: control (valueChanges)
  • Async pipe
  • RxJS operators
    • flatMap/switchMap 
    • retryWhen

plunker

Why Observables?

  • Flexible: sync or async
  • Powerful operators
  • Less code

Want more?

2x FREE Become a ninja with Angular 2

AMA Warm.bites('Microsoft')

14.50 - 15.00

Bedankt!

Introduction to RxJS 5

By Gerard Sans

Introduction to RxJS 5

Angular 2 introduces a new Data Architecture based on Reactive Programming. RxJS 5 is a rewrite of Reactive Extensions focused on performance and usability. We are really excited to see the new approach using streams. We will cover a basic introduction to streams and RxJS 5 covering HTTP and Async Pipes.

  • 10,637

More from Gerard Sans