1 Acerca de

1.1 Autor

• Adolfo Sanz De Diego
  • Blog: asanzdiego.blogspot.com.es
  • Correo: asanzdiego@gmail.com
  • GitHub: github.com/asanzdiego
  • Twitter: twitter.com/asanzdiego
  • Linkedin: in/asanzdiego
  • SlideShare: slideshare.net/asanzdiego

1.2 Licencia

• Este obra está bajo una licencia:
  • Creative Commons Reconocimiento-CompartirIgual 3.0
• El código fuente de los programas están bajo una licencia:
  • GPL 3.0

1.3 Ejemplos

• Las slides y los códigos de ejemplo los podéis encontrar en:
  • https://github.com/asanzdiego/curso-javascript-avanzado-2015

2 JavaScript

2.1 Historia

• Lo crea Brendan Eich en Netscape en 1995 para hacer páginas web dinámicas
• Aparece por primera vez en Netscape Navigator 2.0
• Cada día más usado (clientes web, videojuegos, windows 8, servidores web, bases de datos, etc.)

2.2 El lenguaje

• Orientado a objetos
• Basado en prototipos
• Funcional
• Débilmente tipado
• Dinámico

3 Orientación a objetos

3.1 ¿Qué es un objeto?

• Colección de propiedades (pares nombre-valor).

• Todo son objetos (las funciones también) excepto los primitivos: strings, números, booleans, null o undefined

• Para saber si es un objeto o un primitivo hacer typeof variable

3.2 Propiedades

• Podemos acceder directamente o como si fuese un contenedor:

objeto.nombre === objeto[nombre] // true

• Podemos crearlas y destruirlas en tiempo de ejecución

var objeto = {};
objeto.nuevaPropiedad = 1; // añadir
delete objeto.nuevaPropiedad; // eliminar

3.3 Objeto iniciador

• Podemos crear un objeto así:

var objeto = {
  nombre: "Adolfo",
  twitter: "@asanzdiego"
};

3.4 Función constructora

• O con una función constructora y un new.

function Persona(nombre, twitter) {
  this.nombre = nombre;
  this.twitter = twitter;
};
var objeto = new Persona("Adolfo", "@asanzdiego");

3.5 Prototipos

• Las funciones son objetos y tienen una propiedad llamada prototype.

• Cuando creamos un objeto con new, la referencia a esa propiedad prototype es almacenada en una propiedad interna.

• El prototipo se utiliza para compartir propiedades.

• Podemos acceder al objeto prototipo de un objeto:

// Falla en Opera o IE <= 8
Object.getPrototypeOf(objeto);

// No es estandar y falla en IE
objeto.__proto__;

3.6 Eficiencia

• Si queremos que nuestro código se ejecute una sola vez y que prepare en memoria todo lo necesario para generar objetos, la mejor opción es usar una función constructora solo con el estado de una nueva instancia, y el resto (los métodos) añadirlos al prototipo.

• Ejemplo:

function ConstructorA(p1) {
  this.p1 = p1;
}

// los métodos los ponenmos en el prototipo
ConstructorA.prototype.metodo1 = function() {
  console.log(this.p1);
};

3.7 Herencia

• Ejemplo:

function ConstructorA(p1) {
  this.p1 = p1;
}

function ConstructorB(p1, p2) {
  // llamamos al super para que no se pierda p1.
  ConstructorA.call(this, p1);
  this.p2 = p2;
}

// Hacemos que B herede de A
// Prototipo de Función Constructora B apunta al
// Prototipo de Función Constructora A
ConstructorB.prototype = Object.create(ConstructorA.prototype);

3.8 Cadena de prototipos

• Cuando se invoca una llamada a una propiedad, JavaScript primero busca en el propio objeto, y si no lo encuentra busca en su prototipo, y sino en el prototipo del prototipo, así hasta el prototipo de Object que es null.

3.9 Cadena de prototipos de la instancia

• En el ejemplo anterior:

instanciaB.__proto__ == ConstructorB.prototype // true
instanciaB.__proto__.__proto__ == ConstructorA.prototype // true
instanciaB.__proto__.__proto__.__proto__ == Object.prototype // true
instanciaB.__proto__.__proto__.__proto__.__proto__ == null // true

3.10 Cadena de prototipos de la función constructora

• En el ejemplo anterior:

expect(ConstructorB.__proto__).toEqual(Function.prototype);
expect(ConstructorB.__proto__.__proto__).toEqual(Object.prototype);
expect(ConstructorB.__proto__.__proto__.__proto__).toEqual(null);

3.11 Esquema prototipos

3.12 Operador instanceof

• La expresión instanciaB instanceof ConstructorA devolverá true, si el prototipo de la Función ConstructorA, se encuentra en la cadena de prototipos de la instanciaB.

• En el ejemplo anterior:

instanciaB instanceof ConstructorB; // true
instanciaB instanceof ConstructorA; // true
instanciaB instanceof Object; // true

3.13 Extensión

• Con los prototipos podemos extender la funcionalidad del propio lenguaje.

