Next Generation JS

Arpad Borsos

https://slides.com/swatinem/nextgen

Who am I?

• Graduated the FH Technikum 3 years ago
• Wrote my Masters Thesis about Type Inference in JS
   
• A Mozilla fanboy and volunteer (you can find me at the Mozilla booth here)
• Developing in JS for my day job
• Developing JS itself for fun :-)
  (contributed some ES6 features to SpiderMonkey)
   
• Open Source Enthusiast; ArchLinux user
  (still have windows on my gaming machine though -_-)

About this Presentation

• Go follow along: https://slides.com/swatinem/nextgen
• I’ll show a lot of live code examples (DevTools; Transpilers)
   
• You should know JS and programming languages in general!

ECMAScript Version 6

• JS is everywhere
  maybe its even the most used language out there?
• But it is inconvenient at times, and completely sucks for a certain class of problems
   
• The need for change is there
• But the change has to be backwards compatible. It must not “break the web”

ES6 has:

• New Syntax to make it more convenient
• A lot of new things in the standard library, to actually make it useful as a language.

Can I Use?

• https://kangax.github.io/compat-table/es6/
• Major browsers are quite far along,
  Surprisingly, Edge (the new IE) is leading here
• No luck when you are using Safari / iOS :-(
  (lets hear a collective boooooo for Apple)

But: Transpilers & Polyfills

• Transpilers are Source-to-Source Compilers (Syntax)
• Take ES6 Code (or proposed ES7 features, or JSX)
  and compile it to ES5, that even crappy Safari can run
• Example: http://babeljs.io/ or https://github.com/google/traceur-compiler or others
  (I’ll show babel live)
   
• Polyfills provide all the new standard library features and types for older platforms (std lib)

Lets get down to business

• New standard library features:
  • Symbol
  • Iterators
  • {Weak,}{Map,Set}
  • Promises
  • Generators
  • Proxies
• New Syntax

We got a new primitive type
Symbol \o/

• A Symbol is a new Primitive, like number or string
• But: A Symbol is unique
• Use case: To create object properties that are guaranteed to never even clash
• They can be abused to define private properties
• They are introspectable (reflectable? is there such a word?) via Object.getOwnPropertySymbols
• They work well with a new syntax feature (computed properties)
   
• We have a few Well-Known Symbols

Iterators

• JS finally gets a unified Iterator protocol!
   
• An Iterator is basically an object with a .next() method
• .next() returns an object with value and done (bool)
   
• An Iterable is an object that has an Symbol.iterator method that returns an Iterator
   
• Iterators have a lot of syntax support:
  New loop syntax, destructuring, spread, generators

{Weak,}{Map,Set}

• Finally!
   
• A true Map and Set, with O(1) access
  You could have polyfilled this easily, but in O(n)
   
• What’s this Weak{Map,Set}?
   
• They provide Iterators for their contents, and work well with the new iteration syntax

Promises

• High Level:
  It’s a container for a value that might be available sometime in the future;
• An async Value, if you will
• Can return a value, or throw (async)
   
• .then(resolved, rejected)
• chainable!

Generators

• Functions that can be “paused” and “resumed”
• Functions that “return” (yield) more than once
• They actually create an Iterator
   
• Remember the .next() method?
• You can actually pass values into a generator
  .next(fooBar)
• There is also .throw(err)
   
• Examples!
   
• Bonus: You can abuse generators for async programming
  BUT: We have async/await coming

Proxies

• Proxies wrap normal Objects
• You can observe *and override* every interaction with that object or function
• has, get, set, apply, construct, enumerate, ... and a lot more

new Utilities

• Array.from() as the new [].slice.call()
  (but with a map built in)
• Object.assign() as the new *insert your "extend" library here*
• Array.prototype.find{Index,}

New Syntax!

• new variable bindings
• new for loop
• destructuring
• object literals
• arrow functions
• better function arguments: defaults, rest
• spread
• template strings
• modules! \o/
• classes

let / const

• "let is the new var"
• Block scoped bindings
• A fresh binding for every loop iteration

for-of

• for (var i = …) is boilerplate, still iterates over indices
• for (var k in …) iterates over *string* keys (also for arrays)
   
• for (let val of iterable) is the new hot shit!
• iterates over values (more precisely, over iterables)
• combine it with let bindings!

Destructuring

• let [x, y] = point;
• let {foo, bar} = options;
   
• also with defaults, rest, and renaming:
• let [x = 10, y = 20, ...rest] = iterable;
• let {prop: local = default1(), a = default2} = obj;
• ( shorthand defaults require more invasive parser changes :-( )
   
• (that’s my contribution to SpiderMonkey)
  </self-praise>

Object literals

• shorthands for properties and methods
• computed properties in literals
   
• let x = 1, y = 2;
• let o = {x, y}; <- that was me too :-)
• let o = {method(arg) { return arg; }};
• let o = {[Symbol.iterator]: function* () { yield 1;}};

Arrow Functions

• Short syntax with lexical this! \o/
   
• arr.filter(x => x);
• elem.addEventListener('click', ev => this.handleClick(ev));

Function Arguments

• The function arguments have basically the same syntax as for array destructuring
• (which you can nest of course)
   
• function a([x, y], a = 10, {opt1 = 'default'} = {}, ...rest) {}

Spread

• More or less the opposite of ...rest
   
• [...iterable]
   
• The new Function.prototype.apply()
  fn(a, b, ...iterable);
• But also for new!
  new Constructor(a, b, ...iterable);

Template Strings

• Finally true multiline strings!
• But much more
   
• `strings, with inline interpolation! ${1 + 2}`
• tagged`template string`

Modules

• who the fuck still uses AMD?
   
• export default function bar() {};
• export function foo() {};
• export {a, b};
   
• import Foo from './mod';
• import {a, b} from './module';
• import {a as b} from './mod';

Classes

• Just nice syntax around Constructor functions and inheritance
   
• class Foo extends Bar {
    constructor(a) { super(a); }
  }

That’s it!

• I’m sure I forgot some things
  there is just sooo much awesome in ES6
   
• Start using it now!
  Transpilers and Polyfills are up for the task!
  or just use it natively :-)
   
• Questions?