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

Aloha!

https://github.com/tc39/proposals

Pattern Matching Pipeline Operator Binary AST And some opinions Agenda

@wmsbill Conditionals in JS If/else statement Switch statement Ternary expression

@wmsbill If/else statement

@wmsbill Switch Statement

@wmsbill

@wmsbill Ternary expressions

@wmsbill

@wmsbill If Statement Switch  Statement Destructuring

@wmsbill

@wmsbill Toy example List of shapes   {size, color, type}
Log all circles, red squares and big blue triangles

@wmsbill Toy example

@wmsbill

@wmsbill Pattern Matching

@wmsbill Case Statement

@wmsbill When clause

@wmsbill Match pattern

@wmsbill Match Guard

@wmsbill Match all

@wmsbill Not everything is a nail

@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

@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

@wmsbill Let’s cook

@wmsbill Without intermediary vars

@wmsbill Using lodash

@wmsbill Using Rambda

@wmsbill Or even VanillaJS®

@wmsbill

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

@wmsbill Pipeline operator |>

@wmsbill Function with extra params

@wmsbill Handling async functions

@wmsbill Smart Pipeline proposal

@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

@wmsbill Handling currying

@wmsbill F# Pipeline Proposal Extends the minimal proposal with an
await step Await step waits for the resolution of the previous step

@wmsbill F# Pipeline Proposal

@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

@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

@wmsbill JS cold start Ship less JS 150kb of Compressed
JS is different of 150 kb of image Lazy load your JS

@wmsbill Start-up phase: Download, Parse, Compilation Runtime phase: Run, Optimization/
Deoptimization, Bailing out. Tear down phase: Garbage collection JS “lifecycle” steps

@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

@wmsbill

@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

@wmsbill

@wmsbill Early Prototype created on SpyderMonkey Using a grammar based
on SM internal AST format Facebook static newsfeed as a benchmark The PoC

@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

@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

@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://medium.com/@wmsbill https://twitter.com/wmsbill [email protected]

Mahalo!

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

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

More Decks by Willian Martins

Other Decks in Technology

Featured

Transcript