Samuele Resca - REACTIVE PROGRAMMING, DAMN. IT IS NOT ABOUT REACTJS - Codemotion Milan 2017

Reactive programming, DAMN. It is not
about ReactJs
Samuele Resca
CODEMOTION MILAN - SPECIAL EDITION
10 – 11 NOVEMBER 2017

https://samueleresca.net @samueleresca 2

This talk is NOT about ReactJS.
It is a talk, NOT a workshop.

This talk is about Reactive programming
It is language independent(..but)
It is pattern oriented

“Reactive programming is an
asynchronous programming
paradigm concerned with data streams and
the propagation of change.”
- Wikipedia

Reactive systems are: responsive, resilient,
elastic, message driven.
http://www.reactivemanifesto.org/

Start to think functional

Immutability, first-class functions, higher-
order functions

Immutability
const message = "Hello Codemotion!";
const result = message.toUpperCase();
console.log(message); //message -> Hello Codemotion!
console.log(result); //result -> HELLO CODEMOTION!

First-class functions
Higher-order functions
const myArr = [ 5, 10, 4, 50, 3 ];
const multiplesOfFive =
myArr.filter(
(num) => num % 5 === 0
);

Immutability, first-class functions, higher-
order functions

ReactiveX
http://reactivex.io/

The best idea from Observer pattern, Iterator
pattern and functional programming.

The Observer pattern lets a number of
observers get notified when something
changes in a subject that they are observing.

For each observer in observers call
observer.Update()

Iterator pattern lets us abstract how we
iterate over a specific collection by wrapping
this iteration inside an object and providing a
uniform API.

The Iterator <<interface>>
provide an abstraction
over the ListIterator class.

The best idea from Observer pattern, Iterator
pattern and functional programming.

NOT ONLY a Javascript library

[1,2,3].map(value=>value*10)
.forEach(value=>
console.log(value)
);
//10
//20
//30

Observable.of(1,2,3)
.map(value=>value*10)
.subscribe(value=>
console.log(value)
);
//10
//20
//30

/**
* A representation of any set of values over any amount of
time. This is the most basic building block
* of RxJS.
*
* @class Observable<T>
*/
export declare class Observable<T> implements
Subscribable<T>

subscribe(
next?: (value: T) => void,
error?: (error: any) => void,
complete?: () => void): Subscription;

Array is a collection of items
Observable is a collection of items over time

Observable represents a stream

button.addEventListener('click',event=>{
console.log("DAMN, you clicked");
});

