Menu

ES6 & Ionic 2

tipsionic2 - July 26, 2016 por Nicolas Molina

El gran impacto que ha tenido javascript ha sido sorprendente y ha crecido de una manera muy significativa, podemos ver ahora javascript en cualquier parte, como lenguaje backend con node, podemos controlar robots con nodebots, en frontend con miles de proyectos y también hacer aplicaciones móviles y ahora tenemos una de las más recientes actualizaciones al lenguaje ES6 y podemos aprovechar todas estas ventajas en Ionic 2.

Principales características

Clases


Javascript es (o era) un lenguaje orientado a prototipos el concepto de clases no existía, pero ahora podemos hacer uso de un estilo de programación orientada a objetos definiendo clases de esta manera:

ES6 (Ahora):

class Person {
  name;
  age;

  constructor (name, age) {
    this.name = name;
    this.age = age;
  }

  getName(){
    return this.name;
  }
}

ES5 (Antes):

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.getName = function () {
    return this.name;
};

Esto es muy parecido a lenguajes como Java, Python, C# e inclusive PHP que tiene la opción de crear clases.

Módulos


Ahora podemos crear módulos específicos sin la necesidad de tantos namespaces para cada librería.

ES6 (Ahora):

//  lib/math.js
export function multiply (x, y) { return x * y }

//  someApp.js
import { multiply } from "./lib/math"
console.log(multiply(2, 2));

ES5 (Antes):

//  lib/math.js
LibMath = {};
LibMath.multiply = function (x, y) { return x * y };

//  someApp.js
var math = LibMath;
console.log(math.multiply(2, 2));

Promesas


Ahora el uso de promesas es nativo en el lenguaje y evitando tener tantos callbacks.

ES6 (Ahora):

doSomething(){
   return new Promise((resolve) =>{
     resolve(true);
   })
}

doSomething().then(rta => {
  console.log(rta);
});

ES5 (Antes):

function doSomething (onDone) {
  onDone();
}

doSomething(function(rta){
  console.log(rta);
})

Lo cual nos evitaría tener el uso excesivo de callbacks:

ES6 (Ahora):

doSomething()
.then((rta) => {
  console.log(rta);
})
.then((rta) => {
  console.log(rta);
})
.catch((error) => {
  console.log(error);
})

ES5 (Antes):

doSomething(function(rtaA){
  b(rtaA, function(rtaB){
    c(rtaB, function(rtaC){
      d(rtaC, function(rtaD){
        console.log(rtaD);
      })
    })
  })
})

let y const


Ahora con let podemos tener mejor control del ámbito global de nuestras variables sin tener que hacer funciones que se auto invoquen para proteger el scope y el uso de const podemos definir constantes.

ES6 (Ahora):

const PI = 3.14;
if(true) {
  let twitter = "@nicobytes";
}
console.log(twitter); //Error porque twitter ha sido definida dentro de IF
console.log(PI); //3.14

PI = 3.12; //Error porque PI es un constante y no puede cambiar de valor una vez definida.

ES5 (Antes):

if(true) {
  var twitter = "@nicobytes";
}
console.log(twitter); //twitter es global
//Const no existe en ES5

Arrow Functions


Podemos manejar funciones y enviarlas es mucho más fácil y cuando trabajamos con objetos no es necesario guardar la referencia del objeto para luego acceder a él.

ES6 (Ahora):

let numbers = [1,2,3,4];
numbers.map(item => item * 2); //[2,4,6,8]

class Person(){
  foo(){}
  bar(){
    document.addEventListener("click", (e) => this.foo());
  } 
}

ES5 (Antes):

var numbers = [1,2,3,4];
numbers.map(function(item){
  return item * 2;
}); //[2,4,6,8]

function Person(){
  this.foo = function(){}
  this.bar = function(){
    var self = this;
    document.addEventListener("click", function(e){
      self.foo();
    });
  }
}

Template Strings


Podemos concatenar un string de manera mucho más fácil y tener saltos de línea.

ES6 (Ahora):

let name = 'Nicolas';
let twitter = '@nicobytes';

console.log(`Mi nombre es ${name} y mi twitter es ${twitter}`);
let template = `<div>
  <h1>${name}</h1>
</div>`;

ES5 (Antes):

var name = 'Nicolas';
var twitter = '@nicobytes';

console.log('Mi nombre es ' + name + ' y mi twitter es ' + twiiter);
let template = '<div>' +
  '<h1>' + name  + '</h1>' +
'</div>';

Transpiling

También debemos hablar sobre transpiling, es la forma que actualmente podemos usar todas las ventajas de ES6 sobre proyecto actuales ya que ES6 no ha sido implementado en todos los navegadores como un estándar tenemos que usar un traspilador para poder usar estos beneficios, por ahora los trasnpiladores más comunes son babel y typescript. Y en nuestro caso usaremos typescript que es el transpilador por defecto de angular 2 y ionic 2

Puedes revisar más ventajas desde aquí:

ES6 Features

¡Compártelo!