RxJs Trex

Reactive Programming. Learning Functional Programming through Game.

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