Library Builders map, set & weakmap __proto__ Proxies Symbols Sub-classable built-ins Scalable Apps...
-
Upload
trevor-melton -
Category
Documents
-
view
218 -
download
3
Transcript of Library Builders map, set & weakmap __proto__ Proxies Symbols Sub-classable built-ins Scalable Apps...
Brian Terlson (@bterlson)Program ManagerMicrosoft
What’s New in JavaScript for Fast and Scalable Apps
2-763
NOTE: This talk was presented without PowerPoint slides. This deck is a rough approximation of the content presented.
• ECMAScript 6: State of the Union• Advanced Async Programming Patterns• Arrow Functions• Promises• Iterators• Generators
• JavaScript Futures: Near Native Performance• Asm.js• SIMD
Today's Agenda
• ES6 ES2015• Final Draft completed• Largest Update in
JavaScript's History• Moving to train model• Future updates will be much
smaller
• Test262 Coverage In Progress• You can help!
https://github.com/tc39/test262
ES6 Status
ECMAScript6
Library Builders
map, set & weakmap__proto__Proxies
SymbolsSub-classable built-ins
Scalable Apps
let, const & block- scoped bindings
ClassesPromisesIterators
GeneratorsTyped arrays
Modules
Syntactic Sugar
Arrow functionsEnhanced object literals
Template stringsDestructuring
Rest, Spread, DefaultString, Math, Number, Object, RegExp APIs
Behind a config flag: Generators, Default parameters, RegExp /y /u flaghttps://status.modern.ie/
• Highest Score Among Browsers: ES6 Compat Table
• Interoperability-driven Standards Development• Spartan delivers without breaking the web or needlessly differing from
other browsers
• Embrace the Future• ASM.js can be turned on via about:flags. SIMD in development.
Project Spartan <3 ES6
http://aka.ms/ES6CompatChart
ES6+
Async Programming=
AWESOMENESS
New Function Syntax:• Terse• Always anonymous• Lexical this, arguments, and super
Arrow Functions
let arr = [1, 2, 3];let sum = arr .map(x => x * 2) .reduce((sum, x) => sum + x);
log(sum); // ==> 12
Arrow Functions – Example
• Object that represents a future value• Has one of three states: pending, fulfilled,
or rejected• Immutable once fulfilled or rejected• Producer returns a promise which it can
later fulfill or reject• Consumers listen for state changes
with .then and .catch methods
Promises
// producer creates a promise, resolves when readyfunction timeout(ms) { return new Promise(resolve => { setTimeout(resolve, ms); });}
log("start");
// consumer gets a promise, is notified when resolvedlet p = timeout(1000);p.then(() => log("end"));
Promises – Example
• Now part of the platform• Interoperable with existing promise libraries• DOM APIs now free to return promises• Expect better tooling and performance from
browser vendors
Promises
interface IIterable { [Symbol.iterator](): IIterator}
interface IIterator { next(): IIteratorResult, throw()?: IIteratorResult, return()?: IIteratorResult}
interface IIteratorResult { value: T, done: boolean}
Iterators• Consumers pull multiple values from a
producer• Three Interfaces: Iterable, Iterator, and
IteratorResult• Many new language features accept
iterables:• for-of loop• spread operator• Array.from• Map & Set constructors
• Many new language features produce iterables:• Array.prototype.values• Map.prototype.keys• Map.prototype.values• Map.prototype.entries• Set.prototype.values
let arr = ['a', 'b', 'c'];for(let item of arr) { log(item) }
let map = new Map();map.set(1, 'a');map.set(2, 'b');for(let pair of map) { log(pair) }for(let key of map.keys()) { log(key) }for(let value of map.values()) { log(value) }
Using Iterators – Example
• Returns multiple values• Generator functions are iterable• Generator functions return iterators when
called• Make implementing iterators much nicer• With Promises, make async code much
nicer
Generators
spawn(function*() { log(1); yield timeout(1000); // returns promise log(2);
return "Done!";}).then(v => log(v)) // logs "Done!"
// note: spawn available as a standalone library called// taskjs. Also available in many promise libraries.
Generators for Async – Example
JavaScript Futures:Progress in Project Spartan
• An optimizable, low-level subset of JavaScript• Not suitable for hand writing but as a
compiler target• Compiled ahead-of-time, no JIT, no bailouts
=== more predictable performance• More aggressive optimizations ===
performance wins in compile-to-JS scenarios• DEMO
asm.js – the assembly language for the web
• Hardware instructionsthat carry outmultiple calculationswith a singleinstruction
• Works on vectors: same operation is applied to all elements of a vector at once. Examples: • Operations on RGB/A pixels, XYZW coordinates• Arbitrary length arrays where each element is processed in a similar
way• Useful for games, 3D graphics, audio/video processing, cryptography,
etc.
SIMD – Single Instruction, Multiple Data
Ax
Bx
Cx
Dx
Ay
By
Cy
Dy
Az
Bz
Cz
Dz
Scalar Operation
Ax
Bx
Cx
Dx
Ay
By
Cy
Dy
Az
Bz
Cz
Dz
SIMD Operation of vector length 4
• Spartan supports advanced async programming patterns• Arrow Functions• Promises• Iterators• Generators
• Most ES6 features• Brings near native performance to the web
platform• Asm.js (available now)• SIMD (available soon)
The Future of JavaScript Development is Here
© 2015 Microsoft Corporation. All rights reserved.