RxJs Trex

Reactive Programming. Learning Functional Programming through Game.

Transcript

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
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