Skip to content

FP & ES: beginning with functional style programming in ES2015

Notifications You must be signed in to change notification settings

azder/es-funx-basic

Repository files navigation

Front-End Skopje Meetup Logo

FP & ES

beginning with functional style programming in ES2015

Goran Peoski (@azder)





What's this about

  • practice, not theory
  • how to get accustomed to FP
  • what worked for me and might work for you

In the beginning



was the keyword


and the keyword was with problem


and problem was the keyword


GOTO


no more GOTO


The structured way


The ( lil' bit mo') Functional way


Why bother?

  • separation of concerns
  • helps debugging and testing
  • easier to focus (subproblems and big picture)

How-To

Videos

Languages

Meetups


Learn about Libraries


Identify Symptoms

  • Custom names:

    • let nextAreaStartsAt = 0;
  • Looping patterns:

    • while(id = fragmentIds[++index]){
  • Glue code:

    • .then( people => _.map(people, f) )
  • Side effects

    • Object.freeze()

Then Separate concerns

  • discover hidden inputs
  • separate mutation from calculation
  • combine calculations into pipeline, then do the mutation

Pure Functions

  • testable
  • portable
  • memoizable
  • paralelizable

All Functions

  • nouns, not verbs

  • collection of pairs: { (x1,y1), (x2, y2), ... }

    • y = f(x)
    • one result per variable combination
  • point-free style


Utilities

  • functions for operations

    • prop('b',a) instead of a.b
  • map(fn,obj)

    • just calls .map on an object (container)
  • curry(fn,...args)

  • binds (fixates) and returns new function, until...

  • when all arguments are provided, executes

  • compose(f1,f2,f3,...fn)

  • creates new function

  • point-free style


Demo

in new tab | source code
<iframe src="demo/index.html" width="720px" height="320px" ></iframe>

The End

Thanks for sticking around until the very end :)

???

  • objectify, stringify

  • prop

  • for replaced by map

  • composition (lcomp, rcomp)

  • curry

  • operators as functions

  • functions that return undefined

    • console.log vs tap,
    • Array.push
  • functions that take arguments in weird order

    • lodash.map(collection, [iteratee=_.identity])
    • jQuery().map( callback ) w/ callback( index, domElement )
    • jQuery.map( array, callback ) w/ callback( elementOfArray, indexInArray )
    • underscore.pick(object,[props])
  • start small (only business logic)

  • abstract new keyword away

  • in fact, most keywords and operators should be functions

  • functors and monads - Array as a functor/monad

  • Functor Laws

    • identity

      map(id) === id        
      
    • composition

      compose(map(f),map(g)) === map(compose(f,g))
      

About

FP & ES: beginning with functional style programming in ES2015

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published