- The document discusses upcoming features in ECMA Script 6 including modules, variables scoping, new core features for arrays, strings, numbers, maps, sets, destructuring, and handling external data using promises and deferred objects. - It provides examples of how to use ECMA 6 modules, variables scoping with let, new methods for strings and arrays, sets and maps, destructuring arrays and objects, and creating and resolving promises. - The document is intended as a guide to help understand and start using new features coming in ECMA Script 6.

2. About Me
• Technical Leader and Agile Coach
• Front-end Developer (test first!)
• Mobile Developer (Hybrid with Cordova, iOS, Android)
• Technology Enthusiast
• Mentor @ Airpair.com
• GSD guy

3. McGraw Hill
Education
is Hiring
http://www.mheducation.com/careers

4. What's Next?
Scotch Streaming
and Scaling
11 Feb 2015
www.meetup.com/mobiletea

5. Agenda
• Using ECMA 6 today
• ECMA 6 modules
• Variables scoping with ECMA 6
• ECMA 6 new core features (Array, String, Numbers, etc.)
• Handling data with Maps and Sets
• Destructuring Arrays and Objects
• Handlign external data using Promises and Deferred

6. I speak Ecma Script!
https://github.com/GiorgioNatili/es6

7. Sharpen the
Weapons

8. Where is JavaScript?

9. Modular JavaScript
• Self contained
• Avoid global scope pollution (global scope is not evil!)
• Keep the project organized
• Improve code reusability
• Highly testable and well defined API

10. Which Options?
AMD
CommonJS

11. AMD Module (1/3)
Simple return object as a collection of name/value pairs
define({
color: "black",
size: "unisize"
});

12. AMD (2/3)
Return object with "privacy" implementation
define(function () {
// Do setup work here
return {
color: "black",
size: "unisize"
}
});

13. AMD (3/3)
Return object with "privacy" implementation and dependencies
management
define(["./inventory", "./currencies"], function(inventory, currencies) {
var code = "ye76hg";
var getPrice = function(){
return currencies.getPrice(code);
};

14. CommonJS Module
(1/2)
Simple plain file that "exports" features using the "module" variable
(client.js)
var rest, mime, client;
rest = require('rest');
mime = require('rest/interceptor/mime');

15. CommonJS Module
(1/2)
Simple plain file that "imports" features
import client from collections;
client.doStuff();

16. Who wins?
idgaf animated GIF

18. AMD to CommonJS
define(function(require, exports, module) {
// Put traditional CommonJS module content here
exports.randomize = function( input ){
return shuffler.shuffle(input);
}
});

19. CommonJS to AMD
Convert the commonJS format to a browser compatible one using
browserify
$ npm install -g browserify
$ browserify main.js -o bundle.js

20. ECMA6 Modules
• export, functions and variables
export function area(radius) {
return Math.PI * radius * radius;
}
export PI = Math.PI;
• import, modules

21. Advantages
• Compact, synchronous syntax
• Asynchronous loading
• Conditional module inclusion
• Promote code modularization
• API style development

22. Can I use them
today?
Kinda of...

23. wow animated GIF

24. Experimental
Environments

25. Local Environment
• Install NodeJS using brew
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
$ brew install node
• Verify that npm in installed
$ npm

26. Dev
Environment (opt 1)
• Install yeoman globally
$ npm install yo -g
• Install the es6next yeoman generator

27. Dev Environment
(opt 2)
• Install 6to5 a transpiler able to produce readable ECMA5 code
ECMA6
$ npm install -g 6to5

28. Dev Environment
(opt 3)
• Clone a boilerplate
$ git clone https://github.com/davidjnelson/es6-boilerplate.git
• Install the dependencies
$ npm install

29. Run Your First
Transpilation
excited animated GIF

30. Browsers Support

31. Guess IE?
internet animated GIF

32. New Core Features

33. The Future of
JavaScript
fight animated GIF

34. Object.assing
Copy the behavior of an object to another object without using
classes or prototypes inheritance.
var worker = {};
var canEat = {
food: 'nothing',
eat: function() {
console.log(`eats $this.food`); // template string (part of ES6)
}
};

35. Object.is
Object method to determine whether two values are the same value
like the strict equality operator.
Object.is("foo", "foo"); // true
Object.is(window, window); // true
Object.is("foo", "bar"); // false
Object.is([], []); // false
var test = {a: 1};
Object.is(test, test); // true

36. __proto__ in object
literals
Change the prototype of an object literal
var obj = {
__proto__: Array.prototype
};

37. String.prototype.cont
Search for a string contained in a string from a specific position
(optional)
var str = "To be in Boston with the snow is cool.";
console.log(str.contains("To be")); // true
console.log(str.contains("question")); // false
console.log(str.contains("Chicago")); // false
console.log(str.contains("To be", 1)); // false

38. String.prototype.start
Check from a specific index (optional) if a string starts with a specific
string
var str = "To be in Miami when there is the snow in Boston is better.";
console.log(str.startsWith("To be")); // true
console.log(str.startsWith("To be", 2)); // false

39. String.prototype.repe
Repeat and concatenate a string a specific amount of times.
var str = "ECMA 6 is pretty cool.";
console.log(str.repeat(2));
// ECMA 6 is pretty cool.ECMA 6 is pretty cool.

40. Array.prototype.from
Create an Array from an array-like object or an iterable object.
var test = (function () {
var args = Array.from(arguments);
return args;
}(1, 2, 3));
console.log(test); // [1, 2, 3]

41. Array.prototype.find
Return the first occurrence in an Array that satisfies the conditions
described by the callback argument.
function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) return false;
}
return (element > 1);
}

