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

Back to the future of JS II: Beyond what we can foresee

Back to the future of JS II: Beyond what we can foresee


Willian Martins

June 21, 2019

More Decks by Willian Martins

Other Decks in Technology


  1. Hoi!

  2. " ⚽

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

  4. 0 - Strawman 1 - Proposal 2 - Draft 3

    - Candidate 4 - Finished https://tc39.github.io/process-document/ 1 - Proposal
  5. Pattern Matching Pipeline Operator Binary AST And some opinions Agenda

  6. None
  7. @wmsbill Conditionals in JS If/else statement Switch statement Ternary expression

  8. @wmsbill If/else statement

  9. @wmsbill If/else statement

  10. @wmsbill Switch Statement

  11. @wmsbill

  12. @wmsbill Ternary expressions

  13. @wmsbill

  14. @wmsbill If Statement Switch
 Statement Destructuring

  15. @wmsbill

  16. @wmsbill Toy example List of shapes 
 {size, color, type}

    Log all circles, red squares and big blue triangles
  17. @wmsbill Toy example

  18. @wmsbill

  19. @wmsbill Pattern Matching

  20. @wmsbill Case Statement

  21. @wmsbill When clause

  22. @wmsbill Match pattern

  23. @wmsbill Match Guard

  24. @wmsbill Match all

  25. @wmsbill Hum… I’m starting to like it.

  26. @wmsbill The majority of the languages uses pattern matching as

    an expression PM has changed to expression June 2019 It makes conditional expression powerful in JS Pattern matching is an expression
  27. @wmsbill Do you like it?

  28. @wmsbill Function composition in JS Combining two or more functions

    to create a new function Composing function is a common task in JS nowadays We can achieve it in a bunch of ways
  29. @wmsbill Let’s cook

  30. @wmsbill Without intermediary vars

  31. @wmsbill Using lodash

  32. @wmsbill Using Rambda

  33. @wmsbill Or even VanillaJS®

  34. @wmsbill

  35. @wmsbill Pipeline operator |> It is a syntax sugar for

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

  37. @wmsbill Pipeline operator |>

  38. @wmsbill Pipeline operator |>

  39. @wmsbill Pipeline operator |>

  40. @wmsbill Function with extra params

  41. @wmsbill Handling async functions

  42. @wmsbill Handling async functions

  43. @wmsbill Handling async functions

  44. @wmsbill Handling async functions

  45. @wmsbill Handling async functions

  46. @wmsbill Handling async functions

  47. @wmsbill Handling async functions

  48. @wmsbill Smart Pipeline proposal

  49. @wmsbill Smart Pipeline proposal 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
  50. @wmsbill Handling currying

  51. @wmsbill F# Pipeline Proposal Extends the minimal proposal with an

    await step Await step waits for the resolution of the previous step
  52. @wmsbill F# Pipeline Proposal

  53. @wmsbill Nice addition for creating function composition in a streamlining

    way Minimal proposal has 2 caveats Smart pipeline adds a token F# adds an await step Pipeline operator - summary
  54. @wmsbill F# pipeline is simple and easier to reason about

    The Introduction of # token could be introduced once F# proposal was merged Babel 7.3 has shipped smart pipeline proposal. Pipeline operator - rollout strategy
  55. @wmsbill JS cold start Ship less JS 150kb of Compressed

    JS is different of 150 kb of image Lazy load your JS
  56. None
  57. None
  58. None
  59. None
  60. None
  61. @wmsbill Start-up phase: Download, Parse, Compilation Runtime phase: Run, Optimization/

    Deoptimization, Bailing out. Tear down phase: Garbage collection JS “lifecycle” steps
  62. @wmsbill It is crucial for the application perceived performance. Parsing

    + compilation can take up to 30%* of main thread time 1MB os uncompressed JS can take 1s or more in average Mobile device. The cold start-up problem *Numbers may vary from depending on the js engine
  63. @wmsbill

  64. @wmsbill New over-the-wire format for JS Based on a binary

    encoding of a simplified custom AST. Potentially decrease the cold start-up of large JS applications Browsers that doesn’t support it, still loads a .js file Binary AST
  65. @wmsbill

  66. @wmsbill

  67. @wmsbill

  68. @wmsbill

  69. @wmsbill Early Prototype created on SpyderMonkey Using a grammar based

    on SM internal AST format Facebook static newsfeed as a benchmark The PoC
  70. @wmsbill AST size slightly smaller than JS Create a full

    AST from plain JS took between 500 and 800 ms Time for creating full AST was twice as fast as before The PoC - the results
  71. @wmsbill Plain binary AST is a good perf win Extra

    annotations enables dead code elimination Further enhancements can enable streaming compilation of the binary AST. Looking beyond
  72. @wmsbill Further read https://github.com/tc39/proposal-pattern-matching https://github.com/tc39/proposal-pipeline-operator https://github.com/valtech-nyc/proposal-fsharp-pipelines/blob/master/README.md https://github.com/js-choi/proposal-smart-pipelines/blob/master/readme.md https://medium.com/reloading/javascript-start-up-performance-69200f43b201 https://github.com/tc39/proposal-binary-ast https://github.com/tc39/proposal-pattern-matching/pull/140/files

  73. https://medium.com/@wmsbill https://twitter.com/wmsbill hello@willian.dev

  74. bedankt!