JavaScript in 2015

JavaScript in 2015
The language or 201x ?
Igor Laborie <igor.laborie@akka.eu> 16 Dec. 2015

JS is now a major
programming language
http://www.sitepoint.com/whats-best-programming-language-learn-2015/

GitHut
http://githut.info/

http://redmonk.com/sogrady/2015/07/01/language-rankings-6-15/

Roadmap
• Once upon the time
• Good, the Bad, the Ugly
• NodeJS
• ES2015
• Conclusion

Once Upon the time
• 1995: created by Brendan Eich
• 1997: Standard ECMA-262
• 2004: Firefox
• 2008: Chrome with V8
• 2009: ES5, NodeJS
• 2015: ES6 ES2015
• 2016: (ES7) ES2016

The Good,
the Bad,
and the Ugly

No longer problems
• Browser fragmentation 
OK with IE9+  
http://kangax.github.io/compat-table/es5/
• Debugging 
Chrome, Firefox, …
• Editors 
https://atom.io/ 
http://www.sublimetext.com/ 
https://www.jetbrains.com/webstorm/ 
…

Simple
https://developer.mozilla.org/en-US/docs/Web/JavaScript/
Data_structures
• boolean, null, undefined
• number (IEEE 754 double-precision binary ﬂoating-point format)
• string
• object
• function

JSON
• Native JavaScript format
• Easier than XML to express data
• Easier to read for mankind
• Easier to read for computer
• Native JavaScript API: 
JSON.parse, JSON.format

Functional
• Functions are ﬁrst class citizen
• Closure
• Easy to handle function (currying, memoization)
• <!> with the callback hell*

Type coercion
• some time useful (default param, check is valid)
• Very dangerous: 
+ not symmetric  
== not transitive

Function Arguments
• https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Reference/Functions/arguments
• Useful for varargs
• Use default param pattern*

Type coercion
// + not symmetric 
console.log([] + []); // '' empty String 
console.log([] + {}); // '[object Object]'
toString on an empty object 
console.log({} + []); // 0 the number 
console.log({} + {}); // NaN the number 
 
// == not transitive  
console.log("0" == 0); // true 
console.log(0 == ""); // true 
console.log("0" == ""); // false

Function Arguments
var fun; 
// Classic call 
fun = function (a, b) { 
return {a: a, b: b}; 
}; 
console.log('fun(1, 2)', fun(1, 2)); // { a: 1, b: 2 } 
console.log('fun(1)', fun(1)); // { a: 1, b: undefined } 
console.log('fun(1, 2, 3)', fun(1, 2, 3)); // { a: 1, b: 2 } 
 
// Using the arguments 
fun = function () { 
var a = arguments[0]; 
var b = arguments[1]; 
// can be converted to Array with
Array.prototype.slice.call(arguments) 
return {a: a, b: b}; 
}; 
console.log('fun(1, 2)', fun(1, 2)); // { a: 1, b: 2 } 
console.log('fun(1)', fun(1)); // { a: 1, b: undefined } 
console.log('fun(1, 2, 3)', fun(1, 2, 3));

What is this ?
• The instance object ?
• null or undefined ?
• The element that trigger the event ?
• Anything you want:
fun.apply(thisArg, [arg1, arg2, ...]) 
fun.call(thisArg, arg1, arg2, ...)

Scope & hoisting
• <!> with global scope
• var scope is function*
• Hoisting is unnatural, use with care, for
anonymous function only

Prototype
• Prototype is hard to master
• do not add method on common type 
(except for polyﬁll)

Summary
• WARN with dangerous JavaScript features 
by default set
• Learn the language: JavaScript the good part
• Lint your code: http://eslint.org/
"use strict";

https://nodejs.org/en/

What is NodeJS
• Java has JVM - JavaScript has NodeJS 
based on V8 
with low level API
• Handled by the Node.js Foundation
• Isomorphic JavaScript
• There are alternatives JavaScript engine for
server side (e.g. Nashorn since Java 8)

Threaded-Pool Servers
• Single event loop

Event Loop Servers
• https://strongloop.com/wp-content/uploads/
2014/01/threading_node.png

Code
• Hello World
• Require & export
• Minimal nodeJS server

Hello World
// arg0: node 
// arg1: js file 
// arg1: param 
var name = process.argv[2] || 'World'; 
console.log('Hello', name, '!');

Require & Export
// Expose an object with version and plop 
module.exports = { 
version: '1.0.0', 
plop: function (name) { 
console.log('Plop', name || '', '!'); 
} 
};
// import the local exportAPI file 
var api = require('./exportAPI'); 
 
console.log('API version', api.version); 
api.plop('toto');

Minimal HTTP server
// import standard http module provided by node 
var http = require('http'); 
 
// Create a server with a callback handler 
var server = http.createServer(function (request, response) { 
console.log(request.method, request.url); // show request 
// write status and a header 
response.writeHead(200, {'Content-Type': 'text/plain'}); 
// write body 
response.end('Hello World !n'); 
}); 
// open server on the specific port 
server.listen(8000); 
console.log('Server open on http://localhost:8000');

Node ecosystem: npm
• Auto installed with NodeJS
• https://www.npmjs.com/
• package.json to deﬁne project information 
npm init to initialize your project
• Add a dependency in your project 
npm install --save <dependency>[@version]
• Install a global utility 
npm install -g <utility>

