by @doppioslash

@lambdacat

(the original)

# What is Reactive Programming

### Typical problem that can benefit from RP:

You need to change <something>,

or multiple somethings

when

a button is pressed/

a variable changed/

an event happens/

etc

- Listener

- Observer

- Callback

- ...

## How to do that?

Many names for the same underlying concept

## Problems

1. Unpredictable order

2. Missed first event

3. Callbacks pyramids

5. Leaking Callbacks

6. Accidental Recursion

(depends on listener ordering)

(initialisation order problem)

### A matter of perspective...

imperative perspective : explicit ordering

reactive perspective : explicit dependencies

### What is Reactive Programming

imperative perspective : sequence

reactive perspective : dependency

### Signals (aka Cells, Events, Behaviour)

• a different way of thinking about variables
• an explicit model of variable mutation in time

### What is Reactive Programming

1.  init, build the graph
2. run data through the graph

## Running

### What is Reactive Programming

1. Unpredictable order

2. Missed first event

3. Callbacks pyramids

5. Leaking Callbacks

6. Accidental Recursion

# To Functional Reactive Programming

### To Functional Reactive Programming

• compositionality
• immutability guarantees
• inherently parallelisable

## What breaks Referential Transparency?

• I/O
• throw any exceptions handled outside of the function
• reading the value of any mutable external variable

• mutate any externally visible state
• keeping state around between invocations of the function

## What breaks Referential Transparency?

Basically no Side Effects allowed:

• must not influenced by anything outside the function
• only effect on the outside is the return value

# Compositionality

The property that the meaning of an expression is determined by the meanings of its parts and the rules used to combine them.

# Compositionality

Being able to compose functions:

```add : Int -> Int
add n1 = n1 + 2

mult : Int -> Int
mult n1 = n1 * 2

composedFunction =
> composedFunction 4
12 : number```

Let's try again...

# What is Elm

### Purely Functional

(Referential Transparency & Immutability)

# Practical Elm + Examples

## Type signatures

`add : Int -> Int`

Is the signature of a function that takes an Integer and returns an Integer.

`add : Int -> Int -> Int`

Is the signature of a function that takes two Integers and returns an Integer.

## Currying

If you partially apply a function, by giving it less arguments than it takes, it will return a function that takes the remaining args:

```add : Int -> Int -> Int
```
```add n1 n2 = n1 + n2

​<function> : Int -> Int
11 : number```

## Main function

The main function is the entry point of program execution, so you need one, or your code won't run.

It is wired to one or more Signals that drive the whole application.

# A fold from the past

(Similar to Map, a Fold reduces, say, a List to one value, by applying a function to the entries)

## Signal state

### Practical Elm + Examples

( Update function )

( default value )

(inputs Signal)

### makes a signal that depends on the past values of a signal

(next program state signal)

## define the Model:

```type Tile
= Door Size
| Column
| BackGround BackGroundTile

## gets rid of NULL errors

```type Maybe a
= Just a
| Nothing```

## Pattern Matching

```case maybeVar of
Just a ->
a
Nothing ->
"default value"
```

## "Elm Architecture"

### How to structure programs

```Action

Model

init : (Model, Effects Action)

update : Action ->
Model ->
(Model, Effects Action)

Model ->
Html
```

(Union Type)

### How to structure programs

(often a Record (similar to js object))

Update generates the next state of the program by

pattern matching on Actions

using a Model defined

using Union Types and Records

View renders that next state

# Way to Elm

### Getting used to the Functional Programming way of doing things:

• currying
• destructuring
• pattern matching
• expressive types
• no loops, rather mapping and folding

• only mutate indirectly in fold (by returning value)

### Getting used to FRP way of doing things:

• most variables are signals
• no direct control flow
• define the graph
• type system + TEA makes things converge

@doppioslash

@doppioslash