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

1930’s Alonzo Church Haskell Curry

Combinatory 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 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