Observable.fromEvent(button, 'click')
.subscribe(event=>
{
console.log(”DAMN, you clicked");
});

Observable.fromEvent(button, 'click')
.debouceTime(500)
.subscribe(event=>
{
console.log(”DAMN, you clicked");
});

combineAll, combineLatest concat, concatAll, forkJoin, merge,
mergeAll, race, startWith, withLatestFrom, zip
Combination
defaultIfEmpty, everyConditional
Error handling catch, retry, retryWhen
Filtering
debounce, debounceTime, distinctUntilChanged, filter, first,
ignoreElements, last, sample, single, skip, skipUntil,
skipWhile, take, takeUntil, takeWhile, throttle, throttleTime
Transformation buffer, bufferCount, bufferTime, bufferToggle, bufferWhen,
concatMap, concatMapTo, expand, exhaustMap, groupBy, map,
mapTo, mergeMap, partition, pluck, scan, switchMap, window,
windowCount, windowTime, windowToggle, windowWhen

http://rxmarbles.com/

Everything is a data stream
Operators make logic easy and functional

Case of study @ Netflix
Observable everywhere.
App startup, Player, Data access, Animations,
View/Model binding, Logging

Netflix JavaScript Talks - Async JavaScript with Reactive Extensions
function play(movieId, cancelButton, callback) {
var movieTicket,
playError,
tryFinish = function () {
if (playError) {
callback(null, playError);
}else if (movieTicket && player.initialized) {
callback(null, ticket);
}
};
cancelButton.addEventListener("click",
function () {
playError = "cancel";
});
if (!player.initialized) {
player.init(function () {
playError = error;
tryFinish();
});
}
authorizeMovie(movieId, function (error, ticket) {
playError = error;
movieTicket = ticket;
tryFinish();
});
}

Netflix JavaScript Talks - Async JavaScript with Reactive Extensions
var authorizations =
player
.init()
.map(() =>
playAttemps
.map(movieId =>
player.authorize(movieId)
.retry(3)
.takeUntil(cancels))
.concatAll())
.concatAll();
authorizations.forEach(
license => player.play(license),
error => showError()
);

Reactive extensions provide better codebases:
functional, less is more, async error handling,
concurrency made easy

"Legacy code is any code without tests"
- Michael Feathers

Functional design is testable

Reactive extensions are covered by unit tests
http://reactivex.io/rxjs/test.html

Two testing techniques: standard, scheduler
testing

it("Should call AWESOME APIs for the resource "100456733922"", (done) => {
//ARRANGE | setting up the test variables
const resource = '100456733922';
const url = "https://awesome.apis.com/v1/resource/" + resource;
//ACT | Observable.fromPromise is our SUT
const testFn = query => Rx.Observable.fromPromise(preparePromise(query))
.subscribe(data => {
//ASSERT | check the response of the AJAX request
expect(data).toHaveProperty("data")
expect(data).toHaveProperty("data.result")
expect(data.data.result.length).toBe(10)
}, null, done);
testFn(url);
});

new Rx.TestScheduler();

Observable.of(1,2,3)
.map(value=>value*10)
.subscribe(value=>
console.log(value)
);

Rx.TestScheduler.createColdObservable('-1-2--3--|');

//it does not emit values, until someone trigger the //subscription
createColdObservable<T>(marbles: string, values?: any, error?: any):
ColdObservable<T>
//immediate, it does not wait the subscribe method //to emit values
createHotObservable<T>(marbles: string, values?: any, error?: any):
HotObservable<T>

Rx.TestScheduler.createColdObservable('-1-2--3--|');

it('Should multiply values by 10', () => {
//ARRANGE | initialize TestScheduler constructor
let scheduler = new Rx.TestScheduler();
let stubObs = scheduler.createColdObservable('-1-2--3--|');
//ACT | perform the map operation
let result = stubObs.
map((value) => value * 10);
//ASSERT | check the result
scheduler
//ASSERT | it should be an observable
.expectObservable(result)
//ASSERT | it should have the expected structure, with the correct values
.toBe('-a-b--c--|', { 'a': 10, 'b': 20, 'c': 30 });
scheduler.flush();
});

Reactive extension helps us to deal with the async
behavior of reactive code
Reactive code is test-friendly

Demo: Say What Muddafukaaa!!!!
https://www.barbarianmeetscoding.com/
https://github.com/samueleresca/reactive-programming-damn

Start to think using an Reactive approach

/* gameLoop$ | simply define an loop, it is triggered each
INTERVAL_GAME time */
const gameLoop$: Observable<number> =
Observable.interval(GameVars.INTERVAL_GAME)
/* background$ | define an observable of type new
Background() */
const background$: Observable<Background> =
Observable.of(new Background())

const game$ : Observable<any> =
// every INTERVAL_GAME time
gameLoop$
// gather all my observables with game objects
.combineLatest(background$, (_, b) => { return [b]; })
// and update and draw them
.subscribe((gameObjects) => {
gameObjects
.forEach(g => {
g.update()
g.draw()
})
});

Let’s add some letters

//initialize the letters$ observable
const letters$: Observable<Letter[]> = Observable
//trigger itself every INVERVAL_LETTER time
.interval(GameVars.INTERVAL_LETTER)
//generate new random letter in random position
.map(_ => new Letter(Words.getRandomLetter(),
Drawings.getRandomPosition(0, 500), 0))
//push generated letter in an array of letter
.scan((letters, newLetter) => {
console.log('generate new letter');
letters.push(newLetter)
return letters
}, [])

/* combine the letters$ observable with the gameLoop$ by
using the combineLatest operator*/
const game$ = gameLoop$
.combineLatest(background$, letters$, (_,b,l) => {
const gameObjects = [b, ...l]
return gameObjects
})

Catch the player speech using Annyang

//map each caught word with an action
const commands = {
'*word': word => {
console.log('user said: ', word);
userWords$.next(word);
}
export function configureVoiceRecognition(commands: Object) {
// Add our commands to annyang
annyang.addCommands(commands);
// Start listening. You can call this here, or attach this call to an event, button,
etc.
annyang.start();
}

Tracking player score

const ScoreSubject = new Subject()
/* use the ScoreSubject to create score pipeline */
const score$: Observable<Score> = ScoreSubject
.startWith(0)
.map((v: number) => new Score(v))
/* we use scan operator to track the points */
.scan((prev, cur) =>
prev.add(cur), new Score(0))

isDead()

// player$ | manage player data
const player$: Observable<Player> = Observable
//initialize a new player
.of(new Player(340, 20, GameVars.LIVES));
const game$ = gameLoop$
.combineLatest(background$, letters$, score$, player$,
(_,b,l,s,p) => {
const gameObjects = {letters: l, player: p,
all: [b, s, p, ...l]}
return gameObjects
})
// takeWhile | iterate game loop until player is dead
.takeWhile(go => !go.player.isDead())

All together now!

Reactive extensions give us the ability to
handle events and react to data using some
higher level abstractions.

It might not be the type of library you rely
on to solve one problem in the application.

BE HUMBLE.

References
barbarianmeetscoding.com
Netflix JavaScript Talks – Async JavaScript with Reactive Extensions
Netflix JavaScript Talks – Real-time Insights powered by Reactive
Programming
The introduction to Reactive Programming you've been missing

https://samueleresca.net
@samueleresca
(280 chars are enough)

Samuele Resca - REACTIVE PROGRAMMING, DAMN. IT IS NOT ABOUT REACTJS - Codemotion Milan 2017

Recommended

More Related Content

What's hot (20)

Similar to Samuele Resca - REACTIVE PROGRAMMING, DAMN. IT IS NOT ABOUT REACTJS - Codemotion Milan 2017 (20)

More from Codemotion (20)

Recently uploaded (20)

Samuele Resca - REACTIVE PROGRAMMING, DAMN. IT IS NOT ABOUT REACTJS - Codemotion Milan 2017

Editor's Notes