Cédric Soulas
I make motion graphics with RxJS. I code apps with JavaScript and Elm. I will be available for freelance work from mid-April 2018. Get in touch!

Ep. 17 Ep. 19 Newsletter Watch all Source on Github

Episode 18 - How to solve the countdown challenge Monday, 15 Jan.

Two weeks ago, I showed you the interval card and challenged you to create a countdown to celebrate the new year.

Read Episode 16 - Interval

We begin with ❚ interval and set period of 1000 milliseconds. It creates a stream that emits incremental numbers, periodically. Remember: this card will emit 0 only 1000 ms after the stream has started.

We would like to create a countdown from 5 to 0 that:

Choosing the cards

Constraint 1: having a finite number of event values

❚ interval never stops emitting event values. But we only need the first ones. “We only need X” guides you to the filtering category. Then, “the first ones” helps finding the appropriate filtering card: ❚ take.

Constraint 2: reversing the progression of values

Instead of a 0 1 2 3 4 5 stream, we are looking for 5 4 3 2 1 0. We need to transform each value: 0 into 5, 1 into 4, etc. “We need to transform each value” guides you to the transformation category and the card ❚ map.

Constraint 3: starting immediately with 5

The first value is emitted only 1000ms after the stream has started. Naturally, the ❚ startWith card comes to our mind when we need to “start immediatelly with a value”.

Constraint 4: completing immediately after 0

This constraint means the stream should emit the ◉ complete notification immediately after the end value of the countdown (learn more about “completion” in Episode 9). It turns out that ❚ take (we picked for contraint 1) does exactly that after having filtered the first N event values.

Setting the arguments

We now have picked 3 cards: ❚ take, ❚ map and ❚ startWith. As we learned in Episode 3, we can put cards one after another, in a chain. Each card in this chain operates on the stream generated by the previous card. In which order do you put the cards? There are 6 chains possible:

In the case of this challenge, any of this chain could work! But you have to choose the right arguments in each scenario.

Can you write six solutions using only ❚ take, ❚ map and ❚ startWith?

Solutions

With the chain 3) interval ⇢ map ⇢ take ⇢ startWith, you have to set those arguments:

More generally, here are the six chains with the proper arguments (replace count with 5 to get a countdown from 5 to 0):

Obviously, one could argue that some of those solutions are inelegant. Which one do you prefer?

PS. There are even more solutions to this challenge. But we need to see new categories and new cards before. I’ll update this article over the course of 2018 as we learn new things!

Ep. 17 Ep. 19 Newsletter Watch all Source on Github

reactive.how list of animated cards

Learn Reactive Programming

Focus on one new concept – every Monday

Occasional updates, plus:

Cédric Soulas
I make motion graphics with RxJS. I code apps with JavaScript and Elm. I will be available for freelance work from mid-April 2018.