Menu

Clase 2 - Fundamentos de Ionic

classionic2 - June 21, 2017 por Carlos Rojas
ionic3.3.0ionic-app-scripts1.3.7cordova-cli7.0.0ionic-cli3.4.0

!Hola Ioners!

Esta es la Clase 2 en este viaje para construir tu primera App en Ionic. Espero que estes comodo porque esta clase trae una gran cantidad de nuevas cosas que vas a necesitar para entender Ionic, pero no te preocupes porque vas a encontrarlas útiles después cuando tú continúas creando increíbles vistas y lógica en tu App.

ECMAScript 6

Javascript es la piedra angular en el mundo de las Hybrid Apps. Angular está construido sobre ECMASCript 6. ECMASCript 6 es la nueva especificación de Javascript para ser usada en toda la WEB en los próximos 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;
};

Modúlos

Ahora nosotros escribimos y podemos importar nuestras librerías 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));

ES5 (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 asíncronas, en otras palabras preguntar a servidores por datos. Ahora es integrado en Javascript para que lo puedas integrar fácilmente.

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 usar funciones de auto invocación.

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.

TypeScript

Lo importante a entender ahora es que vamos a poder utilizar estas nuevas características en Ionic.

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 entender aquí es que vamos a tener más 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 está completamente soportado por los navegadores aún. pero no es importante porque podemos utilizar esta nueva herramienta para convertir código de ES6 a ES5 para usar las nuevas características en el lenguaje que todos los navegadores entienden ya.

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

Angular

Si recuerdas la primer clase nosotros mencionamos que la gran diferencia entre Ionic 1 e Ionic es que tu necesitas usar la nueva versión Angular para escribir la lógica de tu App en Ionic.

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 aquí es que necesitarás recordar que tu vas a usar Angular todo el tiempo con tus nuevas Apps en Ionic.

¡Compártelo!