• Ejemplo:

String.prototype.hola = function() {
  return "Hola "+this;
}

"Adolfo".hola(); // "Hola Adolfo"

3.14 Propiedades y métodos estáticos

• Lo que se define dentro de la función constructora va a ser propio de la instancia.

• Pero como hemos dicho, en JavaScript, una función es un objeto, al que podemos añadir tanto atributos como funciones.

• Añadiendo atributos y funciones a la función constructora obtenemos propiedades y métodos estáticos.

• Ejemplo:

function ConstructorA() {

  ConstructorA.propiedadEstatica = "propiedad estática";
}

ConstructorA.metodoEstatico = function() {
  console.log("método estático");
}

3.15 Propiedades y métodos privados

• La visibilidad de objetos depende del contexto.

• Los contextos en JavaScript son bloques de código entre dos {} y en general, desde uno de ellos, solo tienes acceso a lo que en él se defina y a lo que se defina en otros contextos que contengan al tuyo.

• Ejemplo:

function ConstructorA(privada, publica) {
  var propiedadPrivada = privada;
  this.propiedadPublica = publica;
  var metodoPrivado = function() {
    console.log("-->propiedadPrivada", propiedadPrivada);
  }
  this.metodoPublico = function() {
    console.log("-->propiedadPublica", this.propiedadPublica);
    metodoPrivado();
  }
}

3.16 Polimorfismo

• Poder llamar a métodos sintácticamente iguales de objetos de tipos diferentes.

• Esto se consigue mediante herencia.

4 Técnicas avanzadas

4.1 Funciones

• Son objetos con sus propiedades.

• Se pueden pasar como parámetros a otras funciones.

• Pueden guardarse en variables.

• Son mensajes cuyo receptor es this.

4.2 This

• Ejemplo:

var nombre = "Laura";

var alba = {
  nombre: "Alba",
  saludo: function() {
    return "Hola "+this.nombre;
  }
}

alba.saludo(); // Hola Alba

var fn = alba.saludo;

fn(); // Hola Laura

4.3 call y apply

• Dos funciones permiten manipular el this: call y apply que en lo único que se diferencian es en la llamada.

fn.call(thisArg [, arg1 [, arg2 [...]]])

fn.apply(thisArg [, arglist])

4.4 Número variable de argumentos

• Las funciones en JavaScript aunque tengan especificado un número de argumentos de entrada, pueden recibir más o menos argumentos y es válido.

4.5 Arguments

• Es un objeto que contiene los parámetros de la función.

function echoArgs() {
  console.log(arguments[0]); // Adolfo
  console.log(arguments[1]); // Sanz
}
echoArgs("Adolfo", "Sanz");

4.6 Declaración de funciones

• Estas 2 declaraciones son equivalentes:

function holaMundo1() {
  console.log("Hola Mundo 1");
}
holaMundo1();

var holaMundo2 = function() {
  console.log("Hola Mundo 2");
}
holaMundo2();

4.7 Transfiriendo funciones a otras funciones

• Hemos dicho que las funciones son objetos, así que se pueden pasar como parámetros.

function saluda() {
  console.log("Hola")
}
function ejecuta(func) {
  func()
}
ejecuta(saluda);

4.8 Funciones anónimas

• Hemos dicho que las funciones se pueden declarar.

• Pero también podemos no declararlas y dejarlas como anónimas.

• Una función anónima así declarada no se podría ejecutar.

function(nombre) {
  console.log("Hola "+nombre);
}

• Pero una función puede devolver una función anónima.

function saludador(nombre) {
  return function() {
    console.log("Hola "+nombre);
  }
}

var saluda = saludador("mundo");
saluda(); // Hola mundo

4.9 Funciones autoejecutables

• Podemos autoejecutar funciones anónimas.

(function(nombre) {
  console.log("Hola "+nombre);
})("mundo")

4.10 Clousures

• Un closure combina una función y el entorno en que se creó.

function creaSumador(x) {
  return function(y) {
    return x + y;
  };
}

var suma5 = creaSumador(5);
var suma10 = creaSumador(10);

console.log(suma5(2));  // muestra 7
console.log(suma10(2)); // muestra 12

• En una closures la función interna almacena una referencia al último valor de la variable establecido cuando la función externa termina de ejecutarse.

4.11 El patrón Modulo

• Se trata de una función que actúa como contenedor para un contexto de ejecución.

miModulo = (function() {

  var propiedadPrivada;

  function metodoPrivado() { };

  // API publica
  return {
    metodoPublico1: function () {
    },

    metodoPublico2: function () {
    }
  }
}());

4.12 Eficiencia

• Si se ejecuta desde el navegador, se suele pasar como parámetro el objeto window para mejorar el rendimiento. Así cada vez que lo necesitemos el intérprete lo utilizará directamete en lugar de buscarlo remontando niveles.

• Y también se suele pasar el parámetro undefined, para evitar los errores que pueden darse si la palabra reservada ha sido reescrita en alguna parte del código y su valor no corresponda con el esperado.

