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

https://github.com/tc39/proposals

0 - Strawman 1 - Proposal 2 - Draft 3
- Candidate 4 - Finished https://tc39.github.io/process-document/ 1 - Proposal

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 Hum… I’m starting to like it.

@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

@wmsbill Do you like it?

@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://github.com/tc39/proposal-pattern-matching/pull/140/files

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

bedankt!

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

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

More Decks by Willian Martins

Other Decks in Technology

Featured

Transcript