CF Camp Notes: ECMAScript 6, Matt Bourke
October 22, 2014
ECMAScript 6 - Matt Bourke
ECMAScript is a "language", JavaScript is a "dialect" of that
they're kind of 1 in the same.
Creating awesome games in JS is easy -- Phaser.js
Automated regression testing w/ casper.js
JS is the "assembly language of the web"
-- there are over a dozen languages now that compile to JS
CoffeeScript, Google Dart, etc.
EcmaScript 6
1, 2, 3, some back and forth, then 3.1 became 5 and then 6.0
3.1 roughly became 5
4.0 scrapped and some of it became 6
7.0 will be riding the yearly software release train
if they keep to their word on this
when can we use this new version 6 stuff?
depends on your audience and how much polyfilling or Transpiling you'd like to do
Polyfill by prototype extension
Transpile w/ told like Traceur or Mascara
use the latest Chrome / Firefox
Enable "experimental Javascript" in Chrome uRL chrome://flags
check out your browser compatibility on http://kangax.github.io/compat-table/es6/
es6fiddle.com
keep your "var" variables at the top of the function
when you put "var" in the middle javascript will do "function hoisting" and move it anyway so you'll get weird results.
var scope
"let" scope
to get "block level" scoping
...will output 10 because "let" keeps that "num = 6" scoped inside the if() statement. no "function hoisting".
The Module Pattern --
aka an "object literal" -- the "javascript object/class" we're used to now.
revealing module pattern
default arguments --
named parameters --
functions - spread or apply
ala "unpacking" in python
fat functions
shorthand function syntax;
new string stuff
contains
arrays - new stuff
static array methods
prototype methods
entries
keys
values
fill
Modules are now built in
will work faster and be more "standard" than any of the other hacked ways Modules exist today.
"real" Classes
class Person extends ParentClass
will have constructors that are called automatically etc
templating
via back-tick `
can use multiple lines, variables, etc.
promises
now native to JS, instead of the various hacks that are available now.
generators --
you don't have a "return" you have a "yield"
Weak Map --
like key/value pair except instead of keys needing to be a string (simple data type) the keys can be objects
much more efficient for garbage collection
can't iterate it "naturally". you'd have to keep an list of keys somewhere (if that's what you wanted to do)
Proxies --
allow us to intercept operations done on objects
via proxy "traps"
get()
set()
deleteProperty()
iterate()
ownKeys()
and a few others
Set() Object
.add
.size
.has
coming in version 7
Object.observe - no more dirty checking objects for a change
(this works in Chrome NOW, don't need to wait for version 7)
ECMAScript is a "language", JavaScript is a "dialect" of that
they're kind of 1 in the same.
Creating awesome games in JS is easy -- Phaser.js
Automated regression testing w/ casper.js
JS is the "assembly language of the web"
-- there are over a dozen languages now that compile to JS
CoffeeScript, Google Dart, etc.
EcmaScript 6
1, 2, 3, some back and forth, then 3.1 became 5 and then 6.0
3.1 roughly became 5
4.0 scrapped and some of it became 6
7.0 will be riding the yearly software release train
if they keep to their word on this
when can we use this new version 6 stuff?
depends on your audience and how much polyfilling or Transpiling you'd like to do
Polyfill by prototype extension
Transpile w/ told like Traceur or Mascara
use the latest Chrome / Firefox
Enable "experimental Javascript" in Chrome uRL chrome://flags
check out your browser compatibility on http://kangax.github.io/compat-table/es6/
es6fiddle.com
keep your "var" variables at the top of the function
when you put "var" in the middle javascript will do "function hoisting" and move it anyway so you'll get weird results.
var scope
"let" scope
to get "block level" scoping
...will output 10 because "let" keeps that "num = 6" scoped inside the if() statement. no "function hoisting".
The Module Pattern --
aka an "object literal" -- the "javascript object/class" we're used to now.
revealing module pattern
default arguments --
named parameters --
functions - spread or apply
ala "unpacking" in python
fat functions
shorthand function syntax;
new string stuff
contains
arrays - new stuff
static array methods
prototype methods
entries
keys
values
fill
Modules are now built in
will work faster and be more "standard" than any of the other hacked ways Modules exist today.
"real" Classes
class Person extends ParentClass
will have constructors that are called automatically etc
templating
via back-tick `
can use multiple lines, variables, etc.
promises
now native to JS, instead of the various hacks that are available now.
generators --
you don't have a "return" you have a "yield"
Weak Map --
like key/value pair except instead of keys needing to be a string (simple data type) the keys can be objects
much more efficient for garbage collection
can't iterate it "naturally". you'd have to keep an list of keys somewhere (if that's what you wanted to do)
Proxies --
allow us to intercept operations done on objects
via proxy "traps"
get()
set()
deleteProperty()
iterate()
ownKeys()
and a few others
Set() Object
.add
.size
.has
coming in version 7
Object.observe - no more dirty checking objects for a change
(this works in Chrome NOW, don't need to wait for version 7)