taming the beast: functional javascript for sane applicationstaming the beast: functional javascript...

Dave Bouwman | Software Engineer | ArcGIS Hub & ArcGIS Enterprise Sites

Taming the Beast: Functional Javascript for Sane Applications

wingsofahero/3308105238

About Me

~21+ yrs as a developer15 yrs consultant6 yrs @ ArcGIS Hub

wingsofahero/3308105238

As a consultant…

wingsofahero/3308105238

At Esri… shipping products…

wingsofahero/3308105238

Optimize for maintenance and flexibility

wingsofahero/3308105238

Also, complexity is a thing.

Led me to…

FunctionalProgramming

Led me to…

StyleProgrammingof

1930’s Lambda Calculus

Alonzo Church

Combinatory Logic

Haskell CurryAlonzo Church

System of “computability”

Haskell CurryAlonzo Church

“math functions”

Haskell CurryAlonzo Church

“transform values”

Haskell CurryAlonzo Church

“pure functions”

Haskell CurryAlonzo Church

RobustMaintainable

Software

Many Languages

Pure Functional

LISPHaskellErlangScalaElm

OCamlML

FP Capable

JavaC#

Javascript

Why the Interest now?

Why the interest now?

“wide computers”

pure functions parallelize

List of 1,000,000 things…

output = things.map(pureFn)

Runs across all cores*

Across a whole cluster.

Pure Functional

LISPHaskellErlangScalaElm

OCamlML

24258698@N04/37656086

Let’s talk about js apps

Functional style reduces these risks

wingsofahero/3308105238

With functions…

import {just, whatya, need} from “some-lib”

(ArcGIS-REST-JS is designed around this)

wingsofahero/3308105238

Webpack & Rollup willonly include those functions

(and anything they call)

juan-alogico/10935384913

wingsofahero/3308105238

Functional Programmingis core to React & Angular

24258698@N04/37656086

Avoid Inheritance

Class Guidelines

Except UI Frameworks (React/Angular)

Class Guidelines

Use Composition

Class Guidelines

Factory Functions vs “new”

Class Guidelines

wingsofahero/3308105238

Key Ideas:

Pure FunctionsImmutable Data

Referential TransparencyMany Small Functions

Higher Order Functions

Pure Function

Output depends only on arguments.Zero side -effects

let z = 10;const add = (a,b) => a + b;add(5,3); // 8

Immutable Data

Mutation of shared data is a side -effect.

Return a clone with the changes applied.

Now your function is pure.

Referential Transparency

Program operates the same way if you replace a function call with it’s return value.

let length = add(5,3); let length = 8;

Many Small Functions

We compose many smaller, generic, highly tested functions into larger

more complex functions

Higher Order Functions

Functions that accept or return functions.

const addN = (n) => (x) => add(n, x);const addfive = addN(5);

addfive(10) // 15[1,2,3].map(addFive) // [6,7,8]

Higher Order Functions

Allow us to compose functions

const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);

doThings = pipe(fn1, fn2, fn3);doThings(someInputs);

Functional 101

“What not how”

We should skip the null…

.reduce(...) is the power move

ExampleApplication

ExampleApplication

40s on Mobile

wingsofahero/3308105238

https://nocotrails.surge.sh

github.com/dbouwman/trail-status-react

Filters

Area

Trails & Status

500ms to first paint8s to fully loaded

NavBar.jsx

Area.jsx

Trail.jsx

App.jsx

500ms to first paint8s to fully loaded

wingsofahero/3308105238

• Query Feature Services• Combine Results• Extract Attributes Hash• Normalize Field Names• Dedupe Segments• Group by Area• Sort by Area and Trail Name• Render

getData(state)

Let’s look at the data…

Different fieldname

nesting

Null meansClosed

Implementation options…

wingsofahero/3308105238

Compose Small Functions

Promise Chain makes it obvious

Generic composition is better

Merge the responses…

Remove nestingOf Attributes

wingsofahero/3308105238

getProp(path, obj, def)

Remove nestingOf Attributes

wingsofahero/3308105238

partial(fn, arg)

NormalizeSchema

wingsofahero/3308105238

maybeAdd(key, val, target)

DedupeRecords

ScrubRows

Group intoAreas

SortyMcSortFace

Sort Areas by groupSort the Entries by name

wingsofahero/3308105238

DONE!

wingsofahero/3308105238

Trade-offs

Piping creates intermediate arrays

Items processed once into final array

Jumping in!

Start with Array.map/reduce/filtercombined with pure functions

Bring in more helpers…

getPropsetProp

cloneObject

Bring in libraries

• Professor Frisby’s Mostly Adequate Guide to Functional Programming (gitbook)

• Composing Software book by Eric Elliot – also on medium)

• So You Want to be a Functional Programmer (medium posts by Charles Scalfani)

• Functional-Light Javascript (book by Kyle Simpson – also on github)

wingsofahero/3308105238

Key Ideas:

Pure FunctionsImmutable Data

Referential TransparencyMany Small Functions

Higher Order Functions

dbouwman@esri.comgithub.com/dbouwman/trail-status-react

Thanks!