2-763.pptx

What’s New in JavaScript for Fast and Scalable Apps

1.0x

2-763.pptx

Created 2 years ago

Duration 0:00:00
lesson view count 1281
What’s New in JavaScript for Fast and Scalable Apps
Select the file type you wish to download
Slide Content
  1. Brian Terlson (@bterlson)

    Slide 1 - Brian Terlson (@bterlson)

    • Program Manager
    • Microsoft
    • What’s New in JavaScript for Fast and Scalable Apps
    • 2-763
    • //build/ content is being presented by Microsoft Office Mix The video for this session will be available shortly
  2. NOTE: This talk was presented without PowerPoint slides. This deck is a rough approximation of the content presented.

    Slide 2 - NOTE: This talk was presented without PowerPoint slides. This deck is a rough approximation of the content presented.

  3. ECMAScript 6: State of the Union

    Slide 3 - 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
  4. ES6  ES2015

    Slide 4 - 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
  5. ECMAScript6

    Slide 5 - ECMAScript6

    • Library Builders
    • map, set & weakmap
    • __proto__
    • Proxies
    • Symbols
    • Sub-classable built-ins
    • Scalable Apps
    • let, const & block- scoped bindings
    • Classes
    • Promises
    • Iterators
    • Generators
    • Typed arrays
    • Modules
    • Syntactic Sugar
    • Arrow functions
    • Enhanced object literals
    • Template strings
    • Destructuring
    • Rest, Spread, Default
    • String, Math, Number, Object, RegExp APIs
    • Behind a config flag: Generators, Default parameters, RegExp /y /u flag
    • https://status.modern.ie/
  6. Highest Score Among Browsers: ES6 Compat Table

    Slide 6 - 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
  7. ES6+Async Programming=AWESOMENESS

    Slide 7 - ES6+Async Programming=AWESOMENESS

  8. New Function Syntax:

    Slide 8 - New Function Syntax:

    • Terse
    • Always anonymous
    • Lexical this, arguments, and super
    • Arrow Functions
  9. let arr = [1, 2, 3];

    Slide 9 - let arr = [1, 2, 3];

    • let sum = arr
    • .map(x => x * 2)
    • .reduce((sum, x) => sum + x);
    • log(sum); // ==> 12
    • Arrow Functions – Example
  10. Object that represents a future value

    Slide 10 - 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
  11. // producer creates a promise, resolves when ready

    Slide 11 - // producer creates a promise, resolves when ready

    • function timeout(ms) {
    • return new Promise(resolve => {
    • setTimeout(resolve, ms);
    • });
    • }
    • log("start");
    • // consumer gets a promise, is notified when resolved
    • let p = timeout(1000);
    • p.then(() => log("end"));
    • Promises – Example
  12. Now part of the platform

    Slide 12 - 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
  13. interface IIterable {

    Slide 13 - 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
  14. let arr = ['a', 'b', 'c'];

    Slide 14 - 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
  15. Returns multiple values

    Slide 15 - 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
  16. spawn(function*() {

    Slide 16 - 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
  17. JavaScript Futures:Progress in Project Spartan

    Slide 17 - JavaScript Futures:Progress in Project Spartan

  18. An optimizable, low-level subset of JavaScript

    Slide 18 - 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
  19. Hardware instructionsthat carry outmultiple calculationswith a singleinstruction

    Slide 19 - 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
  20. Spartan supports advanced async programming patterns

    Slide 20 - 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