Taming the Beast: Functional Javascript for Sane Applications Dave Bouwman | Software Engineer | ArcGIS Hub & ArcGIS Enterprise Sites About Me
~21+ yrs as a developer 15 yrs consultant 6 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. wingsofahero/3308105238 Led me to… Led me to…
Functional Programming S tyle of Programming Alonzo Church
1930’s Lambda Calculus Alonzo Church Haskell Curry
Combinatory Logic Alonzo Church Haskell Curry
System of “computability” Alonzo Church Haskell Curry
“math functions” Alonzo Church Haskell Curry
“transform values” Alonzo Church Haskell Curry
“pure functions” Robust Maintainable Software Many Languages LISP Haskell Erlang Scala Elm OCaml ML
Pure Functional Java C# Javascript
FP Capable 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. LISP Haskell Erlang Scala Elm OCaml ML
Pure Functional 24258698@N04/37656086 Let’s talk about js apps
Functional style reduces these risks
With functions… import {just, whatya, need} from “some-lib”
(Arc GIS -REST-JS is designed around this)
wingsofahero/3308105238 Webpack & Rollup will only include those functions (and anything they call)
wingsofahero/3308105238 juan-alogico/10935384913 Functional Programming is core to React & Angular
wingsofahero/3308105238 24258698@N04/37656086 Class Guidelines
Avoid Inheritance Class Guidelines
Except UI Frameworks (React/Angular) Class Guidelines
Use Composition Class Guidelines
Factory Functions vs “new” Key Ideas:
Pure Functions Immutable Data Referential Transparency Many Small Functions Higher Order Functions
wingsofahero/3308105238 Pure Function
Output depends only on arguments. Ze ro s id e -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 c omp le x func tions 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 c omp os e func tions 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
Example Application Example Application 40s on Mobile https://nocotrails.surge.sh github.com/dbouwman/trail-status-react
wingsofahero/3308105238 Filters
Area
Trails & Status
500ms to first paint 8s to fully loaded NavBar.jsx
Area.jsx
Trail.jsx
App.jsx
500ms to first paint 8s to fully loaded getData(state)
• Query Feature Services • Comb ine Re s ults • Extract Attributes Hash • Normalize Field Names • Dedupe Segments • Group by Area • Sort by Area and Trail Name • Render
wingsofahero/3308105238 Let’s look at the data… Different field name
nesting
Null means Closed Implementation options…
Compose Small Functions
wingsofahero/3308105238 Promise Chain makes it obvious Generic composition is better
Merge the responses…
Remove nesting Of Attributes
getProp(path, obj, def)
wingsofahero/3308105238
Remove nesting Of Attributes
partial(fn, arg)
wingsofahero/3308105238
Normalize Schema
maybeAdd(key, val, target)
wingsofahero/3308105238
Dedupe Records
Scrub Rows
Group into Areas
Sorty McSortFace Sort Areas by group Sort the Entries by name
DONE!
wingsofahero/3308105238 Trade-offs
wingsofahero/3308105238 Piping creates intermediate arrays
Items processed once into final array
Jumping in! Start with Array.map/re duc e /filte r combined with pure functions Bring in more he lp e rs …
getProp setProp cloneObject Bring in lib ra rie s
• So You Want to be a Functional Programmer (medium posts by Charles Scalfani) • Functional-Light Javascript (book by Kyle Simpson – also on github)
• Professor Frisby’s Mostly Adequate Guide to Functional Programming (gitbook) • Composing Software book by Eric Elliot – also on medium) Key Ideas:
Pure Functions Immutable Data Referential Transparency Many Small Functions Higher Order Functions
wingsofahero/3308105238 Thanks!
[email protected] github.com/dbouwman/trail-status-react