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. https://samueleresca.net @samueleresca 3

This talk is about Reactive programming It is language independent(..but) It is pattern oriented https://samueleresca.net @samueleresca 4

“Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change.” - Wikipedia https://samueleresca.net @samueleresca 5

Reactive systems are: responsive, resilient, elastic, message driven. http://www.reactivemanifesto.org/ https://samueleresca.net @samueleresca 6

Start to think functional https://samueleresca.net @samueleresca 7

Immutability, first-class functions, higher- order functions https://samueleresca.net @samueleresca 8

Immutability https://samueleresca.net @samueleresca 9 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 https://samueleresca.net @samueleresca 10 const myArr = [ 5, 10, 4, 50, 3 ]; const multiplesOfFive = myArr.filter( (num) => num % 5 === 0 );

Immutability, first-class functions, higher- order functions https://samueleresca.net @samueleresca 11

ReactiveX http://reactivex.io/ https://samueleresca.net @samueleresca 12

The best idea from Observer pattern, Iterator pattern and functional programming. https://samueleresca.net @samueleresca 13

The Observer pattern lets a number of observers get notified when something changes in a subject that they are observing. https://samueleresca.net @samueleresca 14

https://samueleresca.net @samueleresca 15 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. https://samueleresca.net @samueleresca 16

https://samueleresca.net @samueleresca 17 The Iterator <<interface>> provide an abstraction over the ListIterator class.

The best idea from Observer pattern, Iterator pattern and functional programming. https://samueleresca.net @samueleresca 18

NOT ONLY a Javascript library https://samueleresca.net @samueleresca 19

https://samueleresca.net @samueleresca 21 [1,2,3].map(value=>value*10) .forEach(value=> console.log(value) ); //10 //20 //30

https://samueleresca.net @samueleresca 22 Observable.of(1,2,3) .map(value=>value*10) .subscribe(value=> console.log(value) ); //10 //20 //30

https://samueleresca.net @samueleresca 23 /** * 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>

https://samueleresca.net @samueleresca 24 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 https://samueleresca.net @samueleresca 25

Observable represents a stream https://samueleresca.net @samueleresca 26

https://samueleresca.net @samueleresca 27 button.addEventListener('click',event=>{ console.log("DAMN, you clicked"); });

https://samueleresca.net @samueleresca 28 Observable.fromEvent(button, 'click') .subscribe(event=> { console.log(”DAMN, you clicked"); });

https://samueleresca.net @samueleresca 29 Observable.fromEvent(button, 'click') .debouceTime(500) .subscribe(event=> { console.log(”DAMN, you clicked"); });

https://samueleresca.net @samueleresca 30 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

https://samueleresca.net @samueleresca 31 http://rxmarbles.com/

Everything is a data stream Operators make logic easy and functional https://samueleresca.net @samueleresca 32

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

https://samueleresca.net @samueleresca 34 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(); }); }

https://samueleresca.net @samueleresca 35 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() );

https://samueleresca.net @samueleresca 36 Reactive extensions provide better codebases: functional, less is more, async error handling, concurrency made easy

https://samueleresca.net @samueleresca 37 "Legacy code is any code without tests" - Michael Feathers

https://samueleresca.net @samueleresca 38 Functional design is testable

https://samueleresca.net @samueleresca 39 Reactive extensions are covered by unit tests http://reactivex.io/rxjs/test.html

https://samueleresca.net @samueleresca 40 Two testing techniques: standard, scheduler testing

https://samueleresca.net @samueleresca 41 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); });

https://samueleresca.net @samueleresca 42 new Rx.TestScheduler();

https://samueleresca.net @samueleresca 43 Observable.of(1,2,3) .map(value=>value*10) .subscribe(value=> console.log(value) );

https://samueleresca.net @samueleresca 45 Rx.TestScheduler.createColdObservable('-1-2--3--|');

https://samueleresca.net @samueleresca 46 //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>

https://samueleresca.net @samueleresca 47 Rx.TestScheduler.createColdObservable('-1-2--3--|');

https://samueleresca.net @samueleresca 48 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(); });

https://samueleresca.net @samueleresca 49 Reactive extension helps us to deal with the async behavior of reactive code Reactive code is test-friendly

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

Start to think using an Reactive approach https://samueleresca.net @samueleresca 52

https://samueleresca.net @samueleresca 53 /* 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())

https://samueleresca.net @samueleresca 54 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 https://samueleresca.net @samueleresca 56

https://samueleresca.net @samueleresca 57 //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 }, [])

https://samueleresca.net @samueleresca 59 /* 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 https://samueleresca.net @samueleresca 60

https://samueleresca.net @samueleresca 61 //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(); }

https://samueleresca.net @samueleresca 62 const userWords$ = new Subject() //combine the userWords$ subject with our game$ const userWordsAndGame$ = game$ .combineLatest(userWords$, (gameObjects, userWord) => { return { gameObjects, userWord } }) .distinct(o => o.userWord) //distinct to prevent duplicate .subscribe((gou) => { //check if word matches with some letters Words.matchWords(gou, function () { //if the check is positive.. console.log('matched word') console.log('scored!'); ScoreSubject.next(100) }); Drawings.appendToDom(gou.userWord); });

Tracking player score https://samueleresca.net @samueleresca 63

https://samueleresca.net @samueleresca 64 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() https://samueleresca.net @samueleresca 65

https://samueleresca.net @samueleresca 66 // 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! https://samueleresca.net @samueleresca 67

https://samueleresca.net @samueleresca 68 Reactive extensions give us the ability to handle events and react to data using some higher level abstractions.

https://samueleresca.net @samueleresca 69 It might not be the type of library you rely on to solve one problem in the application.

https://samueleresca.net @samueleresca 70 BE HUMBLE.

https://samueleresca.net @samueleresca 71 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 72 https://samueleresca.net @samueleresca (280 chars are enough)

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

More Related Content

What's hot

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

More from Codemotion

Recently uploaded

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

Editor's Notes