42. Iterators
An iterator has a method called next, this method returns an object
with two properties: value and done.
var it = ['yo', 'ya', 'yes', 'now', 'then'].keys();
console.log(it.next().value, it.next().done);
console.log(it.next().value, it.next().done);
console.log(it.next().value, it.next().done);
console.log(it.next().value, it.next().done); // ???

43. Array.prototype.keys
Returns an iterable object from an Array.
var sequence = [1, 4, 5, 8, 2, 6];
console.log(sequence.keys()); // Iterator { }
An iterable object has a next() method that return an object with the
the value and done properties.

44. Array.prototype.entrie
Returns a new Array Iterator object that contains the key/value pairs
for each index in the array
var arr = ['a', 'b', 'c'];
var eArr = arr.entries();
var obj = eArr.next();
while(!obj.done){
console.log(obj.value);
obj = eArr.next();

45. Number Constants
Useful constants to determine the smallest interval between two
numbers and the minimum and maximum safe integers.
console.log(Number.EPSILON);
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MIN_SAFE_INTEGER);

46. Number (static)
Methods
Check if a number is NaN, infinite, integer, etc.
var num = 456;
console.log(Number.isFinite(num)); // true
console.log(Number.isInteger(num)); // true
console.log(Number.isNaN(num)); // false

47. for...of
Iterates over iterable objects (including Array, Map, Set, arguments
object and so on) ignoring instance and prototype properties
let arr = [ 3, 5, 7 ];
arr.foo = "hello";
for (var i in arr) {
console.log(i);
// "0", "1", "2", "foo"
}
for (var i of arr) {

48. Set + Map
A Set is a set of arbitrary values, a Map is a key/value pairs based
object; a Set doesn’t allow duplicates
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
console.log(s.size); // 2
console.log(s.has("hello")); // true
console.dir(s); // add(), clear(), delete(), entries(), values(), forEach(), etc.
// Maps

49. Proxy
Proxies enable creation of objects with the full range of behaviors
available to host objects
var target = {age: 1};
var handler = {
get: function (receiver, name) {
console.log(receiver)
return `Hello, ${name}!`;
}
};
var p = new Proxy(target, handler);

50. Template Strings
Template strings are defined using backticks `, inside, you can use a
dollar sign with brackets to insert executable code or variables.
var name = 'Giorgio', surname = 'Natili';
var template = `Hello! My name is ${name} ${surname}!`;
console.log(template);
// Hello! My name is Giorgio Natili!

51. Generators
Generators are functions that can be exited and then re-entered,
each call to the next() method will run the body of the function.
function* idGenerator(){
var index = 0,
val = '';
while(true){
index++;
yield val = 'UID' + index;
}
}

52. Variables Scoping
Finally the let keyword allow us to create scopes variable.
for(let i = 0; i < 10; i++){
console.log(i);
}
console.log(i); // i is not defined
if(true){
(function(){
var scoped = 'test';
})();
console.log(scoped); // scoped is not defined

53. Destructuring
It refers to a kind of assignment that allows you to assign the
properties of an array or object to variables to effectively
match values to variables or properties.
var [x, y, z] = [1, 2, 3];
// is equivalent to...
var x = 1, y = 2, z = 3;
let [x, y] = [1, 2];
console.log(x, y); // 1, 2
[x, y] = [y, x]; // Swap the values of x and y

54. Spreads Operators
Rest parameters allow to clearly define functions that accept a
variable number of arguments, the ... constructor is used to provide
spreads to arrays.
function logEach(...things) {
things.forEach(function (thing) {
console.log(thing); // "a" "b" "c"
});
}
logEach("a", "b", "c");
function example(a, b, c) {

55. Loading External
Data

56. Promises
the simpsons animated GIF

57. What is a Promise
• I want you to burn this phrase in your mind: A promise is an
asynchronous value
• The Promise object is used for deferred and asynchronous
computations
• A Promise is a placeholder for a future possible value

58. Promises in Action
At their most basic, promises are a bit like event listeners except:
var promise = new Promise(function(resolve, reject) {
// do a thing, possibly async, then…
if (/* everything turned out fine */) {
• A promise can only succeed or fail once
• If a promise has succeeded or failed and you later add a
success/failure callback, the correct callback will be called, even
though the event took place earlier

59. Using a Promise
A promise can be used by invoking the then() method, it accepts a
success and a failure handler as arguments.
var promise = Promise.resolve($.ajax('/whatever.json'));
promise.then(function(result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error: "It broke"
});

60. Promises
Implementations
• Q https://github.com/kriskowal/q
• YUI http://yuilibrary.com/yui/docs/promise/
• es6-promise https://github.com/jakearchibald/es6-promise
• JQuery http://api.jquery.com/promise/
• Angular https://docs.angularjs.org/api/ng/service/$q
• RSVP (ember) https://github.com/tildeio/rsvp.js/

61. Resources

62. Links
• https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Language_Resources
• https://developer.mozilla.org/en-
US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla
• https://github.com/google/traceur-compiler
• https://github.com/jmcriffey/grunt-traceur-compiler
• http://pointedears.de/scripts/test/es-matrix/
• http://kangax.github.io/compat-table/es6
• https://people.mozilla.org/~jorendorff/es6-draft.html

63. @giorgionatili
#mobiletea #javascript #swift #wearable #agile #android #tdd

64. Thanks!
Grazie! Graçias! Danke! Merci! !
sky animated GIF