Tweet
Tweet

Slide 1

Slide 1 text

meet.js summit / 19.03.2016 @miciek Building Snake using Streams Michał Płachta

Slide 2

Slide 2 text

meet.js summit / 19.03.2016 @miciek Streams? ● application logic ● data transformations ● unbounded collections ● no time ● declarative

Slide 3

Slide 3 text

meet.js summit / 19.03.2016 @miciek What you will learn? how frontend web app written in streams looks like

Slide 4

Slide 4 text

meet.js summit / 19.03.2016 @miciek Meet Snake & Fruit Snake Fruit

Slide 5

Slide 5 text

meet.js summit / 19.03.2016 @miciek Our First Stream: “Ticks” stream

Slide 6

Slide 6 text

meet.js summit / 19.03.2016 @miciek “Directions” stream

Slide 7

Slide 7 text

meet.js summit / 19.03.2016 @miciek “Snake’s Head Positions” stream

Slide 8

Slide 8 text

meet.js summit / 19.03.2016 @miciek Stream operators: map & scan stream.map(f) ● transforms values from stream using function f ● returns a new stream with transformed values stream.scan(init, f) ● accumulates values from stream using function f ○ f(acc,val) => new_acc ● returns a new stream that outputs accumulator on each new value

Slide 9

Slide 9 text

meet.js summit / 19.03.2016 @miciek Once again: the code

Slide 10

Slide 10 text

meet.js summit / 19.03.2016 @miciek Displaying values from the stream

Slide 11

Slide 11 text

meet.js summit / 19.03.2016 @miciek Streams are reusable

Slide 12

Slide 12 text

meet.js summit / 19.03.2016 @miciek Streams & Operators are lazy No elements = I don’t do anything

Slide 13

Slide 13 text

meet.js summit / 19.03.2016 @miciek “Key presses” stream

Slide 14

Slide 14 text

meet.js summit / 19.03.2016 @miciek “Left Key Presses” stream

Slide 15

Slide 15 text

meet.js summit / 19.03.2016 @miciek “Right Key Presses” stream

Slide 16

Slide 16 text

meet.js summit / 19.03.2016 @miciek Stream operators: filter stream.filter(p) ● checks each value from stream against the predicate passed as p ● returns a new stream that outputs only values that satisfy condition p Already used: ● map(f) ● scan(init, f(acc, val))

Slide 17

Slide 17 text

meet.js summit / 19.03.2016 @miciek “Left Rotations” stream

Slide 18

Slide 18 text

meet.js summit / 19.03.2016 @miciek “Right Rotations” stream

Slide 19

Slide 19 text

meet.js summit / 19.03.2016 @miciek “Actions” stream

Slide 20

Slide 20 text

meet.js summit / 19.03.2016 @miciek Stream operators: merge stream.merge(stream2) ● stream is merged with stream2 ● returns a new stream that outputs values from both stream and stream2 as they appear Already used: ● map(f) ● scan(init, f(acc, val)) ● filter(p)

Slide 21

Slide 21 text

meet.js summit / 19.03.2016 @miciek Recap: Current “Directions” stream

Slide 22

Slide 22 text

meet.js summit / 19.03.2016 @miciek “Directions” stream based on user input

Slide 23

Slide 23 text

meet.js summit / 19.03.2016 @miciek “Directions” stream: Better, but no timing! vs

Slide 24

Slide 24 text

meet.js summit / 19.03.2016 @miciek Stream operators: sampledBy stream.sampledBy(stream2) ● last value from stream is taken when any value appears in stream2 ● returns a new stream that outputs values from stream sampled by values from stream2 Already used: ● map(f) ● scan(init, f(acc, val)) ● filter(p) ● merge(stream2)

Slide 25

Slide 25 text

meet.js summit / 19.03.2016 @miciek “Directions” stream: user input & timing

Slide 26

Slide 26 text

meet.js summit / 19.03.2016 @miciek “Snake Head Positions”: no change needed

Slide 27

Slide 27 text

meet.js summit / 19.03.2016 @miciek User moves the snake: the code

Slide 28

Slide 28 text

meet.js summit / 19.03.2016 @miciek Current implementation 10 streams ● “ticks” ● “key presses” ● “left key presses” ● “right key presses” ● “left rotations” ● “right rotations” ● “actions” ● “direction changes” ● “directions” ● “snake head positions” + map, scan, filter, merge & sampledBy

Slide 29

Slide 29 text

meet.js summit / 19.03.2016 @miciek Stream operators: slidingWindow stream.slidingWindow(n) ● aggregate last n values ● returns a new stream that outputs arrays of last n values from the stream ● can be implemented using scan Already used: ● map(f) ● scan(init, f(acc, val)) ● filter(p) ● merge(stream2) ● sampledBy(stream2)

Slide 30

Slide 30 text

meet.js summit / 19.03.2016 @miciek “Snakes” stream

Slide 31

Slide 31 text

meet.js summit / 19.03.2016 @miciek Quiz: Eating a fruit? 6 operators ● map(f) ● scan(init, f(acc, val)) ● filter(p) ● merge(stream2) ● sampledBy(stream2) ● slidingWindow(n) WHICH STREAMS AND OPERATORS SHOULD WE REUSE TO IMPLEMENT “EATING A FRUIT” FUNCTIONALITY? 11 streams ● “ticks” ● “key presses” ● “left key presses” ● “right key presses” ● “left rotations” ● “right rotations” ● “actions” ● “direction changes” ● “directions” ● “snake head positions” ● “snakes”

Slide 32

Slide 32 text

meet.js summit / 19.03.2016 @miciek “Fruit eaten events” stream

Slide 33

Slide 33 text

meet.js summit / 19.03.2016 @miciek Demo Time!

Slide 34

Slide 34 text

KSUG / Kraków / 29.02.2016 @miciek Architecture: 11 streams, 2 ins & 2 outs

Slide 35

Slide 35 text

meet.js summit / 19.03.2016 @miciek Links github.com/miciek/web-snake-react-bacon Client Side Code rxmarbles.com/ Play with streams and operators! baconjs.github.io/ BaconJS - streams in JavaScript krakow.meetjs.pl/160112/ - Snake Live Coding talk And for the brave ones: github.com/miciek/snake-multiplayer-akka-streams Server Side Code

Slide 36

Slide 36 text

meet.js summit / 19.03.2016 @miciek One more thing... Streams (Bacon.js, RxJS) + Virtual DOM (React.js) + Types (TypeScript, Flow) = Sane Frontend Programming

Slide 37

Slide 37 text

meet.js summit / 19.03.2016 @miciek One more thing... Streams + Virtual DOM + Types = Elm .

Slide 38

Slide 38 text

meet.js summit / 19.03.2016 @miciek Building Snake using Streams Michał Płachta www.michalplachta.com THANK YOU!