Functional Programming in JavaScript and React (Part Two)

PART TWO — THE IMPORTANT FACTORS

State integrity is the most important thing in every app.

Did you know: Redux is responsible for managing app-wide state in a React app and provides you with a formal state change-management process?

Reactive Programming

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

Note: Adobe Photoshop has context awareness with its Healing Brush. This means you can drag the brush through an area, and Photoshop calculates optimal blending of adjacent pixels.

My goal is to install more context awareness into you, so you can write bulletproof apps perhaps more frequently.

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

Quick Mention: Check these out below — they are atomic building blocks of logic. You can build the most incredible things I’ve ever seen by simply composing these things together as if we were in some deformed Math class using ideas instead of numbers.

const function = () => {}const object = {}const array = []

State

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

Special Tips: You will be off to a great start if you try to always return something from your functions. Don’t modify things outside the function unless you need to; simply return them out of the function for the next point in time.

Start to finish, wait that sounds like executing a Function.

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 }
Dinosaurs beginning to respond poorly to change

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

Streams

Do you know what else can flow through channels?

Data.

Pass-by-Reference & Garbage Collection

Fig ?.? — Live reference

A Quick Test: Go try right now to modify your co-worker’s coffee and let me know if they are ok with it or if they have some kind of meltdown. Sometimes it’s ok. Sometimes it’s not. That is literally the best description I’ve ever heard for combining all these concepts. I don’t even care if you like it. I laugh at my own jokes.

Functional Programming

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

Fig 5.1 — Function Composition
f(g(x))
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

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,
}
}
const Component = (config) => {
const { onEvent, text, css } = config
return (
<button onClick={onEvent} style={css}>
{text}
</button>
)
}

JSX

“What’s interesting, though, is that rendering to the DOM is not part of the core React library, instead being provided by react-dom.

import { render } from 'react-dom'

Even though React was built for the DOM first, and still gets most of its usage in that environment, this model allows React to target wildly different environments simply by introducing new renderers.

JSX isn’t just about virtual DOM — it’s about virtual whatever.”

Recommended Next Steps

--

--

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.