miModulo = (function(window, undefined) {

  // El código va aquí

})( window );

4.13 El patrón Modulo Revelado

• El problema del patrón Modulo es pasar un método de privado a público o viceversa.

• Por ese motivo lo que que se suele hacer es definir todo en el cuerpo, y luego referenciar solo los públicos en el bloque return.

miModulo = (function() {

  function metodoA() { };

  function metodoB() { };

  function metodoC() { };

  // API publica
  return {
    metodoPublico1: metodoA,
    metodoPublico2: metodoB
  }
}());

4.14 Espacios de nombres

• Para simular espacios de nombres, en JavaScript se anidan objetos.

miBiblioteca = miBiblioteca || {};

miBiblioteca.seccion1 = miBiblioteca.seccion1 || {};

miBiblioteca.seccion1 = {
  priopiedad: p1,
  metodo: function() { },
};

miBiblioteca.seccion2 = miBiblioteca.seccion2 || {};

miBiblioteca.seccion2 = {
  priopiedad: p2,
  metodo: function() { },
};

• Se puede combinar lo anterior con módulos autoejecutables:

miBiblioteca = miBiblioteca || {};

(function(namespace) {

  var propiedadPrivada = p1;

  namespace.propiedadPublica = p2;

  var metodoPrivado = function() { };

  namespace.metodoPublico = function() { };

}(miBiblioteca));

5 Document Object Model

5.1 ¿Qué es DOM?

• Acrónimo de Document Object Model
• Es un conjunto de utilidades específicamente diseñadas para manipular documentos XML, y por extensión documentos XHTML y HTML.
• DOM transforma internamente el archivo XML en una estructura más fácil de manejar formada por una jerarquía de nodos.

5.2 Tipos de nodos

• Los más importantes son:
  • Document: representa el nodo raíz.
  • Element: representa el contenido definido por un par de etiquetas de apertura y cierre y puede tener tanto nodos hijos como atributos.
  • Attr: representa el atrributo de un elemento.
  • Text: almacena el contenido del texto que se encuentra entre una etiqueta de apertura y una de cierre.

5.3 Recorrer el DOM

• JavaScript proporciona funciones para recorrer los nodos:

getElementById(id)
getElementsByName(name)
getElementsByTagName(tagname)
getElementsByClassName(className)
getAttribute(attributeName)
querySelector(selector)
querySelectorAll(selector)

5.4 Manipular el DOM

• JavaScript proporciona funciones para la manipulación de nodos:

createElement(tagName)
createTextNode(text)
createAttribute(attributeName)
appendChild(node)
insertBefore(newElement, targetElement)
removeAttribute(attributename)
removeChild(childreference)
replaceChild(newChild, oldChild)

5.5 Propiedades Nodos

• Los nodos tienen algunas propiedades muy útiles:

attributes[]
className
id
innerHTML
nodeName
nodeValue
style
tabIndex
tagName
title

• Los nodos tienen algunas propiedades muy útiles:

childNodes[]
firstChild
lastChild
previousSibling
nextSibling
ownerDocument
parentNode

6 Librerías y Frameworks

6.1 jQuery

• jQuery: libreria que reduce código ("write less, do more").

// Vanilla JavaScript
var elem = document.getElementById("miElemento");

//jQuery
var elem = $("#miElemento");  

6.2 jQuery UI & Mobile

• jQuery UI: diseño interfaces gráficas.

• jQuery Mobile: versión adaptada para móviles (eventos y tamaño).

6.3 Frameworks CSS

• Bootstrap y Foundation.

• Fácil maquetación, sistema rejilla, clases CSS, temas, etc.

6.4 MVC en el front

• BackboneJS: ligero y flexible.

• EmberJS: "Convention over Configuration", muy popular entre desarrolladores Ruby on Rails.

• AngularJS extiende etiquetas HML (g-app, ng-controller, ng-model, ng-view), detrás está Google, tiene gran popularidad, abrupta curva de aprendizaje.

6.5 NodeJS

• NodeJS permite ejecutar JS fuera del navegador.

• Viene con su propio gestor de paquetes: npm

6.6 Automatización de tareas

• GruntJS: más popularidad y más plugins.

• GulpJS: más rápido tanto al escribir ("Code over Configure") como al ejecutar (streams).

6.7 Gestión de dependencias

• Bower: para el lado cliente. Puede trabajar con repositorios Git.

• Browserify: permite escribir módulos como en NodeJS y compilarlos para que se puedan usar en el navegador.

• RequeriJS: las dependencias se cargan de forma asíncrona y solo cuando se necesitam.

• WebPack: es un empaquetador de módulos

6.8 Aplicaciones de escritorio multiplataforma

• AppJS, y su fork DeskShell: los más antiguos, un poco abandonados.

• NW.js: opción más popular y madura hoy en día.

• Electron: creada para el editor Atom de GitHub: está creciendo en popularidad.

6.9 Aplicaciones móviles híbridas

• cordova: una de los primeros. Hoy en día, otros frameworks se basan en él.

