slides-ionic

¿Qué es Ionic Framework?

¿Qué es Ionic Framework?

• Ionic es un framework de desarrollo basado en HTML5, cuyo objetivo es desarrollar aplicaciones móviles híbridas.

• Genera aplicaciones encapsuladas en web views mezclado con código nativo.

• Es totalmente Open Source.

Tecnologías detrás de Ionic Framework

AngularJS

• Es un framework javascript para desarrollar páginas web dinámicas.
• Esta basado en el patrón MVC (Model-View-Controller) o mejor dicho MVW (Model-View-Whatever).
• Creado inicialmente por Misko Hevery y Adam Abrons.
• Mantenido por Google.

Características de AngularJS

• Renderizado en la parte del cliente.
• Two-way Data Binding.
• Inyección de dependencias.
• Directivas.
• Filtros.
• Servicios.

Cordova

• Es un framework para el desarrollo de aplicaciones móviles creado por Nitobi.

• En el 2011 fue absorbido por Adobe Systems y el framework fue renombrado como PhoneGap.

• Posteriormente liberaron una versión open source bajo el nombre Apache Cordova.

• Permite desarrollar aplicaciones móviles con CSS3, HTML5 y JavaScript sin depender de APIs específicas de cada plataforma.

Cordova II

• Es el encargado de ofrecer las llamadas nativas; hace de puente entre el web view y la API nativa.

• Existen multitud de plugins que se encargan de hacer llamadas nativas de todo tipo.

• Como Ionic utiliza AngularJS, los plugins tienen que estar angularizados.

• ngCordova es un buen repositorio de plugins compatibles con Ionic.

Sass

• Sass (Syntactically Awesome Stylesheets) es un lenguaje de hoja de estilos.
• Inicialmente fue diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum.
• Es un Meta-lenguaje que proporciona una sintaxis más simple y elegante para CSS.

Características de Sass

• Hace posible el uso de diversas variables y funciones.
• Permite anidar selectores para así estructurar mejor el código.
• Permite heredar propiedades.
• Permite importar código.

Ventajas de Ionic Framework

Look & Feel

• Ofrece un look and feel que se adapta a cada plataforma.

Multiplataforma

• Actualmente la versión 1.0 soporta iOS y Android.

• Desde la beta3 de Ionic 2.0, también tiene soporte para la Plataforma Universal de Windows (UWP).

Licencia MIT

• Se desarrolla bajo licencia de software libre permisiva del MIT.
• Se puede utilizar para su uso personal o comercial.

Comunidad

• Hay una comunidad muy activa entorno a Ionic.
  • El blog lo actualizan cada pocos días.
  • El repositorio de GitHub es uno de los más populares.
  • Hay mucho movimiento en los foros.
  • Incluso tienen un grupo en Slack.

Rendimiento

• El rendimiento tiene mucha importancia

  • Animaciones por hardware.

  • Manipulación mínima del DOM.

  • Han eliminado el delay de 300ms del tap.

Características de AngularJS

• Renderizado en la parte del cliente.
• Two-way Data Binding.
• Inyección de dependencias.
• Directivas.
• Filtros.
• Servicios.

AngularJS

Renderizado en la parte del cliente

• El servidor proporciona los contenidos estáticos (plantillas) y la información que se va a mostrar (modelo).
• Es el cliente el encargado de mezclar dichos datos y generar la vista que se va a mostrar.

<div ng-app="miApp">
    <ul ng-controller="miControlador">
        <li ng-repeat="contacto in contactos">
            {{contacto.nombre}} ({{contacto.telefono}})
        </li>
    </ul>
</div>

$scope.contactos = [
  {'nombre': 'Mikel', 'telefono': '666555444'},           
  {'nombre': 'Jon', 'telefono': '666444555'},
  {'nombre': 'Dani', 'telefono': '666554455'}
]

CodePen

AngularJS

Two-way Data Binding I

AngularJS

Two-way Data Binding II

CodePen

AngularJS

Inyección de dependencias I

• En vez de crear un objeto dentro de una función, pasarle el objeto a la función.

var Person = function(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
}

function logPerson() {
    var john = new Person('John', 'Doe');
    console.log(john);
}

logPerson();

CodePen

AngularJS

Inyección de dependencias II

var Person = function(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
}

function logPerson(person) {
    console.log(person);
}

var john = new Person('John', 'Doe');
logPerson(john);

