Modern JavaScript

ES 6

Syntax

• Block Scope Declarations

• Block-Scoped Functions

• Concise methods

• Arrow Functions

ES 6

var a = 2;

{
    let a = 3;
    console.log( a );   // 3
}

console.log( a );       // 2

{
    foo();  // works!

    function foo() {
        // ..
    }
}

foo();  // ReferenceError

Block Scoped Function

Block Scope Variable

ES 6

var o = {
    x: function(){
        // ..
    },
    y: function(){
        // ..
    }
}

var o = {
    x(){
        // ..
    },
    y(){
        // ..
    }
}

Concise Methods

ES 6

function foo(x,y) {
    return x + y;
}

// versus

var foo = (x,y) => x + y;

var a = [1,2,3,4,5];

a = a.map( v => v * 2 );

console.log( a );

=> ()

var controller = {
    makeRequest: function(..){
        var self = this;

        btn.addEventListener( "click", function(){
            // ..
            self.makeRequest(..);
        }, false );
    }
};


var controller = {
    makeRequest: function(..){
        btn.addEventListener( "click", () => {
            // ..
            this.makeRequest(..);
        }, false );
    }
};

var controller = {
    makeRequest: (a) => {
        console.log('make req', a);
        this.helper(a);
    },
    helper: (b) => {
        console.log('help me', a);
    }
};

controller.makeRequest("hello");

=> () with THIS

ES 6

Organization

• Class

• extends and super

ES 6

function Foo(a,b) {
    this.x = a;
    this.y = b;
}

Foo.prototype.gimmeXY = function() {
    return this.x * this.y;
}

Class

class Foo {
    constructor(a,b) {
        this.x = a;
        this.y = b;
    }

    gimmeXY() {
        return this.x * this.y;
    }
}

ES 6

Async

• Promise

function ajax(url,cb) {
    // make request, eventually call `cb(..)`
}

// ..

ajax( "http://some.url.1", function handler(err,contents){
    if (err) {
        // handle ajax error
    }
    else {
        // handle `contents` success
    }
} );

Promise

function ajax(url) {
    return new Promise( function pr(resolve,reject){
        // make request, eventually call
        // either `resolve(..)` or `reject(..)`
    } );
}

// ..

ajax( "http://some.url.1" )
.then(
    function fulfilled(contents){
        // handle `contents` success
    },
    function rejected(reason){
        // handle ajax error reason
    }
);

Promise

NODE

Modular Programing

Build

Webpack

Browserify

Rollup

Components

React

Redux

Web Components

Shadow Dom

EXPRESS JS

var path = require("path"),
    express = require("express");

var DIST_DIR = path.join(__dirname, "dist"),
    PORT = 3000,
    app = express();

//Serving the files on the dist folder
app.use(express.static(DIST_DIR));

//Send index.html when the user access the web
app.get("*", function (req, res) {
  res.sendFile(path.join(DIST_DIR, "index.html"));
});

app.listen(PORT);

Web Speech API

SpeechSynthesis

(Text-to-Speech)

SpeechRecognition

(Asynchronous Speech Recognition.)

Microservices

Seneca