• ionic: utiliza AngularJS, tiene una CLI, muy popular.

• React Native: recién liberado por facebook.

6.10 WebComponents

• WebComponents es una especificación de la W3C para permitir crear componentes y reutilizarlos.

• polymer: proyecto de Google para poder empezar a usar los WebComponents en todos los navegadores.

6.11 Otros

• React: librería hecho por Facebook para crear interfaces que se renderizan muy rápido, ya sea en cliente o servidor.

• Flux: framework hecho por Facebook que utiliza React.

• Meteor: es una plataforma que permite desarrollar aplicaciones real-time con JS Isomófico (se ejecuta en front y back)

7 Eventos

7.1 El patrón PubSub

var EventBus = {
  topics: {},

  subscribe: function(topic, listener) {
    if (!this.topics[topic]) this.topics[topic] = [];
    this.topics[topic].push(listener);
  },

  publish: function(topic, data) {
    if (!this.topics[topic] || this.topics[topic].length < 1) return;
    this.topics[topic].forEach(function(listener) {
      listener(data || {});
    });
  }
};

EventBus.subscribe('foo', alert);
EventBus.publish('foo', 'Hello World!');

var Mailer = function() {
  EventBus.subscribe('order/new', this.sendPurchaseEmail);
};

Mailer.prototype = {
  sendPurchaseEmail: function(userEmail) {
    console.log("Sent email to " + userEmail);
  }
};

var Order = function(params) {
  this.params = params;
};

Order.prototype = {
  saveOrder: function() {
    EventBus.publish('order/new', this.params.userEmail);
  }
};

var mailer = new Mailer();
var order = new Order({userEmail: 'john@gmail.com'});
order.saveOrder();
"Sent email to john@gmail.com"

7.2 Principales eventos

7.3 Suscripción

• Para añadir o eliminar un Listener de un evento a un elemento:

var windowOnLoad = function(e) {
  console.log('window:load', e);
};

window.addEventListener('load', windowOnLoad);

window.removeEventListener('load', windowOnLoad);

7.4 Eventos personalizados

• Podemos crear eventos personalizados:

var event = new Event('build');

elem.addEventListener('build', function (e) { ... }, false);

• Podemos crear eventos personalizados con datos:

var event = new CustomEvent('build', { 'detail': detail });

elem.addEventListener('build', function (e)  {
  log('The time is: ' + e.detail);
}, false);

7.5 Disparar un evento

• Podemos disparar eventos:

function simulateClick() {
  var event = new MouseEvent('click');
  var element = document.getElementById('id');
  element.dispatchEvent(event);
}

7.6 Propagación

               1              2
              | |            / \
+-------------| |------------| |-------------+
| DIV1        | |            | |             |
|   +---------| |------------| |---------+   |
|   | DIV2    | |            | |         |   |
|   |   +-----| |------------| |-----+   |   |
|   |   | A   \ /            | |     |   |   |
|   |   +----------------------------+   |   |
|   +------------------------------------+   |
|           FASE DE        FASE DE           |
|           CAPTURA        BURBUJA           |
|          DE EVENTOS     DE EVENTOS         |
+--------------------------------------------+

// en fase de CAPTURA
addEventListener("eventName",callback, true);

// en fase de BURBUJA
addEventListener("eventName",callback, false); // por defecto

// detiene la propagación del evento
event.stopPropagation();

// elimina las acciones por defecto (ejemplo: abrir enlace)
event.preventDefault();

8 WebSockets

8.1 ¿Qué son los WebSockets?

• Nos permiten comunicación bidireccional entre cliente y servidor.

8.2 Socket.IO

• Librería cliente y servidor (NodeJS) para utilizar WebSockets:

• Simplifica la API.
• Permite envíar no sólo texto.
• Permite crear eventos propios.

• Permite utilizar navegadores sin soporte de WebSockets.

9 AJAX

9.1 ¿Qué es AJAX?

• Acrónimo de Asynchronous JavaScript And XML.
• Técnica para crear aplicaciones web interactivas o RIA (Rich Internet Applications).
• Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios.
• Mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.
• De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas.

9.2 Tecnologías AJAX

• AJAX no es una tecnología en sí misma, en realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes.

• Las tecnologías que forman AJAX son:
  • XHTML y CSS, como estándares de presentación.
  • DOM, para la manipulación dinámica de la presentación.
  • XML, JSON y otros, para la la manipulación de información.
  • XMLHttpRequest, para el intercambio asíncrono de información.
  • JavaScript, para unir todas las demás tecnologías.

9.3 ¿Qué es el XMLHttpRequest?

• El intercambio de datos AJAX entre cliente y servidor se hace mediante el objeto XMLHttpRequest, disponible en los navegadores actuales.

• No es necesario que el contenido esté formateado en XML.

• Su manejo puede llegar a ser complejo, aunque librerías como jQuery facilitan enormemente su uso.

9.4 Ejemplo

var http_request = new XMLHttpRequest();
var url = "http://example.net/jsondata.php";