CodePen

AngularJS

Directivas

• Una directiva es una orden para AngularJS para que manipule una parte del DOM.
• Puede ser añadir una clase, ocultar un elemento, crear un elemento, etc.
• Son atributos personalizados; por ejemplo, ng-model, ng-show, etc.
• Se puede consultar la lista de todas las directivas en la documentación oficial.

AngularJS

Filtros

• Nos posibilita cambiar el modo en el que mostramos los datos.
• AngularJS tiene filtros predefinidos, pero es posible crear filtros propios.
  • Filter
  • Currency
  • Number
  • Lowercase
  • ...

CodePen

AngularJS

Servicios

• Son singletons; es decir, sólo se crea una única instancia.
• Permiten simplificar los controladores extrayendo detalles específicos de negocio (Separación de responsabilidades).
• Un servicio nunca interacciona con la propia página, sólo con otros servicios o con un servidor de datos.
• Algunos de los más utilizados:
  • $http
  • $q
  • $window
  • $log

ngCordova

• ngCordova nos proporciona más de 70 plugins para utilizarlos en aplicaciones desarrolladas con AngularJS.

• En la documentación podemos encontrar métodos y ejemplos de cada plugin.

• Y el enlace al código del wrapper y la documentación oficial.

Características de Sass

• Variables y funciones.
• Anidar selectores.
• Herencia de selectores.
• Directivas de control y expresiones
• Importar código.

Características de Sass

Ejemplo práctico

• SassMeister editor online.
• Template para el ejemplo.

Sass

Variables

• Es posible declarar una variable y reutilizarlo a lo largo del fichero.

$primary-color: #333;

h1 {
  color: $primary-color;
}

a {
  color: $primary-color;
}

    h1 {
  color: #333;
}

a {
  color: #333;
}

Sass

@mixins

• Es posible declarar funciones para generar estilos en base a variables.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
}

.box { @include border-radius(10px); }

    .box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

Sass

@mixins II

.box-10 { @include border-radius(10px); }
.box-rect { @include border-radius(0px); }

    .box-10 {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
            border-radius: 10px;
}

.box-rect {
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
        -ms-border-radius: 0px;
            border-radius: 0px;
}

Sass

Anidar selectores

• Permite anidar selectores para estructurar mejor el código.

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { display: inline-block; }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

• El código anterior, afectaría solamente a los ul, li y a que se encuentran dentro de nav.

Sass

@extend

• Permite heredar propiedades de un selector.

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}

• Ahorra el tener que utilizar multiples clases en los elementos HTML.

Sass

@extend II

.message, .success, .error, .warning {
    border: 1px solid #cccccc;
    padding: 10px;
    color: #333;
}

.success {
    border-color: green;
}

.error {
    border-color: red;
}

.warning {
    border-color: yellow;
}

Sass

Directivas de control y expresiones - @if

    p {
    @if 1 + 1 == 2 { border: 1px solid;  }
    @if 5 < 3      { border: 2px dotted; }
    @if null       { border: 3px double; }
}

    p {
    border: 1px solid; }

Sass

Directivas de control y expresiones - @if II

$type: monster;

p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}

    p {
    color: green; }

Sass

Directivas de control y expresiones - @for

@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

    .item-1 {
    width: 2em; }
.item-2 {
    width: 4em; }
.item-3 {
    width: 6em; }

Sass

Directivas de control y expresiones - @each

@each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}

    .puma-icon {
    background-image: url('/images/puma.png'); }
.sea-slug-icon {
    background-image: url('/images/sea-slug.png'); }
.egret-icon {
    background-image: url('/images/egret.png'); }
.salamander-icon {
    background-image: url('/images/salamander.png'); }

Sass

Directivas de control y expresiones - @each II

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    #{$header} {
        font-size: $size;
    }
}

    h1 {
    font-size: 2em; }
h2 {
    font-size: 1.5em; }
h3 {
    font-size: 1.2em; }

Sass

Directivas de control y expresiones - @while

• Permite importar código de otro archivo.

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

    .item-6 {
    width: 12em; }

.item-4 {
    width: 8em; }

.item-2 {
    width: 4em; }

Sass

@import

• Permite importar código de otro archivo.

/* _reset.scss */

html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

/* base.scss */

@import 'reset';

body {
    font: 100% Helvetica, sans-serif;
    background-color: #efefef;
}