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!

Spaghetti Code oh noes!

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

Let's break functional ideas into human speak.

Text

Feels like an elite society

So much jargon...

Monads
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?

It's about side effects...(avoiding them)

Pure functions avoid side effects

A Functional method is "Pure"

Pure vs Impure functions

Pure functions have the following attributes.

the only observable output is the return value.
the only output dependency is the arguments.
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) => {
    Database.addUser(user);
    userCount + 1;
    NotifyComponent.createToast(`User ${user.name} added!`);
};

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

// Dom updates

runAnotherChange();

// Dom updates

someAnimation();

// Dom updates

browserResize();

// Dom updates

runDomChangeCode();

runAnotherChange();

someAnimation();

browserResize();

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

React.render();

// Dom is updated all at once