// Descarga los datos JSON del servidor.
http_request.onreadystatechange = handle_json;
http_request.open("GET", url, true);
http_request.send(null);

function handle_json() {
  if (http_request.status == 200) {
    var json_data = http_request.responseText;
    var the_object = eval("(" + json_data + ")");
  } else {
    alert("Ocurrio un problema con la URL.");
  }
}

10 JSON

10.1 ¿Qué es JSON?

• Acrónimo de JavaScript Object Notation.
• Es un subconjunto de la notación literal de objetos de JavaScript.
• Sirve como formato ligero para el intercambio de datos.
• Su simplicidad ha generalizado su uso, especialmente como alternativa a XML en AJAX.
• En JavaScript, un texto JSON se puede analizar fácilmente usando la función eval().

10.2 Parse

miObjeto = eval('(' + json_datos + ')');

• Eval es muy rápido, pero como compila y ejecuta cualquier código JavaScript, las consideraciones de seguridad recomiendan no usarlo.

• Lo recomendable usar las librerías de JSON.org:
  • JSON in JavaScript - Explanation
  • JSON in JavaScript - Downloads

10.3 Ejemplo

{
    curso: "AJAX y jQuery",
    profesor: "Adolfo",
    participantes: [
        { nombre: "Isabel", edad: 35 },
        { nombre: "Alba", edad: 15 },
        { nombre: "Laura", edad: 10 }
    ]
}

10.4 JSONP

• Por seguridad XMLHttpRequest sólo puede realizar peticiones al mismo dominio.

• JSONP envuelve el JSON en una función definida por el cliente.

• Esto nos permite hacer peticiones GET (sólo GET) a dominios distintos.

10.5 CORS

• Protocolo Cross-Origin Resource Sharing (Compartición de recursos de distintos orígenes).

• Realizar peticiones a otros dominios siempre y cuando el dominio de destino esté de acuerdo en recibir peticiones del dominio de origen.

• Tanto navegador como servidor tienen que implementar el protocolo.

• Desde el servidor, se envía en cabecera:

Access-Control-Allow-Origin: http://dominio-permitido.com

11 APIs REST

11.1 ¿Qué es un API REST?

• REST (Representational State Transfer) es una técnica de arquitectura software para sistemas hipermedia distribuidos como la World Wide Web.

• Es decir, una URL (Uniform Resource Locator) representa un recurso al que se puede acceder o modificar mediante los métodos del protocolo HTTP (POST, GET, PUT, DELETE).

11.2 ¿Por qué REST?

• Es más sencillo (tanto la API como la implementación).
• Es más rápido (peticiones más ligeras que se puede cachear).
• Es multiformato (HTML, XML, JSON, etc.).
• Se complementa muy bien con AJAX.

11.3 Ejemplo API

• GET a http://myhost.com/person
  • Devuelve todas las personas
• POST a http://myhost.com/person
  • Crear una nueva persona
• GET a http://myhost.com/person/123
  • Devuelve la persona con id=123
• PUT a http://myhost.com/person/123
  • Actualiza la persona con id=123
• DELETE a http://myhost.com/person/123
  • Borra la persona con id=123

11.4 Errores HTTP

• 200 OK
• 201 Created
• 202 Accepted
• 301 Moved Permanently
• 400 Bad Request
• 401 Unauthorised
• 402 Payment Required
• 403 Forbidden
• 404 Not Found
• 405 Method Not Allowed
• 500 Internal Server Error
• 501 Not Implemented

12 Gestión de dependencias

12.1 AMD

• Definición de Módulos Asíncronos (AMD)

• La implementación más popular de este estándar es RequireJS.

• Sintaxis un poco complicada.

• Permite la carga de módulos de forma asíncrona.

• Se usa principalmente en navegadores.

12.2 RequireJS

• index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page 1</title>
        <script data-main="js/index" src="js/lib/require.js"></script>
    </head>
    <body>
        <h1>Hola Mundo</h1>
    </body>
</html>

• js/index.js

requirejs(['./common'], function (common) {
    requirejs(['app/main']);
});

• app/main.js

define(function (require) {
    var $ = require('jquery');
    var persona = require('./persona');

    $('h1').html("Hola requery.js");

    var p = new persona("Adolfo", 30);
    p.saludar();
});

• app/persona.js

define(function () {

  var Persona = function(nombre, edad) {

      this.nombre = nombre;

      Persona.prototype.saludar = function() {
          alert("Hola, mi nombre es " + this.nombre);
      };
  }

  return Persona;
});

12.3 CommonJS

• La implementación usada en NodeJS y Browserify.

• Sintaxis sencilla.

• Carga los módulos de forma síncrona.

• Se usa principalmente en el servidor.

12.4 Browserify

• Instalar browserify

npm install -g browserify

• Instalar dependencias de package.json

npm install

• package.json

{
  "name": "browserify-example",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "^2.1.3"
  }
}

• Compilar las dependencias a bundle.js

browserify js/main.js -o js/bundle.js

• index.html

