taming the beast: functional javascript for sane applicationstaming the beast: functional javascript...
TRANSCRIPT
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
