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 Slide

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

    View Slide

  3. Basic version of
    Chrome 404 Game

    View Slide

  4. View Slide

  5. Objective:
    Think Reactively

    View Slide

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

    View Slide

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

    View Slide

  8. Mindset.

    View Slide

  9. Thinking events as
    an array / stream.

    View Slide

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

    View Slide

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

    View Slide

  12. 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 Slide

  13. Start coding!

    View Slide

  14. bit.ly / live-note

    View Slide

  15. 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 Slide