Tweet
Tweet

Slide 1

Slide 1 text

Learning Functional Programming through Game Reactive Programming

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Basic version of Chrome 404 Game

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Objective: Think Reactively

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Mindset.

Slide 9

Slide 9 text

Thinking events as an array / stream.

Slide 10

Slide 10 text

Start the game: - Press ENTER - Click START

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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') );

Slide 13

Slide 13 text

Start coding!

Slide 14

Slide 14 text

bit.ly / live-note

Slide 15

Slide 15 text

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