Functional Programming in JavaScript and React (Part Two)

PART TWO — THE IMPORTANT FACTORS

State integrity is the most important thing in every app.

  1. An app can be viewed as an Object, at a moment in time when observed
  2. An app probably requires state
  3. An app can respond to any event we specify
  4. An app can initiate or facilitate any action

Reactive Programming

It’s a matter of describing ancestors first so that children make sense. We need the context awareness.

Function as an Object (FaaO)

const executable = () => {
executable.hello = 'world'
return executable
}
// LOOK AT IT
console.log(executable)
// => { [Function] hello: 'world' }
// EXECUTE IT
console.log(executable())
// => { [Function] hello: 'world' }
const function = () => {}const object = {}const array = []

Encapsulation

Sole Responsibility

Top 3 Symbols

  1. State
  2. Actions
  3. Events

State

  • memory
  • knowledge of current moment

I would go as far as to say that state is the single most important aspect of every app.

  1. Immutability
  2. One-way flow

Scary Stuff

Fig ?.? — Arrive alive

Actions

If you want to perform an action, you probably want to execute a function.

Events

const birthdayParty = {
startTime: 5,
endTime: undefined,
}
const birthdayParty = {
startTime: 5,
endTime: undefined,
location: { ...address },
}
const driveToLocation = async (location) => {
return handleDriveCar(location)
}
driveToLocation(birthdayParty)
.then(badExperience => forEveryone(badExperience))
birthdayParty.location = { ...differentAddress }
  1. Shared mutable state existed
  2. Asynchronous behavior existed
  3. A mutation action occurred in parallel with another action
  1. Event emitters and observers
  2. Semaphores
  3. Callbacks (continuation-passing style)
  1. State
  2. State changes
Dinosaurs beginning to respond poorly to change

Radical Quote: An app’s response to change is the most important factor towards maintaining state integrity.

  • Traveling one way is good
  • Traveling downhill at the most efficient pace without pooping our pants is good

Streams

Do you know what else can flow through channels?

Data.

  • Security concerns
  • Data loss
  • Bugs

Where & When

Formal Change Process

Network Calls

Concurrency

Pass-by-Reference & Garbage Collection

Pass-By-Reference

Fig ?.? — Live reference

Garbage Collection

Functional Programming

  • before actions or events
  • during actions or events
  • after actions or events

3 Phases of a Function

  1. Detection and Collection Phase
  2. Packaging Phase
  3. Delivering Phase
  • Power: Ability to complete a large body of work quickly
  • Torque: Ability to quickly start or stop work
  • Short term memory: Knowledge of context and working parameters
  • Long term memory: May be used alongside work or memory

Continuation-Passing Style (CPS)

Monad

  • Pure functions
  • Side effects
  • Referential transparency
  • Immutability

Pure Functions

Side Effects

Immutability

A series of inter-dependent functions is a chain of functions.

Composition

  • f of x
  • g of x
  • f composed with g of x
Fig 5.1 — Function Composition
f(g(x))
  1. execute g(x)
  2. then, take the result of that
  3. then, pass that into f()

When writing functionally, you:

  1. declare how your program should respond to various inputs (ie: define what actions the functions do),
  2. declare configuration settings that define what those inputs are (ie: define state at moments in time),
  3. declare when to trigger these functions (ie: define the events your program reacts to).
const person = {
firstName: 'Suzy',
lastName: 'Kawasaki',
}
const config = {
host: '127.0.0.1',
port: 1337,
user: person,
}
const connectToDB = (config) => {
const connection = getDriver(config.host, config.port)
return connection
}

Functional + Reactive = Modular Components

The 3 tenants of modular components:

  • self-contained
  • accepts a Config Object
  • external Side Effects are officially managed
  1. single source of truth store/repository for standalone components
  2. pull packages into any project via NPM or equivalent

Self Contained

Config Objects

const config = {
one: 'value',
two: { complexData },
three: () => functions()
}
const Component = (config) => {
if (!config) throw new Error('Because reasons.')
// config can be used as desired
const { one, two, three } = config
return {
one,
two,
three,
}
}

External Side Effects

const Component = (config) => {
const { onEvent, text, css } = config
return (
<button onClick={onEvent} style={css}>
{text}
</button>
)
}

JSX

import { render } from 'react-dom'

Recommended Next Steps

LET THESE PEOPLE KNOW

--

--

--

I prefer to work near ES6+, node.js, microservices, Neo4j, React, React Native; I compose functions and avoid classes unless private state is desired.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Mackintosh

Adam Mackintosh

I prefer to work near ES6+, node.js, microservices, Neo4j, React, React Native; I compose functions and avoid classes unless private state is desired.

More from Medium

A Quick Tip to Write Readable React Code

Redux — A birds-eye view

A coding environment

Is React used in 2022?