<3 proxy
npm config set proxy  
"http://<user>:<password>@proxy2.akka.eu:9090" 
npm config set https-proxy  
"http://<user>:<password>@proxy2.akka.eu:9090"
• Set the HTTP_PROXY and HTTPS_PROXY

Code
• Using npm for MomentJS
• Minimal nodeJS+Express
server

Moments.js
// import monent 
var moment = require('moment'); 
 
// get XMas date (http://momentjs.com/) 
var xmas = moment('25-12-2015', 'dd-MM-YYYY'); 
 
// Display relative date to now 
console.log(xmas.toNow());

Express
var express = require('express'); // import express 
var app = express(); // create application 
 
// define default route 
app.get('/', function (request, response) { 
console.log(request.method, request.url); // show request 
response.status(200).send('Hello World !'); // send OK with
message 
}); 
 
// start the server 
var server = app.listen(8000, function () { 
// called when server is started 
console.log('Started at http://localhost:%s',
server.address().port); 
});

Tools using NodeJS
• Modern web build tools 
Gulp, Grunt, …
• Languages tools 
ESLint, JSHint, JSLint, … 
lessc, BabelJS, TypeScript, …
• Testing frameworks 
Karma, Protractor, Mocha, …
• Others: http-server

ES6 ES2015
• JavaScript engine support:  
https://kangax.github.io/compat-table/es6/
• Evergreen browser (including Microsoft Edge)
have a good support
• We can use a transpiler like BabelJS 
https://babeljs.io/docs/learn-es2015/

Features
• String templates
• Let & const
• Lambda syntax
• Class
• Promises
• Object literals
• Modules
• Iterable, for ..of
• Generators
• Destructuring
• Default, rest, spread
• Proxy, Map, Set, …
• …

Code
• String templates
• Let & const
• Lambda syntax
• Class & object literals
• Default params
• Promises

String templates
var name = process.argv[2] || 'World'; 
// console.log('Hello ' + name + '!'); 
console.log(`Hello ${name}!`);

Let & const
// With var ! 
var doSomething = function (a) { 
var res = 0; 
if (a) { 
var res = 'a'; 
} 
res++; 
return res; 
};

Let & const
// With let !
let doSomething = function (a) { 
let res = 0; 
if (a) { 
let res = 'a'; 
} 
res++; 
return res; 
};

Let & const
// With const 
const doSomething = function (a) { 
const res = 0; 
if (a) { 
res = 'a'; // fail here 
} 
res++; // fail here 
return res; 
};

Lambda
//var aux = function (n, acc) { 
// return (n < 2) ? acc : aux(n - 1, n * acc); 
//}; 
var aux = (n, acc) => (n < 2) ? acc : aux(n - 1, n
* acc);

Class & Object literals
// Define the Animal class 
class Animal { 
constructor(name) { 
this.name = name; 
} 
 
talk() { 
console.log(`My name is ${this.name}`); 
} 
} 
const rex = new Animal('Rex'); 
rex.talk(); // My name is Rex

Class & Object literals
// Define the Cat class 
class Cat extends Animal { 
talk() { 
console.log(`MEOW, my name is ${this.name}`); 
} 
} 
const osiris = new Cat('Osiris'); 
osiris.talk(); // MEOW, my name is Osiris

Default parameter
//var aux = (n, acc) => { 
// const value = acc || 1; 
// return (n < 2) ? value : aux(n - 1, n * value); 
//} 
var aux = (n, acc = 1) => { 
return (n < 2) ? acc: aux(n - 1, n * acc); 
};

Promises
MongoClient.connect(config.url) 
.then(db => log.info(`Connected correctly to ${config.url}`) ||
db) 
.then(db => log.info(`Create DB ...`) || db) 
.then(db => createDB(db, extract)) 
.then(db => log.info(`Compute points ...`) || db) 
.then(db => computePoints(db)) 
.then(db => log.info(`Compute ranks ...`) || db) 
.then(db => ranks(db)) 
.then(db => log.info(`Compute classements ...`) || db) 
.then(db => classements(db)) 
.then(db => db.close()) 
.then(() => log.info('done')) 
.catch(err => log.error(err));

Learn ES2015
• https://babeljs.io/docs/learn-es2015/
• http://www.smashingmagazine.com/2015/10/
es6-whats-new-next-version-javascript/
• https://hacks.mozilla.org/category/es6-in-depth/

JavaScript can be good
• Do not underestimate JavaScript
• Learn it, use it 
try ES2015 with BabelJS or NodeJS 4+
• https://developer.mozilla.org/en-US/docs/Web/
JavaScript
• codeschool, codeacademy, lynda, openclassrooms, …
• ‘JavaScript the good part’ 
‘Secrets of the JavaScript Ninja’

Alternatives
• TypeScript: http://www.typescriptlang.org/  
~ ES2015 with types
• CoffeeScript: http://coffeescript.org/ 
~ES2015 with ~pythonish syntax
• Elm: http://elm-lang.org/ 
more functional
• Modern language compile to JS: Scala.js,
Ceylon.js, go, …

JavaScript in 2015

More Related Content

What's hot (20)

Similar to JavaScript in 2015 (20)

Recently uploaded (20)

JavaScript in 2015