Reactive Programming. Learning Functional Programming through Game.
Learning Functional Programming through GameReactive Programming
View Slide
@JecelynYeenSoftware ArchitectGoogle Developer Expert- Angular- Web TechnologiesOrganizer- NG-MY 2019- Women Who Code KL
Basic version ofChrome 404 Game
Objective:Think Reactively
We are using RxJS.But doesn’t need to be.
Chart Data Source InfoImperative vs FunctionalWhat’s the difference?
Mindset.
Thinking events asan array / stream.
Start the game:- Press ENTER- Click START
document.querySelector('#btnStart').addEventListener("click", startGame());document.addEventListener("keydown", startGame());
stream.pipe(tap(() => startGame())).subscribe();import { fromEvent, merge } from 'rxjs';import { tap } from 'rxjs/operators';Stream operator helpersRun it!Stream creation helpersCreate a stream withbutton click and keydownChain all operation(s)const stream = merge(fromEvent(btnStart, 'click'),fromEvent(document, 'keydown'));
Start coding!
bit.ly / live-note
Thank you!Follow @JecelynYeenCode:Angular: https://github.com/chybie/rxjs-trexJS: https://stackblitz.com/edit//rxjs-trex-run.stackblitz.io/JS Starter: https://stackblitz.com/edit/rxjs-trex-starterLive demo:https://rxjs-trex.netlify.com/Slides:http://speakerdeck.com/chybie/rxjs-trex