Menu

Clase 2 - Fundamentos de Ionic 2.

classionic2 - January 05, 2017 por Carlos Rojas
ionic2.0.0-rc.3ionic-native2.2.3

Hola Ioners!!!

Esta es la Clase 2 en este viaje para construir tu primera App en Ionic 2. Espero que estes comodo porque Esta clase trae una gran cantidad de nuevas cosas que vas a necesitar para entender Ionic 2, pero no te preocupes porque vas a encontrarlas utiles despues cuando tu continues creando increibles vistas y logica en tu App.

ECMAScript 6

Javascript is the cornerstone in the world of Hybrid Apps. Angular 2 is built on top of ECMAScript 6. ECMAScript 6 is the specification of Javascript to be used in all the WEB in the next years. EC6 bring interesting stuff.

Javascript es la piedra angular en el mundo de las Hybrid Apps. Angular 2 esta construido sobre ECMASCript 6. ECMASCript 6 es la nueva especificacion de Javascript para ser usada en toda la WEB en los proximos años. EC6 trae interesantes cosas.

Nuevas Caracteristicas

Clases

javascript ES 5 no tiene el concepto de Clases que es un paradigma usado en desarrollo en otros lenguajes como C#, Java, Objetive-C. Pero ahora nosotros vamos a poder usar estas caracteristicas en Javascript facilmente.

ES6 (Ahora)
class Person {
  name;
  age;

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

  getName(){
    return this.name;
  }
}
ES5 (Antés)
var Person = function (name, age) {
    this.name = name;
    this.age = age;
};

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

Modulos

Ahora nosotros escribimos y podemos importar nuestras librerias sin mucho trabajo.

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));
EC5 (Antés)
//  lib/math.js
LibMath = {};
LibMath.multiply = function (x, y) { return x * y };

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

Promesas

Las promesas son una excelente forma de hacer peticiones asincronas, en otras palabras preguntar a servidores por datos. Ahora es integrado en Javascript para que lo puedas integrar facilmente.

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);
})

let y const

Ahora podemos integrar el alcance de las variables sin usa funciones de autoinvocacion.

ES6 (Ahora)
const PI = 3.14;
if(true) {
  let twitter = "@ion_book";
}
console.log(twitter); //Error. twitter is out of the scope.
console.log(PI); //3.14

PI = 3.12; //Error. PI is Constant.
ES5 (Antes)
if(true) {
  var twitter = "@startupersio";
}
console.log(twitter); //twitter is global

Lo importante a entender ahora es que vamos a poder utilizar estas nuevas caracteristicas en Ionic 2.

TypeScript

TypScript es un superset de Javascript que te agrega mas caracteristicas como tipos estaticos, clases e interfaces.

Por ejemplo:

Tipos
// Only string permitted.

let alert = (msg: string) => {
  alert(msg);
}
Interfaces
interface Shoe {
  brand: string,
  size: number,
  isCasual: boolean
}

Ok, lo importante a enteder aqui es que vamos a tener mas caracteristicas gracias a TypeScript.

Transpilación

Transpilación es el proceso de convertir un lenguaje a otro, esto es importante de entender porque ES6 no esta completamente soportado por los navegadores aun. pero no es importante por que podemos utilizar esta nueva herramienta para convertir codigo de ES6 a ES5 para usar las nuevas caracteristicas en el lenguaje que todos los navegadores entienden ya.

Cuando estas usando Ionic 2 tu no tienes que preocuparte por esto. Ionic CLI maneja todos estos procesos por ti.

Angular 2

Si recuerdas la primer clase nosotros mencionamos que la gran diferenca entre Ionic 1 e Ionic 2 es que tu necesitas usar Angular 2 para escribir la logica de tu App en Ionic 2.

Algunos ejemplos:

Actualizamos la propiedad value con el resultado de la expresion firstName.
<input [value]="firstName">
Actualizamos el texto contenido en ponyName, por ejemplo, “Hello seabiscuit”.
<p> Hello {{ ponyName }} </p>

Lo importante aqui es que necesitaras recordar que tu vas a usar Angular 2 todo el tiempo con tus nuevas Apps en Ionic 2.

es todo por ahora, mientras tanto puedes leer estos articulos.

Angular 2 Intro

Angular 2 Series

Angular 2 Cheatsheet


¿Quieres saber más? Suscríbete a nuestro Newsletter o únete a nuestro canal en Slack y mantente atento. Espero sea de utilidad y sigan programando :)

Por: Carlos Rojas

¡Compártelo!

Nunca te pierdas una Noticia.