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

Back to the future of JS

Back to the future of JS

Slides form JSConf EU talk.

Willian Martins

June 02, 2018
Tweet

More Decks by Willian Martins

Other Decks in Technology

Transcript

  1. Hallo!

    View Slide

  2. https://github.com/tc39/proposals

    View Slide

  3. View Slide

  4. @wmsbill
    What is this?

    View Slide

  5. @wmsbill
    this in the global scope
    Browser - window
    Web worker - self
    NodeJS - module.exports

    View Slide

  6. @wmsbill
    this inside a function?

    View Slide

  7. @wmsbill
    this inside a function?

    View Slide

  8. View Slide

  9. @wmsbill
    How to make this predictable?
    Reasoning the value of this is tricky
    Function.prototype.bind
    Arrow function () => {}

    View Slide

  10. With .bind()

    View Slide

  11. With Arrow

    View Slide

  12. @wmsbill
    Calling a knowing function

    View Slide

  13. @wmsbill
    Extracting a method from an object

    View Slide

  14. View Slide

  15. @wmsbill
    Two syntaxes
    Unary : :context.method()
    Binary context: :method()

    View Slide

  16. @wmsbill
    Binary syntax

    View Slide

  17. @wmsbill
    Unary syntax

    View Slide

  18. @wmsbill

    View Slide

  19. @wmsbill

    View Slide

  20. @wmsbill

    View Slide

  21. @wmsbill
    Bind operator is good for virtual
    methods
    But relies on this to be bound

    View Slide

  22. @wmsbill
    Composing without this

    View Slide

  23. @wmsbill

    View Slide

  24. @wmsbill

    View Slide

  25. View Slide

  26. @wmsbill
    Pipeline operator |>
    It is a syntax sugar for
    function composition
    It creates a way to streamline
    a chain of functions

    View Slide

  27. @wmsbill
    Pipeline operator |>

    View Slide

  28. @wmsbill

    View Slide

  29. @wmsbill

    View Slide

  30. @wmsbill

    View Slide

  31. @wmsbill
    Function with more params

    View Slide

  32. @wmsbill
    Function with more params

    View Slide

  33. @wmsbill
    Awaiting a function

    View Slide

  34. @wmsbill
    Awaiting a function

    View Slide

  35. @wmsbill
    Awaiting a function

    View Slide

  36. @wmsbill
    Awaiting a function

    View Slide

  37. @wmsbill
    Awaiting a function

    View Slide

  38. View Slide

  39. @wmsbill
    Smart pipeline

    View Slide

  40. @wmsbill
    Smart pipeline
    Two types bare style and topic style
    () or [] are disallowed in bare style
    When () or [] is needed, topic style
    is used
    # token is subject to change

    View Slide

  41. @wmsbill
    What about curry?

    View Slide

  42. @wmsbill
    F# pipeline proposal
    Extends the minimal proposal with
    an await step
    Await step waits for the resolution of
    the previous step

    View Slide

  43. @wmsbill
    F# pipeline proposal

    View Slide

  44. @wmsbill

    View Slide

  45. @wmsbill
    Partial application
    f(…) arity = n;
    partialapp(f(…)) arity = m;
    m < n

    View Slide

  46. @wmsbill

    View Slide

  47. @wmsbill

    View Slide

  48. @wmsbill
    Partial application in ES
    Achievable by
    Function.prototype.bind
    .bind() binds context and
    parameters

    View Slide

  49. @wmsbill

    View Slide

  50. @wmsbill
    What about currying?
    We can achieve partial application
    with curry
    Curry ≠ Partial application
    Curry returns arity n-1

    View Slide

  51. @wmsbill

    View Slide

  52. @wmsbill
    Partial application with arrow
    function

    View Slide

  53. View Slide

  54. @wmsbill
    Partial application proposal
    Creates two new parameters tokens
    ? For single argument
    . . . for multiple parameters

    View Slide

  55. @wmsbill
    Partial application syntax

    View Slide

  56. @wmsbill
    With arbitrary parameter

    View Slide

  57. View Slide

  58. @wmsbill
    The . . . token
    Spread the unbound parameters
    Useful when you want to bound first
    or last parameter

    View Slide

  59. @wmsbill
    The . . . token

    View Slide

  60. @wmsbill
    The . . . token

    View Slide

  61. View Slide

  62. @wmsbill
    Partial application + pipeline

    View Slide

  63. @wmsbill
    Partial application + pipeline

    View Slide

  64. @wmsbill
    Should I use all of it in production?
    These proposal are in very early
    stage
    The adoption of one, may change
    the syntax/semantics of other
    Not production ready (yet)

    View Slide

  65. https://medium.com/@wmsbill
    https://twitter.com/wmsbill
    [email protected]

    View Slide

  66. Dankeshön!

    View Slide