ES6, also known as ECMAScript 2015,
is the latest version of the ECMAScript
standard. ES6 is a significant update to
the language, and the first update to the
language since ES5 was standardized in
2009.
ES6
The destructuring assignment syntax is a
JavaScript expression that makes it possible to
extract data from arrays or objects into
distinct variables.
DESTRUCTURING
Slide 5
Slide 5 text
ES5
ES6
Slide 6
Slide 6 text
NO MORE FALSY
Slide 7
Slide 7 text
NESTED DESTRUCTURING
Slide 8
Slide 8 text
DESTRUCTURING REASSIGNMENT
Slide 9
Slide 9 text
DESTRUCTURING IN LOOPS
Slide 10
Slide 10 text
ES5 FUNCTION ARGUMENT
ES6 FUNCTION ARGUMENT
Slide 11
Slide 11 text
DESTRUCTURING DEFAULT VALUES
Slide 12
Slide 12 text
DESTRUCTURING DEFAULT
FUNCTION ARGUMENTS
Slide 13
Slide 13 text
DEFAULT FUNCTION
ARGUMENTS, WHAT?!
Slide 14
Slide 14 text
DESTRUCTURING
WITH DEFAULT FUNCTION ARGUMENTS
AND REASSIGNMENT
Slide 15
Slide 15 text
ARROW FUNCTIONS
An arrow function expression has a shorter
syntax compared to function expressions
and lexically binds the this value.
Slide 16
Slide 16 text
ES5 STANDARD FUNCTION
ES6 ARROW FUNCTION
Slide 17
Slide 17 text
ES6 ARROW FUNCTION
ES5 STANDARD FUNCTION
Slide 18
Slide 18 text
ES6 IMPLIED "RETURN"
SELF INVOKING FUNCTION
Slide 19
Slide 19 text
WON’T WORK
WILL WORK
Slide 20
Slide 20 text
BLOCK SCOPE DECLARATIONS
`let` allows you to declare variables that
are limited in scope to the block, statement,
or expression on which it is used. This is
unlike the var keyword, which defines a
variable globally, or locally to an entire
function regardless of block scope.
Slide 21
Slide 21 text
BLOCK SCOPE WITH THE LET KEYWORD
THE LET KEYWORD INSIDE A LOOP
Slide 22
Slide 22 text
IMPORT
The import statement is used to import
functions, objects or primitives that have
been exported from an external module,
another script, etc.
The export statement is used to export
functions, objects or primitives from a
given file (or module).
EXPORT
Slide 23
Slide 23 text
ES6 IMPORT
ES6 IMPORT AND DESTRUCTURING
ES6 IMPORT ALIASING
Slide 24
Slide 24 text
WHY DO I NEED ALIASING?
A file can export multiple items.
Using the * will import all the
exported pieces to single variable
It also helps to avoid conflicts
between similarly named libraries.
For example two libraries which
both use the symbol $ as their
constructor.
SO MUCH MORE!
Class, yes, very much like php, with
extends, getters / setters, a
constructor function.
Native Promises to help with async
calls to the server.
yield keyword to stop the process
thread.
and on… and on… and on…
Slide 32
Slide 32 text
COOL STORY BRO,
BUT HOW DO I GET IT TO WITH WORK IE9?
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
ES2015 AND BEYOND
Babel has support for the latest version
of JavaScript through syntax
transformers. These plugins allow you
to use new syntax, right now without
waiting for browser support.
Slide 35
Slide 35 text
WHAT?
It rewrites your code to work with older
browsers, bro. For example it will
rename all your let variables to avoid
out of scope conflicts.
Slide 36
Slide 36 text
BABEL CAN BE USED WITH:
Gulp
Grunt
Webpack
Rollup
Slide 37
Slide 37 text
WEBPACK
Install the Babel package via npm then
add it your loaders:
Slide 38
Slide 38 text
GRUNT
Install the Babel package via npm then
add it your config object:
Slide 39
Slide 39 text
GULP
Install the Babel package via npm then
add a new task.