Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RxJs Trex

RxJs Trex

Reactive Programming. Learning Functional Programming through Game.

Jecelyn Yeen

August 03, 2019
Tweet

More Decks by Jecelyn Yeen

Other Decks in Programming

Transcript

  1. Learning Functional Programming through Game
    Reactive Programming

    View full-size slide

  2. @JecelynYeen
    Software Architect
    Google Developer Expert
    - Angular
    - Web Technologies
    Organizer
    - NG-MY 2019
    - Women Who Code KL

    View full-size slide

  3. Basic version of
    Chrome 404 Game

    View full-size slide

  4. Objective:
    Think Reactively

    View full-size slide

  5. We are using RxJS.
    But doesn’t need to be.

    View full-size slide

  6. Chart Data Source Info
    Imperative vs Functional
    What’s the difference?

    View full-size slide

  7. Thinking events as
    an array / stream.

    View full-size slide

  8. Start the game:
    - Press ENTER
    - Click START

    View full-size slide

  9. document
    .querySelector('#btnStart')
    .addEventListener("click", startGame());
    document
    .addEventListener("keydown", startGame());

    View full-size slide

  10. stream
    .pipe(
    tap(() => startGame())
    )
    .subscribe();
    import { fromEvent, merge } from 'rxjs';
    import { tap } from 'rxjs/operators';
    Stream operator helpers
    Run it!
    Stream creation helpers
    Create a stream with
    button click and keydown
    Chain all operation(s)
    const stream = merge(
    fromEvent(btnStart, 'click'),
    fromEvent(document, 'keydown')
    );

    View full-size slide

  11. Start coding!

    View full-size slide

  12. bit.ly / live-note

    View full-size slide

  13. Thank you!
    Follow @JecelynYeen
    Code:
    Angular: https://github.com/chybie/rxjs-trex
    JS: https://stackblitz.com/edit//
    rxjs-trex-run.stackblitz.io/
    JS Starter: https://stackblitz.com/edit/rxjs-trex-starter
    Live demo:
    https://rxjs-trex.netlify.com/
    Slides:
    http://speakerdeck.com/chybie/rxjs-trex

    View full-size slide