ECMAScript

El futuro de la web

ECMAScript es una especificación de lenguaje de programación publicada por ECMA International. El desarrollo empezó en 1996 y estuvo basado en el popular lenguaje JavaScript propuesto como estándar por Netscape Communications Corporation. Actualmente está aceptado como el estándar ISO 16262.

ECMAScript

1997

2015

2010

2000

2005

First edition

ES6

Timeline

ES3

ES5

ES6

Es Finalizada en Junio 2015

ES7

Próximamente.

Lo nuevo de ECMAScript

Fácil Modelos / Vistas

Sincronización

MODEL

VIEW

Variables " const" y " let"

const variable;

let variable;

var variable;

Fácil Programación

Asincrona

PULL

PUSH

Flecha Function

function (n) {return 1 + n;}

n => 1 + n

function (n, x) {return x + n;}

(n, x) => x + n

Flecha Function

Control Scope (this)

"use strict";

var obj = function () {
    this.name = "obj-ES5";

    var self = this;
    this.click = function (event) {
        alert('it is clicked in ' + self.name);
    };
};

"use strict";

var obj = function () {
    this.name = "obj-ES6";

    this.click = event => {
        alert('it is clicked in ' + this.name);
    };
};

Clases (class)

class a {
  constructor () {
    this.foo = "Hello"
    this.bar = "Word"
  }
}

class b extends a {
  constructor() {
    super()
    console.log(`${this.foo} ${this.bar}!`);
  }
}

new b()
// Hello Word!

Templates String

"use strict"
// ES5
var template = "Digo Hola" +
"Digo Como estas" +
"y Digo que pasa."

"use strict"
// ES6
let template = `Digo Hola
Digo Como estas
y Digo que pasa.`

Ejemplo con Template

let obj = {
    foo: "Con ES6",
    sel: '#element',
    bar: function () {
        $(this.sel).html(`
            <div>
                <h1>${this.foo}</h1>
            </div>
        `)
    }
}

Descomposiciones

let atributos = ['caminar', 'saltar', 'jugar']

let [a,b,c] = atributos

// caminar saltar jugar

let obj = {Nombre: 'Jon', Apellido: 'Dotsoy'}

let {Nombre, Apellido} = obj

console.log("Ahora Soy:", Nombre, Apellido)

// Ahora Soy: Jon Dotsoy

Iterasiones

let atributos = ['caminar', 'saltar', 'jugar', 'mirar']

let [a,b,c, ...otros] = atributos

// caminar saltar jugar ["mirar"]

function foo (...args) {
    for (var arg in args) {
        console.log(arg)
    }
}

foo('a','b','c')
// a
// b
// c
// undefined

Iterasiones en

Funciones

let actividades = function* () {
  yield* ['Leer', 'Analizar', 'Escribir']
  yield 'Jugar'
}

let secuencia = actividades()
let actividad

while (!(actividad = secuencia.next()).done) {
  console.log(actividad)
}

// Object {value: "Leer", done: false}
// Object {value: "Analizar", done: false}
// Object {value: "Escribir", done: false}
// Object {value: "Jugar", done: false}

Funciones Asincronas

let enviarMensaje = async function (mensaje) {
  send(mensaje)
  console.log("Se ha enviado", mensaje)
}

console.log("Peraparndo para enviar mensaje.")
enviarMensaje("Hola Loquillo, que hay!")
console.log("Se genero mensaje.")

// Peraparndo para enviar mensaje.
// Se genero mensaje.
// Se ha enviado Hola Loquillo, que hay!

Build a APP

Requerimientos

nodejs.org

jspm.io

Instalando JSPM

> npm install -g jspm

> npm i -g jspm

Instalando Local Server para Testear

> npm i -g server-http

Instalar Nuestras Dependencias

> jspm i jquery

Inicializando una Aplicación

> jspm init --prompts="babel"

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [.\jspm_packages]:
Enter config file path [.\config.js]:
Enter client baseURL (public folder URL) [/]:
Which ES6 transpiler would you like to use, Traceur or Babel? [babel]:

Index.html

> touch index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
        <!-- tag to App -->
        <myApp></myApp>

        <script src="./jspm_packages/system.js"></script>
        <script src="./config.js"></script>
        <script>System.import("app")</script>
    </body>
</html>

Init app.js

> touch app.js

import $ from 'jquery'

export class App {
    constructor (selector) {
        this.app = $(selector)
    }

    addTask () {
    }
}

new App('myApp')

Views in app.js

...
export class App {
    constructor (selector) {
        this.template = $(`
                    <div>
                        <div>
                            <h1>Listado de Tareas</h1>
                            <h2>[<span tasks-counter>0</span> tareas]</h2>
                        </div>
                        <div>
                            <ol tasks-list></ol>
                        </div>
                        <div>
                            <form tasks-form>
                                <input tasks-model type="text" placeholder="Mi tarea...">
                                <button type="submit">Agregar Tarea</button>
                            </form>
                        </div>
                    </div>
                `)
        this.templateTask = $(`<li>[<span task-date></span>] <a href="#" task-delete>[Eliminar]</a> <span task-value></span></li>`)
    }
...

Select Elements in app.js

import $ from 'jquery'

export class App {
    constructor (selector) {
        ...
        this.formAdd = $('[tasks-form]', this.template)
        this.counter = $('[tasks-counter]', this.template)
        this.list = $('[tasks-list]', this.template)
        this.model = $('[tasks-model]', this.template)
    }
...

Bootstrap app.js

import $ from 'jquery'

export class App {
    constructor (selector) {
        ...
        this.app.append(this.template)
    }
...

Tasks Event app.js

...
    addTask () {
        let taskObj = this.templateTask.clone() // Clone Tasks Model
        // Select Attributes
        let taskObjValue = $('[task-value]', taskObj)
        let taskObjDelete = $('[task-delete]', taskObj)
        let taskObjDate = $('[task-date]', taskObj)

        // Evento to delete
        taskObjDelete.click(event => {
            taskObj.remove()
            this.counter.text(this.list.children().length) // Set number to counter
        })

        // Set Value from model
        taskObjValue.text(this.model.val())

        // Add Task in list
        this.list.append(taskObj)

        // Set number to counter
        this.counter.text(this.list.children().length)
    }
}
...

Decorate Task app.js

...
    addTask () {
        ...
        let date = new Date()
        ...
        // Set Attribute title with date
        taskObjDate.attr({
            title: date
        })
        // Set Date in task
        taskObjDate.text(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} ${date.getDay()}/${date.getMonth()}/${date.getYear()}`)
        ...
    }
}
...

Live

Para finalizar

Build app

> jspm bundle-sfx app --minify

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
        <!-- tag to App -->
        <myApp></myApp>
        
        <script src="build.js"></script>
    </body>
</html>