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

February 07, 2019

More Decks by Willian Martins

Other Decks in Technology


  1. Aloha!

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

  3. Pattern Matching Pipeline Operator Binary AST And some opinions Agenda

  4. None
  5. @wmsbill Conditionals in JS If/else statement Switch statement Ternary expression

  6. @wmsbill If/else statement

  7. @wmsbill If/else statement

  8. @wmsbill Switch Statement

  9. @wmsbill

  10. @wmsbill Ternary expressions

  11. @wmsbill

  12. @wmsbill If Statement Switch
 Statement Destructuring

  13. @wmsbill

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

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

  16. @wmsbill

  17. @wmsbill Pattern Matching

  18. @wmsbill Case Statement

  19. @wmsbill When clause

  20. @wmsbill Match pattern

  21. @wmsbill Match Guard

  22. @wmsbill Match all

  23. @wmsbill Not everything is a nail

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

    an expression I wish it could be landed in JS as an expression as well Can be achieved using do expression proposal. Pattern matching as a statement
  25. @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
  26. @wmsbill Let’s cook

  27. @wmsbill Without intermediary vars

  28. @wmsbill Using lodash

  29. @wmsbill Using Rambda

  30. @wmsbill Or even VanillaJS®

  31. @wmsbill

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

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

  34. @wmsbill Pipeline operator |>

  35. @wmsbill Pipeline operator |>

  36. @wmsbill Pipeline operator |>

  37. @wmsbill Function with extra params

  38. @wmsbill Handling async functions

  39. @wmsbill Handling async functions

  40. @wmsbill Handling async functions

  41. @wmsbill Handling async functions

  42. @wmsbill Handling async functions

  43. @wmsbill Handling async functions

  44. @wmsbill Handling async functions

  45. @wmsbill Smart Pipeline proposal

  46. @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
  47. @wmsbill Handling currying

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

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

  50. @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
  51. @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
  52. @wmsbill JS cold start Ship less JS 150kb of Compressed

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

    Deoptimization, Bailing out. Tear down phase: Garbage collection JS “lifecycle” steps
  59. @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
  60. @wmsbill

  61. @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
  62. @wmsbill

  63. @wmsbill

  64. @wmsbill

  65. @wmsbill

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

    on SM internal AST format Facebook static newsfeed as a benchmark The PoC
  67. @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
  68. @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
  69. @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

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

  71. Mahalo!