<!doctype html>
<html>
  <head>
    <title>Browserify Playground</title>
  </head>
  <body>
    <h1>Hola Mundo</h1>
    <script src="js/bundle.js"></script>
  </body>
</html>

• js/app/main.js

var $ = require('jquery');
var persona = require('./persona');

$('h1').html('Hola Browserify');

var p = new persona("Adolfo", 30);
p.saludar();

• js/app/persona.js

var Persona = function(nombre, edad) {

    this.nombre = nombre;

    Persona.prototype.saludar = function() {
        alert("Hola, mi nombre es " + this.nombre);
    };
}

module.exports = Persona;

12.5 ECMAScript 6

• Coje lo mejor de los 2 enfoques:

  • Similitudes con CommonJS: sintaxis sencilla.
  • Similitudes con AMD: soporte para carga asíncrona.

13 ES6

13.1 Como usarlo hoy

• Babel nos permite utilizar ES6 hoy en día.

13.2 Función Arrow

// ES5
var data = [{...}, {...}, {...}, ...];  
data.forEach(function(elem){  
    console.log(elem)
});

13.3 Función Arrow

//ES6
var data = [{...}, {...}, {...}, ...];  
data.forEach(elem => {  
    console.log(elem);
});

// ES5
var miFuncion = function(num1, num2) {  
    return num1 + num2;
}

// ES6
var miFuncion = (num1, num2) => num1 + num2;  

13.4 This

//ES5
var objEJ5 = {
  data : ["Adolfo", "Isabel", "Alba"],
  duplicar : function() {
    var that = this;
    this.data.forEach(function(elem){
        that.data.push(elem);
    });
    return this.data;
  }
}

//ES6
var objEJ6 = {
  data : ["Adolfo", "Isabel", "Alba"],
  duplicar : function() {
    this.data.forEach((elem) => {
        this.data.push(elem);
    });
    return this.data;
  }
}

13.5 Definición de Clases

//ES5
var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
};
Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

//ES6
class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

13.6 Herencia de Clases

//ES5
var Rectangle = function (id, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width  = width;
    this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var Circle = function (id, x, y, radius) {
    Shape.call(this, id, x, y);
    this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

//ES6
class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        this.width  = width
        this.height = height
    }
}
class Circle extends Shape {
    constructor (id, x, y, radius) {
        super(id, x, y)
        this.radius = radius
    }
}

13.7 let

//ES5
(function() {
    console.log(x); // x no está definida aún.
    if(true) {
        var x = "hola mundo";
    }
    console.log(x);
    // Imprime "hola mundo", porque "var"
    // hace que sea global a la función;
})();

//ES6
(function() {
    if(true) {
        let x = "hola mundo";
    }
    console.log(x);
    //Da error, porque "x" ha sido definida dentro del "if"
})();

13.8 Scopes

//ES5
(function () {
    var foo = function () { return 1; }
    foo() === 1;
    (function () {
        var foo = function () { return 2; }
        foo() === 2;
    })();
    foo() === 1;
})();

//ES6
{
    function foo () { return 1 }
    foo() === 1
    {
        function foo () { return 2 }
        foo() === 2
    }
    foo() === 1
}

13.9 const

//ES6
(function() {
    const PI;
    PI = 3.15;
    // ERROR, porque ha de asignarse un valor en la declaración
})();

//ES6
(function() {
    const PI = 3.15;
    PI = 3.14159;
    // ERROR de nuevo, porque es de sólo-lectura
})();

13.10 Template Strings

//ES6
let nombre1 = "JavaScript";  
let nombre2 = "awesome";  
console.log(`Sólo quiero decir que ${nombre1} is ${nombre2}`);  
// Solo quiero decir que JavaScript is awesome

//ES5
var saludo = "ola " +  
"que " +
"ase ";

//ES6
var saludo = `ola  
que  
ase`;

13.11 Destructuring

//ES6
var [a, b] = ["hola", "mundo"];  
console.log(a); // "hola"  
console.log(b); // "mundo"

//ES6
var obj = { nombre: "Adolfo", apellido: "Sanz" };  
var { nombre, apellido } = obj;  
console.log(nombre); // "Adolfo"  
console.log(apellido); // "Sanz"  

//ES6
var foo = function() {  
    return ["180", "78"];
};
var [estatura, peso] = foo();  
console.log(estatura); //180
console.log(peso); //78

13.12 Parámetros con nombre

//ES5
function f (arg) {
    var name = arg[0];
    var val  = arg[1];
    console.log(name, val);
};
function g (arg) {
    var n = arg.name;
    var v = arg.val;
    console.log(n, v);
};
function h (arg) {
    var name = arg.name;
    var val  = arg.val;
    console.log(name, val);
};
f([ "bar", 42 ]);
g({ name: "foo", val:  7 });
h({ name: "bar", val: 42 });

//ES6
function f ([ name, val ]) {
    console.log(name, val)
}
function g ({ name: n, val: v }) {
    console.log(n, v)
}
function h ({ name, val }) {
    console.log(name, val)
}
f([ "bar", 42 ])
g({ name: "foo", val:  7 })
h({ name: "bar", val: 42 })

