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
What about Redux?
A look at Elm
Text
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,305