Skip to content

Latest commit

 

History

History
239 lines (153 loc) · 5.18 KB

README.md

File metadata and controls

239 lines (153 loc) · 5.18 KB
Raw
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))