Less Frustration, More Readable Code: Functional Programming in JavaScript with RamdaJS

Transcript

1. NATE TAYLOR Developer | Conference Speaker Less Frustration, More Readable

   Code: Functional Programming with RamdaJS

2. © 2017 NATE TAYLOR @taylonr taylonr.com let candyBars = [milkyWay,

   hersheys, snickers]; let regularSize = []; candyBars.forEach(function(c){ c.versions.forEach(function(v) { if(v.size === 'regular’){ regularSize.push({name: c.name, versions: [v]}); } }); }); Have You Seen This Code?

3. RamdaJS © 2017 NATE TAYLOR @taylonr taylonr.com

4. A practical functional library for JavaScript programmers. © 2017 NATE

   TAYLOR @taylonr taylonr.com What is Ramda?

5. Overarching Goals © 2017 NATE TAYLOR @taylonr taylonr.com Immutable

6. An object whose state cannot change after being created ©

   2017 NATE TAYLOR @taylonr taylonr.com Immutable

7. C a n d y b a r s !

   © 2017 NATE TAYLOR @taylonr taylonr.com

8. © 2017 NATE TAYLOR @taylonr taylonr.com Don’t Lick My Candy

   Bar The Big Idea

9. Overarching Goals © 2017 NATE TAYLOR @taylonr taylonr.com Immutable Currying

10. The process of transforming a function that takes multiple arguments

    into a function that takes just a single argument and returns another function if any arguments are still needed. © 2017 NATE TAYLOR @taylonr taylonr.com Currying

11. C a n d y b a r s !

    © 2017 NATE TAYLOR @taylonr taylonr.com

12. © 2017 NATE TAYLOR @taylonr taylonr.com contains('peanuts’, candy) containsPeanuts =

    contains('peanuts'); containsPeanuts(candy); Currying

13. © 2017 NATE TAYLOR @taylonr taylonr.com Define Once, Use Everywhere

    The Big Idea

14. Overarching Goals © 2017 NATE TAYLOR @taylonr taylonr.com Immutable Currying

    Composition

15. The act of pipelining the result of one function, to

    the input of another, creating an entirely new function. © 2017 NATE TAYLOR @taylonr taylonr.com Function Composition

16. C a n d y b a r s !

    © 2017 NATE TAYLOR @taylonr taylonr.com

17. © 2017 NATE TAYLOR @taylonr taylonr.com const getMultipiecePeanutCandy = (candy)

    => { const multiPiece = eliminateSinglePieces(candy); return eliminateNonPeanuts(multiPiece); } Function Composition

18. © 2017 NATE TAYLOR @taylonr taylonr.com const getMultipieceCandy = (candy)

    => eliminatePeanuts(eliminateSinglePieces(candy)); Function Composition

19. © 2017 NATE TAYLOR @taylonr taylonr.com Increase Readability The Big

    Idea

20. S a m p l e R a m d

    a F u n c t i o n s © 2017 NATE TAYLOR @taylonr taylonr.com

21. Using Multiple Functions © 2017 NATE TAYLOR @taylonr taylonr.com const

    arr = ['Milky Way', 'Twix', 'Snickers’, ‘3 Musketeers', 'm&ms']; const containsCandy = (candy) => { contains(candy, take(2, sortBy(toLower, arr))); } containsCandy('Milky Way'); //false

22. Using Multiple Functions © 2017 NATE TAYLOR @taylonr taylonr.com const

    arr = ['Milky Way', 'Twix', 'Snickers’, ‘3 Musketeers', 'm&ms']; const containsCandy = (candy) => { contains(candy, take(2, sortBy(toLower, arr))); } containsCandy('Milky Way'); //false

23. Pipe © 2017 NATE TAYLOR @taylonr taylonr.com const containsCandy =

    (candy) => { let arr = ['Milky Way', 'Twix', 'Snickers’, '3 Musketeers', 'm&ms']; return pipe( sortBy(toLower), take(2), contains(candy) )(arr) } containsCandy('Milky Way'); //false

24. List Functions © 2017 NATE TAYLOR @taylonr taylonr.com

25. all | any | none © 2017 NATE TAYLOR @taylonr

    taylonr.com R.all(_ => _ % 2 == 0, [1, 2, 3, 4]) //false R.any(_ => _ % 2 == 0, [1, 2, 3, 4]) //true R.none(_ => _ % 2 == 0, [1, 2, 3, 4]) //false

26. zip © 2017 NATE TAYLOR @taylonr taylonr.com zip([1, 2, 3],

    ['a', 'b', 'c']); //=> [[1, 'a'], [2, 'b'], [3, 'c']]

27. Combining Together © 2017 NATE TAYLOR @taylonr taylonr.com var csvHeaders

    = ['accountName', 'assetName', 'quantity’]; var firstRow = ['accountName', 'assetName', 'quantity']; var createObj = x => {return {csv: x[0], val: x[1]};}; var csvMatchesValue = x => x.csv === x.val; var isHeader = R.pipe( R.zip(csvHeaders), R.map(createObj), R.all(csvMatchesValue) ); isHeader(firstRow)

28. Object Functions © 2017 NATE TAYLOR @taylonr taylonr.com

29. path | pathOr © 2017 NATE TAYLOR @taylonr taylonr.com let

    milkyWay = { name: 'Milky Way’, nutrition: { fat: 10 } }; R.path(['nutrition', 'fat’]); //10 R.path(['nutrition', 'sodium’]); //undefined R.pathOr('0%', ['nutrition', 'vitamins', 'A’]); //0%

30. pick © 2017 NATE TAYLOR @taylonr taylonr.com let milkyWay =

    { name: 'Milky Way', calories: 210, funSize: false, nutrition: { fat: 10, carbohydrate: 41, protein: 2.3 } }; R.pick(['name', 'calories'], milkyWay); //{name: 'Milky Way', calories: 210}

31. Other Categories © 2017 NATE TAYLOR @taylonr taylonr.com Logic Math

    String Relation

32. Why Use Ramda? © 2017 NATE TAYLOR @taylonr taylonr.com

33. Any fool can write code that a computer can understand.

    Good programmers write code that humans can understand. © 2017 NATE TAYLOR @taylonr taylonr.com -- Martin Fowler

34. © 2017 NATE TAYLOR @taylonr taylonr.com var buyACandyBar = (me,

    cashier) => { pipe( driveToStore(), findAllCandyBars(), eliminateKingSize(), eliminatePeanuts(), takeOne(), pay(cashier) )(me); }; Readable Code

35. How Do I Get Started? © 2017 NATE TAYLOR @taylonr

    taylonr.com Start With Lists Eliminate For Loops Think Small Think Transformation

36. NATE TAYLOR @taylonr| taylonr@gmail.com THANK YOU