Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programmation Fonctionnelle | Jug SummerCamp

Programmation Fonctionnelle | Jug SummerCamp

Philippe CHARRIERE

September 16, 2016
Tweet

More Decks by Philippe CHARRIERE

Other Decks in Programming

Transcript

  1. PROGRAMMATION FONCTIONNELLE EN
    JAVASCRIPT ❤
    Speaker : Philippe Charrière -
    1
    ! @k33g
    @k33g_org
    !
    @GitHub

    View full-size slide

  2. #JSC2016 ! @k33g ! @k33g_org
    Pourquoi ce
    talk?

    View full-size slide

  3. #JSC2016 ! @k33g ! @k33g_org

    View full-size slide

  4. #JSC2016 ! @k33g ! @k33g_org
    http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html

    View full-size slide

  5. #JSC2016 ! @k33g ! @k33g_org
    http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html

    View full-size slide

  6. #JSC2016 ! @k33g ! @k33g_org

    View full-size slide

  7. #JSC2016 ! @k33g ! @k33g_org
    Sondage

    View full-size slide

  8. #JSC2016 ! @k33g ! @k33g_org
    - combien de dev fonctionnels dans la salle?
    - qui fait du Scala?
    - du Erlang ou Haskell?
    - du Java?
    - du JavaScript?
    - autre?

    View full-size slide

  9. #JSC2016 ! @k33g ! @k33g_org
    W.I.P.
    > vocabulaire(s) fonctionnel(s)
    > implémentations incomplètes
    > échanges de points de vue:
    https:/
    /github.com/k33g/stools/issues
    Vous n’êtes pas obligés d’être d’accord

    View full-size slide

  10. #JSC2016 ! @k33g ! @k33g_org
    0
    25
    50
    75
    100
    Before AOer
    FP Knowledge Checks
    W.I.P.

    View full-size slide

  11. #JSC2016 ! @k33g ! @k33g_org
    Programmation
    fonctionnelle❓

    View full-size slide

  12. #JSC2016 ! @k33g ! @k33g_org
    Définition
    > paradigme -> function ==
    > façon de coder (mindset)
    > buzz
    > rendre son code safe
    développeurs fonctionnels

    View full-size slide

  13. #JSC2016 ! @k33g ! @k33g_org
    Pourquoi en JS❓

    View full-size slide

  14. #JSC2016 ! @k33g ! @k33g_org

    View full-size slide

  15. #JSC2016 ! @k33g ! @k33g_org
    Nous allons voir
    > Rapidement: quelques “key points”
    > Container
    > Functor
    > Monad
    > Maybe
    > Either
    > Validation ⚠

    View full-size slide

  16. #JSC2016 ! @k33g ! @k33g_org
    Key points

    View full-size slide

  17. #JSC2016 ! @k33g ! @k33g_org
    Key points
    > imperative vs functional
    > pure function
    > function as input & output
    > no iteration
    > (im)mutability
    ⚠ES2015

    View full-size slide

  18. #JSC2016 ! @k33g ! @k33g_org
    samples
    samples/000-func-vs-imp.js
    samples/001-pure-func.js
    samples/002-func-as-input-output.js
    samples/003-no-iterations.js
    samples/004-mutability.js
    samples/005-immutability.js

    View full-size slide

  19. #JSC2016 ! @k33g ! @k33g_org
    Containers

    View full-size slide

  20. #JSC2016 ! @k33g ! @k33g_org

    View full-size slide

  21. #JSC2016 ! @k33g ! @k33g_org
    class Container {

    constructor(x) {

    const value = x;

    Object.defineProperty(this, "value", { get: () => value })

    }


    static of(x) {

    return new Container(x);

    }


    }
    let bob = Container.of('Bob Morane')
    bob.value == 'Bob Morane'

    View full-size slide

  22. #JSC2016 ! @k33g ! @k33g_org
    Functor

    View full-size slide

  23. #JSC2016 ! @k33g ! @k33g_org
    opération

    View full-size slide

  24. #JSC2016 ! @k33g ! @k33g_org
    nouvelle
    valeur
    reste dans
    le bocal

    View full-size slide

  25. #JSC2016 ! @k33g ! @k33g_org
    immutabilité

    View full-size slide

  26. #JSC2016 ! @k33g ! @k33g_org
    nouvelle
    valeur

    View full-size slide

  27. #JSC2016 ! @k33g ! @k33g_org
    … dans un
    container

    View full-size slide

  28. #JSC2016 ! @k33g ! @k33g_org
    class Functor extends Container {

    constructor(x) {

    super(x);

    }


    static of(x) {

    return new Functor(x);

    }

    /*

    A map function: used for chaining operations on Container

    */

    map (fn) {

    //return Functor.of(fn(this.value));

    return new this.constructor(fn(this.value));

    }

    }
    applique fn(x) à value
    nouveau Functor

    View full-size slide

  29. #JSC2016 ! @k33g ! @k33g_org
    map(function)
    I’m a
    Functor!

    View full-size slide

  30. #JSC2016 ! @k33g ! @k33g_org
    samples
    samples/020-functor.js

    View full-size slide

  31. #JSC2016 ! @k33g ! @k33g_org
    Monad

    View full-size slide

  32. #JSC2016 ! @k33g ! @k33g_org
    map(function)

    View full-size slide

  33. #JSC2016 ! @k33g ! @k33g_org
    functor
    map(function)
    Et là …

    View full-size slide

  34. #JSC2016 ! @k33g ! @k33g_org
    samples
    samples/021-functor-of-functor.js

    View full-size slide

  35. #JSC2016 ! @k33g ! @k33g_org
    “aplatir”
    bind() <-‘attacher’

    View full-size slide

  36. #JSC2016 ! @k33g ! @k33g_org
    class Monad extends Functor {

    constructor(x) {

    super(x);

    }


    static of(x) {

    return new Monad(x);

    }

    /*

    map (fn) {

    return Monad.of(fn(this.value));

    }

    */


    /* So, I'm a monad because I have a bind method */

    bind (fn) {

    return fn(this.value);

    }

    }

    View full-size slide

  37. #JSC2016 ! @k33g ! @k33g_org
    samples
    samples/030-monad.js

    View full-size slide

  38. #JSC2016 ! @k33g ! @k33g_org
    map(function)
    I’m a
    Monad!
    bind(function)

    View full-size slide

  39. #JSC2016 ! @k33g ! @k33g_org
    Maybe

    View full-size slide

  40. #JSC2016 ! @k33g ! @k33g_org
    Pain points
    I’m Null!
    I’m
    Undefined!

    View full-size slide

  41. #JSC2016 ! @k33g ! @k33g_org
    Maybe
    None Some

    View full-size slide

  42. #JSC2016 ! @k33g ! @k33g_org
    class Maybe {


    static Some(x) { return new Some(x); }


    static None() { return new None(); }


    static fromNullable(x) {

    return (x !== null && x !== undefined)

    ? Maybe.Some(x)

    : Maybe.None();

    }


    static of(x) { return Maybe.Some(x); }

    }

    View full-size slide

  43. #JSC2016 ! @k33g ! @k33g_org
    class None extends Monad {

    constructor() { super(null) }

    // overrides Functor.map

    map() { return this; }

    // overrides Monad.map

    bind (fn) { return this.value; }


    getOrElse(value) {

    return value;

    }


    isNone() {

    return true;

    }

    isSome() {

    return false;

    }


    }

    View full-size slide

  44. #JSC2016 ! @k33g ! @k33g_org
    class Some extends Monad {

    constructor(x) { super(x); }

    // overrides Functor.map

    map(fn) { // ⚠ ⚠ ⚠ 

    let res = fn(this.value);

    if(res == null || res == undefined) {

    return new None()

    }

    return new Some(res);

    }


    getOrElse() { return this.value; }


    isNone() { return false; }

    isSome() { return true;}

    }

    View full-size slide

  45. #JSC2016 ! @k33g ! @k33g_org
    Maybe.fromNullable(42)
    // -> == Some(42)

    Maybe.fromNullable(null)
    // -> == None()


    Maybe.fromNullable(42).getOrElse(“Quarante-deux")
    // -> == 42

    Maybe.fromNullable(null).getOrElse(“Quarante-deux")
    // -> == “Quarante-deux”

    View full-size slide

  46. #JSC2016 ! @k33g ! @k33g_org
    samples
    samples/041-maybe.js
    samples/042-maybe.js

    View full-size slide

  47. #JSC2016 ! @k33g ! @k33g_org
    map(function)
    I’m a
    Maybe!
    J’ai 2 sous types
    None
    Some
    bind(function)

    View full-size slide

  48. #JSC2016 ! @k33g ! @k33g_org
    Either

    View full-size slide

  49. #JSC2016 ! @k33g ! @k33g_org
    let githubCli = new GitHubClient({

    baseUri: "http://github.at.home/api/v3",

    token:process.env.TOKEN_GHE_27_K33G

    })


    githubCli.fetchUserRepositories({handle:”k33g"})
    .then(repositories => {

    console.log(" :", repositories);

    }).catch(error => {

    console.log(" ", error.message, error);

    })


    githubCli.fetchOrganizationRepositories({organization:"AC ME”})
    .then(repositories => {

    console.log(" :", repositories);

    }).catch(error => {

    console.log(" ", error.message, error);

    })

    View full-size slide

  50. #JSC2016 ! @k33g ! @k33g_org
    HttpException { Error: HttpException
    at HttpException (/Users/k33g/dev.js/stools/samples/GitHubClient.js:
    8:5)
    at fetch.then.response (/Users/k33g/dev.js/stools/samples/
    GitHubClient.js:41:15)
    at process._tickCallback (internal/process/next_tick.js:103:7)
    status: 404,
    statusText: 'Not Found',
    url: 'http://github.at.home/api/v3/orgs/AC ME/repos' }
    : [ { id: 40,
    name: 'cuckoo',
    full_name: 'k33g/cuckoo',

    View full-size slide

  51. #JSC2016 ! @k33g ! @k33g_org
    Either
    Left Right

    View full-size slide

  52. #JSC2016 ! @k33g ! @k33g_org
    class Either {


    static Left(x) { return new Left(x); }


    static Right(x) { return new Right(x); }



    static fromNullable(x) {

    return (x !== null && x !== undefined)

    ? Either.Right(x)

    : Either.Left();

    }



    static of(x) { return Either.Right(x); }

    }

    View full-size slide

  53. #JSC2016 ! @k33g ! @k33g_org
    class Left extends Functor {
    constructor(err) {

    super(err)

    }


    map() { return this; }


    getOrElse(value) {return value; }



    isRight() { return false; }

    isLeft() { return true; }


    cata(leftFn, rightFn) { return leftFn(this.value); }

    }
    ou Monad

    View full-size slide

  54. #JSC2016 ! @k33g ! @k33g_org
    class Right extends Functor {

    constructor(x) {

    super(x);

    }


    map(fn) { return new Right(fn(this.value)); }


    getOrElse() { return this.value; }


    isRight() { return true; }

    isLeft() { return false; }


    cata(leftFn, rightFn) { return rightFn(this.value); }

    }

    View full-size slide

  55. #JSC2016 ! @k33g ! @k33g_org
    samples
    samples/051-either.js
    samples/052-either.js

    View full-size slide

  56. #JSC2016 ! @k33g ! @k33g_org
    I’m an
    Either!
    J’ai 2 sous types
    Left
    Right cata(
    left function,
    right function
    )
    bind(function)
    map(function)
    ou pas

    View full-size slide

  57. #JSC2016 ! @k33g ! @k33g_org
    Mais on ne trace pas
    toutes les erreurs

    View full-size slide

  58. #JSC2016 ! @k33g ! @k33g_org
    Validation

    View full-size slide

  59. #JSC2016 ! @k33g ! @k33g_org
    Validation
    FailSuccess

    View full-size slide

  60. #JSC2016 ! @k33g ! @k33g_org
    class Validation {


    static Success(x) { return new Success(x); }


    static Fail(errList) { return new Fail(errList); }


    static of(x) { return Validation.Success(x); }

    }
    subtilité

    View full-size slide

  61. #JSC2016 ! @k33g ! @k33g_org
    class Success extends Monad {

    constructor(x) {

    super(x);

    }


    isSuccess() { return true; }


    isFail() { return false; }


    ap(otherContainer) {

    return otherContainer instanceof Fail

    ? otherContainer

    : otherContainer.map(this.value)

    }


    cata(failureFn, successFn) { return successFn(this.value); }

    }

    View full-size slide

  62. #JSC2016 ! @k33g ! @k33g_org
    class Fail extends Monad {

    constructor(err) {

    super(err)

    }

    // override

    map() { return this; }


    isSuccess() { return false; }

    isFail() { return true; }


    ap(otherContainer) {

    return otherContainer instanceof Fail

    ? new Fail(this.value.concat(otherContainer.value))

    : this

    }


    cata(failureFn, successFn) { return failureFn(this.value); }


    }
    subtilité

    View full-size slide

  63. #JSC2016 ! @k33g ! @k33g_org
    Validation.Success(40).cata(

    error => {console.log(" ", error)},

    success => {

    console.log(" ", success)

    }

    )


    Validation.Fail("Oups I did it again!").cata(

    error => {console.log(" ", error)},

    success => {

    console.log(" ", success)

    }

    )

    View full-size slide

  64. #JSC2016 ! @k33g ! @k33g_org
    samples
    samples/061-validation.js
    samples/062-validation.js

    View full-size slide

  65. #JSC2016 ! @k33g ! @k33g_org
    I’m a
    Validation!
    J’ai 2 sous types
    Fail
    Success cata(
    failureFn function,
    successFn function
    )
    ap(validation)
    map(function)

    View full-size slide

  66. #JSC2016 ! @k33g ! @k33g_org

    View full-size slide

  67. #JSC2016 ! @k33g ! @k33g_org
    Paysage
    Fonctionnel côté JS

    View full-size slide

  68. #JSC2016 ! @k33g ! @k33g_org
    Quelques libs
    > Monet.js: https:/
    /cwmyers.github.io/monet.js/
    > Ramda.js: http:/
    /ramdajs.com/0.21.0/index.html
    > Underscore: http:/
    /underscorejs.org/
    > Lodash: https:/
    /lodash.com/
    > Folktale: http:/
    /folktalejs.org/
    > Fantasy Land: https:/
    /github.com/fantasyland

    View full-size slide

  69. #JSC2016 ! @k33g ! @k33g_org
    Ressources

    View full-size slide

  70. #JSC2016 ! @k33g ! @k33g_org
    Lectures
    Mostly Adequate Guide (Brian Lonsdorf): https:/
    /www.gitbook.com/book/drboolean/mostly-adequate-guide/
    details
    Functional Programming in Java (Pierre-Yves Saumont): https:/
    /www.manning.com/books/functional-
    programming-in-java
    Functional Programming in JavaScript (Luis Atencio): https:/
    /www.manning.com/books/functional-
    programming-in-javascript
    Functional Programming in Scala (Paul Chiusano and Rúnar Bjarnason): https:/
    /www.manning.com/books/
    functional-programming-in-scala
    Le code source de Golo:
    https:/
    /github.com/eclipse/golo-lang/blob/master/src/main/golo/errors.golo
    https:/
    /github.com/eclipse/golo-lang/blob/master/src/main/java/gololang/error/Result.java
    Les monades en PHP: http:/
    /mcamuzat.github.io/blog/2015/11/11/les-monades-en-php-cest-possible-dot/
    THE MARVELLOUSLY MYSTERIOUS JAVASCRIPT MAYBE MONAD: http:/
    /jrsinclair.com/articles/2016/
    marvellously-mysterious-javascript-maybe-monad/
    \

    View full-size slide

  71. #JSC2016 ! @k33g ! @k33g_org
    Talks
    Gérer les erreurs avec l'aide du système de types de Scala !
    (David Sferruzza):
    https:/
    /www.youtube.com/watch?v=TwJQKrZ23Vs
    TDD, comme dans Type-Directed Development
    (Clément Delafargue):
    https:/
    /www.youtube.com/watch?v=XhcgCF0xXRs

    View full-size slide

  72. #JSC2016 ! @k33g ! @k33g_org
    Remerciements

    View full-size slide

  73. #JSC2016 ! @k33g ! @k33g_org
    Merci
    > à vous
    > Loïc Descotte @loic_d
    > Julien Ponge @jponge
    > Yannick Loiseau @yannick_loiseau
    > Thierry Chantier @titimoby
    > Etienne Issartial | CommitStrip
    > Clément Delafargue @clementd
    > @JugSummerCamp

    View full-size slide

  74. #JSC2016 ! @k33g ! @k33g_org
    Questions
    https:/
    /github.com/k33g/stools/issues
    https://github.com/k33g/stools

    View full-size slide