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


  1. Learning Functional Programming through Game Reactive Programming

  2. @JecelynYeen Software Architect Google Developer Expert - Angular - Web

    Technologies Organizer - NG-MY 2019 - Women Who Code KL
  3. Basic version of Chrome 404 Game

  4. None
  5. Objective: Think Reactively

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

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

  8. Mindset.

  9. Thinking events as an array / stream.

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

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

  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') );
  13. Start coding!

  14. bit.ly / live-note

  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