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.