13.13 Resto parámetros

//ES5
function f (x, y) {
    var a = Array.prototype.slice.call(arguments, 2);
    return (x + y) * a.length;
};
f(1, 2, "hello", true, 7) === 9;

//ES6
function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, "hello", true, 7) === 9

13.14 Valores por defecto

//ES5
function(valor) {  
    valor = valor || "foo";
}

13.15 Valores por defecto

//ES6
function(valor = "foo") {...};  

13.16 Exportar módulos

//ES6

// lib/math.js
export function sum (x, y) { return x + y }
export function div (x, y) { return x / y }
export var pi = 3.141593

13.17 Importar módulos

//ES6

// someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

// otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))

13.18 Generadores

//ES6
function *soyUnGenerador(i) {  
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

var gen = soyUnGenerador(1);  
console.log(gen.next());  
//  Object {value: 2, done: false}
console.log(gen.next());  
//  Object {value: 3, done: false}
console.log(gen.next());  
//  Object {value: 4, done: false}
console.log(gen.next());  
//  Object {value: undefined, done: true}

13.19 Set

//ES6
let s = new Set()
s.add("hello").add("goodbye").add("hello")
s.size === 2
s.has("hello") === true
for (let key of s.values()) { // insertion order
  console.log(key)
}

13.20 Map

//ES6
let m = new Map()
m.set("hello", 42)
m.set(s, 34)
m.get(s) === 34
m.size === 2
for (let [ key, val ] of m.entries()) {
  console.log(key + " = " + val)
}

13.21 Nuevos métodos en String

//ES6
"hello".startsWith("ello", 1) // true
"hello".endsWith("hell", 4)   // true
"hello".includes("ell")       // true
"hello".includes("ell", 1)    // true
"hello".includes("ell", 2)    // false

13.22 Nuevos métodos en Number

//ES6
Number.isNaN(42) === false
Number.isNaN(NaN) === true
Number.isSafeInteger(42) === true
Number.isSafeInteger(9007199254740992) === false

13.23 Proxies

//ES6
let target = {
    foo: "Welcome, foo"
}
let proxy = new Proxy(target, {
    get (receiver, name) {
        return name in receiver ? receiver[name] : `Hello, ${name}`
    }
})
proxy.foo   === "Welcome, foo"
proxy.world === "Hello, world"

13.24 Internacionalization

//ES6
var i10nUSD = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
var i10nGBP = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" })
i10nUSD.format(100200300.40) === "$100,200,300.40"
i10nGBP.format(100200300.40) === "£100,200,300.40"

//ES6
var i10nEN = new Intl.DateTimeFormat("en-US")
var i10nDE = new Intl.DateTimeFormat("de-DE")
i10nEN.format(new Date("2015-01-02")) === "1/2/2015"
i10nDE.format(new Date("2015-01-02")) === "2.1.2015"

13.25 Promesas

//ES6
var promise = new Promise(function(resolve, reject) {

  var todoCorrecto = true; // o false dependiendo de como ha ido

  if (todoCorrecto) {
    resolve("Promesa Resuelta!");
  } else {
    reject("Promesa Rechazada!");
  }
});

//ES6

// llamamos el metodo 'then' de la promesa
// con 2 callbacks (resolve y reject)
promise.then(function(result) {
  console.log(result); // "Promesa Resuelta!"
}, function(err) {
  console.log(err); // Error: "Promesa Rechazada!"
});

//ES6

// podemos también llamar al 'then' con el callback 'resolve'
// y luego al 'catch' con el callback 'reject'
promise.then(function(result) {
  console.log(result); // "Promesa Resuelta!"
}).catch(function(err) {
  console.log(err); // Error: "Promesa Rechazada!"
});

//ES6

Promise.all([promesa1,promesa2]).then(function(results) {
  console.log(results); // cuando todas las promesas terminen
}).catch(function(err) {
  console.log(err); // Error: "Error en alguna promesa!"
});

//ES6

Promise.race([promesa1,promesa2]).then(function(firstResult) {
  console.log(firstResult); // cuando termine la primera
}).catch(function(err) {
  console.log(err); // Error: "Error en alguna promesa!"
});

14 Enlaces

14.1 General (ES)

• http://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5
• http://cevichejs.com/
• http://www.arkaitzgarro.com/javascript/
• http://www.etnassoft.com/category/javascript/

14.2 General (EN)

• http://www.javascriptkit.com/
• http://javascript.info/
• http://www.howtocreate.co.uk/tutorials/javascript/

14.3 Orientación Objetos (ES)

• http://www.programania.net/diseno-de-software/entendiendo-los-prototipos-en-javascript/
• http://www.programania.net/diseno-de-software/creacion-de-objetos-eficiente-en-javascript/

• http://blog.amatiasq.com/2012/01/javascript-conceptos-basicos-herencia-por-prototipos/

• http://albertovilches.com/profundizando-en-javascript-parte-1-funciones-para-todo
• http://albertovilches.com/profundizando-en-javascript-parte-2-objetos-prototipos-herencia-y-namespaces
• http://www.arkaitzgarro.com/javascript/capitulo-9.html

• http://www.etnassoft.com/2011/04/15/concepto-de-herencia-prototipica-en-javascript/

14.4 Orientación Objetos (EN)

• http://www.codeproject.com/Articles/687093/Understanding-JavaScript-Object-Creation-Patterns
• http://javascript.info/tutorial/object-oriented-programming
• http://www.howtocreate.co.uk/tutorials/javascript/objects

14.5 Técnicas avanzadas (ES)

• http://www.etnassoft.com/2011/03/14/funciones-autoejecutables-en-javascript/
• http://www.etnassoft.com/2012/01/12/el-valor-de-this-en-javascript-como-manejarlo-correctamente/
• https://developer.mozilla.org/es/docs/Web/JavaScript/Closures

• http://www.variablenotfound.com/2012/10/closures-en-javascript-entiendelos-de.html

• http://www.webanalyst.es/espacios-de-nombres-en-javascript/
• http://www.etnassoft.com/2011/04/11/el-patron-de-modulo-en-javascript-en-profundidad/
• http://www.etnassoft.com/2011/04/18/ampliando-patron-modulo-javascript-submodulos/

• http://notasjs.blogspot.com.es/2012/04/el-patron-modulo-en-javascript.html

14.6 DOM (ES)

• http://cevichejs.com/3-dom-cssom#dom
• http://www.arkaitzgarro.com/javascript/capitulo-13.html

14.7 DOM (EN)

• http://www.javascriptkit.com/domref/
• http://javascript.info/tutorial/dom

14.8 Frameworks (ES)

• https://carlosazaustre.es/blog/frameworks-de-javascript/
• https://docs.google.com/drawings/d/1bhe9-kxhhGvWU0LsB7LlJfMurP3DGCIuUOmqEOklzaQ/edit
• http://www.lostiemposcambian.com/blog/javascript/backbone-vs-angular-vs-ember/
• http://blog.koalite.com/2015/06/grunt-o-gulp-que-uso/

14.9 Frameworks (EN)

• http://www.slideshare.net/deepusnath/javascript-frameworks-comparison-angular-knockout-ember-and-backbone
• http://stackshare.io/stackups/backbone-vs-emberjs-vs-angularjs
• http://www.hongkiat.com/blog/gulp-vs-grunt/
• https://mattdesl.svbtle.com/browserify-vs-webpack
• http://hackhat.com/p/110/module-loader-webpack-vs-requirejs-vs-browserify/
• http://devzum.com/2014/02/10-best-node-js-mvc-frameworks-for-javascript-developers/
• http://www.tivix.com/blog/nwjs-and-electronjs-web-technology-desktop/
• http://stackshare.io/stackups/phonegap-vs-ionic-vs-react-native
• https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options

14.10 Eventos (ES)

• http://cevichejs.com/3-dom-cssom#eventos
• http://www.arkaitzgarro.com/javascript/capitulo-15.html
• http://codexexempla.org/curso/curso_4_3_e.php

14.11 Eventos (EN)

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
• https://developer.mozilla.org/en-US/docs/Web/API/Event
• http://dev.housetrip.com/2014/09/15/decoupling-javascript-apps-using-pub-sub-pattern/
• https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault

14.12 WebSockets (ES)

• http://www.html5rocks.com/es/tutorials/websockets/basics/
• https://carlosazaustre.es/blog/websockets-como-utilizar-socket-io-en-tu-aplicacion-web/

14.13 WebSockets (EN)

• https://davidwalsh.name/websocket
• http://code.tutsplus.com/tutorials/start-using-html5-websockets-today--net-13270

14.14 AJAX, JSON, REST (ES)

• https://fernetjs.com/2012/09/jsonp-cors-y-como-los-soportamos-desde-nodejs/
• http://blog.koalite.com/2012/03/sopa-de-siglas-ajax-json-jsonp-y-cors/
• https://eamodeorubio.wordpress.com/category/webservices/rest/
• https://eamodeorubio.wordpress.com/category/webservices/rest/

14.15 ES6 (ES)

• http://rlbisbe.net/2014/08/26/articulo-invitado-ecmascript-6-y-la-nueva-era-de-javascript-por-ckgrafico/
• http://carlosazaustre.es/blog/ecmascript-6-el-nuevo-estandar-de-javascript/
• http://asanzdiego.blogspot.com.es/2015/06/principios-solid-con-ecmascript-6-el-nuevo-estandar-de-javascript.html
• http://www.cristalab.com/tutoriales/uso-de-modulos-en-javascript-con-ecmascript-6-c114342l/
• https://burabure.github.io/tut-ES6-promises-generators/

14.16 ES6 (EN)

• http://es6-features.org/
• http://kangax.github.io/compat-table/es5/
• http://www.2ality.com/2015/11/sequential-execution.html
• http://www.html5rocks.com/en/tutorials/es6/promises/
• http://www.datchley.name/es6-promises/