# Functional Reactive Programming for beginners

## Why should you care?

• Easy to test

• Easy to read and reason about

• Avoid confusing problems and errors in code

• Really fun to write

• Da future man!

## Elm Architecture

Unidirectional Data Flow

## Redux Architecture

Single Source of Truth

# Computers weren't always fast

Text

Had to run code imperatively...and eventually OOP was born and took hold.

# People are finally hearing about functional again

Text

React and Redux are bringing functional ideas back to the modern web

Text

# Feels like an elite society

## So much jargon...

• Monoids
• Functors
• Lazy Evaluation
• Currying
• Function Composition
• Pattern Matching
• Map, Fold, Reduce, Merge
• Pure vs Impure
• Polymorphism, homomorphism, monomorphism

### Map, Filter, Reduce etc. are NOT functional programming

These are are "Tools" to help provide pure I/O, avoid side effects, etc.

So what is a functional "language"

Functional languages simply provide tools, frameworks, best practices, etc. to "enforce" functional ideas more strictly.

• Elm / Haskell
• Clojurescript
• Scala
• Lisp
• Om

# So what is functional programming?

## Pure functions avoid side effects

A Functional method is "Pure"

# Pure vs Impure functions

### Pure functions have the following attributes.

1. the only observable output is the return value.
2. the only output dependency is the arguments.
3. arguments are fully determined before any output is generated.

# Pure vs Impure functions

``````// Pure Functions
function square(x) {
return x * x;
}
function squareAll(items) {
return items.map(square);
}``````
``````// Impure Functions
function square(x) {
updateXInDatabase(x);
return x * x;
}
function squareAll(items) {
for (let i = 0; i < items.length; i++) {
items[i] = square(items[i]);
}
}``````

# A non-functional joke!

``````// Instructor: What's 5 plus 2?
numberFive().plus(numberTwo());``````
``// Student: 7?``
``````// Instructor: Correct! What's 5 plus 3?
``````
``// Student: 8?``
``````// Instructor: Wrong! It's 10,
// because we turned 5 into 7, remember?``````

# Lets talk input / output

## Hidden I/O (hidden side effects)

``````const addUser = (user) => {
userCount + 1;
};``````

## Declared I/O

``````// square :: (Number, Number) -> Number
const square = (x, y) => {
return x * y;
};``````

## Declare ALL inputs, AND all outputs

``````// getProgramAt :: (Guide, Channel, Date) -> Program
const getProgramAt(tvGuide, channel, time) {
const schedule = tvGuide.getSchedule(channel);

return schedule.programAt(time);
}``````

## How can this be improved?

``````
const getCurrentProgram(tvGuide, channel) {
const schedule = tvGuide.getSchedule(channel);

return schedule.programAt(new Date());
}``````

# This is pretty close to what FRP is

Text

## What is Reactive Programming?

### Reactive programming is programming with asynchronous data streams.

A stream?

It's an ongoing set of events ordered in time. IE:

time

= a click event (for example)

# Dom manipulation vs React Rendering

``````runDomChangeCode();

runAnotherChange();

someAnimation();

browserResize();

``````runDomChangeCode();

runAnotherChange();

someAnimation();

browserResize();

// All data stored in one object (shadow dom)

React.render();

// Dom is updated all at once``````

Text