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


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

People are finally hearing about functional again


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

Let's break functional ideas into human speak.


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.

  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) {
// Impure Functions
function square(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?
// 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;
    NotifyComponent.createToast(`User ${} 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


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:


= a click event (for example)

Dom manipulation vs React Rendering


// Dom updates


// Dom updates


// Dom updates


// Dom updates




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


// Dom is updated all at once

What about Redux?

A look at Elm


Start with the basics

Functional Reactive Programming for Beginners

By Colby Williams

Functional Reactive Programming for Beginners

Making sense of Functional Programming by eliminating the jargon, describing the benefits, and showing how use it and begin understanding it today.

  • 9,029