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?
Made with Slides.com