Introduction to RxJS

@gerardsans

 Code Lab: bit.ly/angular-labs-rxjs

Slides: bit.ly/introduction-to-rxjs 

Blog post: bit.ly/rxjs-angular

A little about me

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

Introduction

Asynchronous data streams

 

  • Asynchronous, register a callback to be notified when results are available
  • Data, raw information: Number, String, Objects (Arrays, Sets, Maps)
  • Streams, sequences of data made available over time

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

Introduction

Basics

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

forEach/map/filter

for(var i=0, ii=team.length; i<ii; i+=1){
  console.log(team[i].name);
}
team.forEach(function(member){
  console.log(member.name);
});
var newTeam = [];
for(var i=0, ii=team.length; i<ii; i+=1){
  newTeam.push(team[i]);
}
var onlyNames = team.map(function(member){
  return { name: member.name };
});
var onlyOver100Commits = [];
for(var i=0, ii=team.length; i<ii; i+=1){
  if (team[i].commits>100) {
    onlyOver100Commits.push(team[i]);
  }
}
var onlyOver100Commits = team
  .filter(function(member){
    return (member.commits>100);
});

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

reduce

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(function(total, member){
    return total + member.commits;
}, 0);

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

composition

team
  .filter(over100Commits)
  .map(projectName)
  .map(toUpperCase)
  .forEach(log);

function over100Commits(member){
  return (member.commits>100);
}

function projectName(member){
  return member.name;
}

function toUpperCase(input){
  return input.toUpperCase();
}

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

Basic Stream

----0----1----2----3----> rx.interval(5000)

$scope.counter = 0;
rx.Observable
 .interval(5000) 
 .take(3)
 .safeApply($scope, function(x) { 
   $scope.counter = x; 
 })
 .subscribe(); // shows 0, 1, 2

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

Observable

Operations

Subscribe

Basic Stream

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

  • Observable
  • Operations
    • merge, concat, map and more!
  • Observer
    • onNext, onError, onCompleted
  • Subscribe/Unsubscribe

Key concepts

Basic Stream

observable.subscribe(
  function onNext(value){
    console.log(value);
  }, 
  function onError(error){
    console.log(error);
  }, 
  function onCompleted(){
    console.log('Completed');
  });

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

var observer = rx.Observer.create(
  function onNext(result){ 
    console.log(result); 
  },
  function onError(err){ 
    console.log(err); 
  },
  function onCompleted(){ 
    console.log('Completed'); 
  }
);
observable.subscribe(observer);

Observer

Basic Stream

Demo

http://bit.ly/introduction-to-rxjs                                                                         @angularjs_labs

var subscriber = observable.subscribe(observer);

$scope.$on("$destroy", function() {
  subscriber.dispose();
});

Unsubscribe

Thanks!

@angularjs_labs

Made with Slides.com