11/10/2018 | Desarrollo de aplicaciones,Desarrollo de software,Tecnologías

Ionic 4 (parte 1) – Introducción

En esta publicación os contaremos algunas de las principales características de la nueva versión de ionic.

Ionic 4 ha sido totalmente reescrito desde cero usando Web APIs estándar donde cada componente está empaquetado como un componente Web.

Un componente web es una colección de APIs web que permiten crear HTML tags personalizados, encapsulados y reusables compatibles con navegadores móviles y de escritorio.

Los cambios más fuertes los podéis encontrar en este enlace:

https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md

Además tambien se ha renovado toda la documentación: https://beta.ionicframework.com/docs/

Adicionalmente el equipo de ionic ha creado una herramienta para la ayuda a la migración que detectará la mayoría de cambios que puedan dar problemas entre las 2 versiones:

https://github.com/ionic-team/v4-migration-tslint

Angular CLI y Router

Ionic 4 es la primera versión que independiza el framework en el que se apoya, que hasta ahora siempre ha sido Angular.

Para aquellos que hayáis estado usando Ionic 3 con Angular, no habrán grandes cambios en la migración si queréis seguir usando Angular.

La versión 4 de ionic reemplaza “ionic-app-scripts” y el router por las herramientas de Angular 6; ahora este generará automáticamente en el momento de creación de la app  el fichero app-routing.module.ts en src/app.

Este fichero contiene un ejemplo de rutas a las que podemos navegar en la aplicación:

“app-routing.module.ts”

app-routing.module.ts

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 

A continuación podéis ver cómo navegar a la página home en ambas versiones.

Ionic 3Ionic 4
 import { NavController } from 'ionic-angular'; import { HomePage } from './pages/home/home' constructor(public navCtrl: NavController){} navigateToHome(){ this.navCtrl.push(HomePage); } 
import { Router } from '@angular/router'; constructor(private router: Router) { } navigateToHome(){ this.router.navigate(['/home']); } 

Como cada componente en Ionic 4 es un componente web, el equipo de Ionic ha creado una herramienta llamada Stencil, la cual es un compilador de componentes web para construir componentes UI reutilizables y aplicaciones web progresivas (PWA).

Ciclo de vida

En Ionic 4 se dejan de usar los eventos del ciclo de vida de ionic (ej: ionWillLoad), y usaremos los de Angular (Ej: ngOnInit y ngAfterViewInit)

Shadow DOM

El shadow DOM es una API que es parte del modelo de componente web. Ayuda a aislar las partes internas de los componentes, protegiendo a los usuarios de cambios globales en CSS.

RouterLink

In Ionic 4, es posible navegar con routerLink , seguido de la ruta deseada, como por ejemplo:

<ion-button [routerLink]="['/product/123']">Go to Product 123</ion-button>

Navigation Guards

Ahora Ionic puede usar guardas de navegación, las cuales son Interfaces de Angular que pueden decirle al router cuando tiene que autorizar o denegar la navegación a una ruta. Se usan con una llamada que espera una respuesta “true” o “false” e implementan la interfaz de “Guard”.

A continuación tenéis un ejemplo de Guard para restringir según un usuario está autenticado o no.

 @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): boolean { const loggedIn = false; // replace with actual user auth checking logic if (!loggedIn) { this.router.navigate(['/']); } return loggedIn; } } 

Puedes añadir la regla a la configuración del router de angular así:

 const routes: Routes = [ { path: 'special', component: SpecialPage, canActivate: [AuthGuard] }, ]; 

Capacitor

Capacitor es un entorno de ejecución multiplataforma que permite para construir aplicaciones web que ejecutan de forma nativa en iOS, Android, Electron y navegadores (Native progressive web apps).

Es el sucesor espiritual de Cordova y soporta directamente mediante su API la plataformas android (Java), iOS (Swift), WPA y Escritorio (Javascript). Además Capacitor tiene compatibilidad hacia atrás con muchos de los plugins de Cordova.

En lugar de tener como Cordova una configuración común y gestionar todo el proceso de build y ejecución de cada plataforma automáticamente, Capacitor sigue un enfoque diferente: Ofrece el punto inicial de un proyecto nativo que es el recubrimiento para la plataforma en concreto, pero toda la configuración, compilación y ejecución se realiza como si se tratase de una aplicación nativa.

https://capacitor.ionicframework.com/docs/

Estas han sido algunas de las novedades de ionic 4, continuaremos escribiendo más sobre este framework próximamente.

Continuará….

Compartir en:

Relacionados