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

Back to the future of JS

Back to the future of JS

This is an extended version of my talk I gave @ NodeJs Meetup in Berlin in July 2018


Willian Martins

July 03, 2018

More Decks by Willian Martins

Other Decks in Technology


  1. Hallo!

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

  3. NodeJs Meetup

  4. @wmsbill What is this?

  5. @wmsbill this in the global scope Browser - window Web

    worker - self NodeJS - module.exports
  6. @wmsbill this inside a function?

  7. @wmsbill this inside a function?

  8. None
  9. @wmsbill How to make this predictable? Reasoning the value of

    this is tricky Function.prototype.bind Arrow function () => {}
  10. With .bind()

  11. With Arrow

  12. @wmsbill Calling a knowing function

  13. @wmsbill Extracting a method from an object

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

  16. @wmsbill Binary syntax

  17. @wmsbill Unary syntax

  18. @wmsbill

  19. @wmsbill

  20. @wmsbill

  21. @wmsbill Bind operator is good for virtual methods But relies

    on this to be bound
  22. @wmsbill Composing without this

  23. @wmsbill

  24. @wmsbill

  25. None
  26. @wmsbill Pipeline operator |> It is a syntax sugar for

    function composition It creates a way to streamline a chain of functions
  27. @wmsbill Pipeline operator |>

  28. @wmsbill

  29. @wmsbill

  30. @wmsbill

  31. @wmsbill Function with more params

  32. @wmsbill Function with more params

  33. @wmsbill Awaiting a function

  34. @wmsbill Awaiting a function

  35. @wmsbill Awaiting a function

  36. @wmsbill Awaiting a function

  37. @wmsbill Awaiting a function

  38. None
  39. @wmsbill Smart pipeline

  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
  41. @wmsbill What about curry?

  42. None
  43. @wmsbill F# pipeline proposal Extends the minimal proposal with an

    await step Await step waits for the resolution of the previous step
  44. @wmsbill F# pipeline proposal

  45. @wmsbill

  46. @wmsbill Partial application f(…) arity = n; partialapp(f(…)) arity =

    m; m < n
  47. @wmsbill

  48. @wmsbill

  49. @wmsbill Partial application in ES Achievable by Function.prototype.bind .bind() binds

    context and parameters
  50. @wmsbill

  51. @wmsbill What about currying? We can achieve partial application with

    curry Curry ≠ Partial application Curry returns arity n-1
  52. @wmsbill

  53. @wmsbill Partial application with arrow function

  54. None
  55. @wmsbill Partial application proposal Creates two new parameters tokens ?

    For single argument . . . for multiple parameters
  56. @wmsbill Partial application syntax

  57. @wmsbill With arbitrary parameter

  58. None
  59. @wmsbill The . . . token Spread the unbound parameters

    Useful when you want to bound first or last parameter
  60. @wmsbill The . . . token

  61. @wmsbill The . . . token

  62. None
  63. @wmsbill Partial application + pipeline

  64. @wmsbill Partial application + pipeline

  65. @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)
  66. @wmsbill Let’s talk about something more solid?

  67. None
  68. @wmsbill [].flatMap syntax

  69. @wmsbill [].flatMap syntax

  70. [].flatMap x [].map

  71. @wmsbill [].flatMap x [].map [].map guarantees the same array size

    based on input [].flatMap doesn’t guarantees same array length as input array It could be used as filtering
  72. @wmsbill [].flatMap as filter

  73. @wmsbill #smooshgate

  74. @wmsbill [].flatten

  75. @wmsbill [].flatten syntax

  76. @wmsbill [].flatten syntax

  77. @wmsbill [].flatten syntax

  78. @wmsbill So what is the deal?

  79. MooTools

  80. @wmsbill #smooshgate MooTools is an 11 years old ancient lib

    They implemented [].flatten with different behavior The implementation + Elements Enhanced HTML component breaks the compatibility w/ [].flatten
  81. https://youtu.be/loqVnZywmvw

  82. @wmsbill TC39 had two options Change flatten to another name

    (like smoosh) Break the internet
  83. Array.prototype.flatten

  84. Array.prototype.flatten

  85. https://medium.com/@wmsbill https://twitter.com/wmsbill wmsbill@gmail.com

  86. Dankeshön!