Ionic 2 frente a Ionic 1: ganancias de rendimiento, nuevas herramientas y un gran paso adelante

El proyecto Ionic está ganando popularidad rápidamente. Con más de 27 000 estrellas en GitHub, se ha convertido en uno de los 50 proyectos de código abierto más populares del mundo.

Y dado que la versión estable de Ionic 2 se anunció recientemente, es el momento perfecto para que los ingenieros analicen y comprendan las diferencias entre Ionic 2 e Ionic 1.

En un alto nivel, Ionic 2 es una reescritura completa del proyecto Ionic 1 con Angular >= 2.x. De mis más de 2 años de experiencia usando Ionic 1, esto es lo que esto significará en términos prácticos.

Rendimiento mejorado de detección de cambios

Ionic 1 se basa en Angular 1.x, e Ionic 2 se basa en Angular >= 2.x. El aumento de rendimiento que obtiene con solo usar Angular >= 2.x solo es significativo.

Con Angular 1.x, para obtener aplicaciones de alto rendimiento se requería un gran conocimiento profundo del marco (como $watch , enlace de una sola vez, etc.). Con Angular >= 2.,x las aplicaciones son bastante eficientes desde el primer momento.

La nueva versión de Angular eliminó el famoso y criticado ciclo de resumen (seguimiento y prueba de cada variable de la aplicación en cada cambio). En cambio, Angular >= 2.x se basa en Zone.js para realizar un seguimiento de los cambios de la aplicación (tanto sincrónicos como asincrónicos).

Vale la pena explorar la detección de cambios en Angular >= 2.x para comprender cómo funcionan las cosas bajo el capó. En Angular >= 2.x, la detección de cambios siempre se realiza de arriba hacia abajo. Usar la estrategia correcta de detección de cambios ( OnPush o Default ) en sus propios componentes es de suma importancia si desea controlar el rendimiento de su aplicación.

Todos los componentes de Ionic 2 utilizan la estrategia OnPush , lo que significa que la detección de cambios no se realiza todo el tiempo, sino solo cuando cambian las entradas. Esta estrategia también evita la representación innecesaria de subárboles de componentes. Básicamente ya está optimizado para ti.

Si desea obtener más información sobre cómo obtener una aplicación Ionic1 de alto rendimiento, le sugiero que lea esta hoja de trucos de rendimiento de Ultimate AngularJS e Ionic.

Rendimiento DOM más rápido

La manipulación del modelo de objeto de documento angular (DOM) ha evolucionado mucho. Si desea una interfaz de usuario (UI) reactiva, la manipulación de DOM y el rendimiento de JavaScript son importantes.

Por ejemplo, crear 1000 filas en una tabla lleva 126 milisegundos con JavaScript estándar, un 110 % más (264 ms) con Angular. 1.x, y solo un 40 % más (177 ms) con Angular >= 2. Como puede ver, el rendimiento de Angular >= 2.x es mejor que Angular 1.x, y es similar al rendimiento de React.

Ionic 2, una vez más, se beneficia de esta mejora de rendimiento y lo hace “gratis”.

La nueva API de animaciones web

Ionic 1 e Ionic 2 todavía se basan en animaciones CSS para transiciones y animaciones internas, pero como Ionic 2 se basa en Angular >= 2.x, los desarrolladores tienen acceso a la nueva API de animaciones web (W3C) a través del sistema de animación Angular.

La API de animaciones web es una API de JavaScript que brinda a los desarrolladores acceso al motor de animación del navegador. Todavía no es compatible con todos los navegadores, pero con un polyfill puede usarlo ahora mismo y disfrutar de una de las formas más eficaces y prometedoras de animar la Web.

Fuente

La API de animación Angular >= 2.x le permite describir fácilmente animaciones complejas (que entran y salen de diferentes estados o animaciones grupales) y le brinda acceso al ciclo de vida de las animaciones a través de devoluciones de llamada.

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

Desplazamiento nativo incorporado

El desplazamiento nativo permite que Ionic 2 escuche los eventos de desplazamiento en WebViews compatibles. Hace
Pull to Refresh , List Reordering o Infinite Scroll es posible sin emular esos eventos (desplazamiento de JavaScript).

Hasta ahora, el desplazamiento de JavaScript era necesario, pero Chromium (Android) y WKWebView (iOS) WebViews han evolucionado y ahora admiten el desplazamiento nativo. Solo está habilitado de forma predeterminada en Android con Ionic 1 (desde diciembre de 2015) y habilitado en todas las plataformas con Ionic 2.

El soporte de desplazamiento nativo brinda un mejor rendimiento y mejora la experiencia del usuario al ayudar a garantizar un desplazamiento fluido gracias a los eventos asincrónicos.

API de componentes mejorada

Ionic 2 le da acceso a todos los componentes que hicieron famoso a Ionic 1, pero ahora están mejorados y basados ​​en Angular >= 2.x. Aquí está la lista de los componentes más comunes:

• Botón
• Tarjeta
• Icono
• Lista
• Menú
• Modal
• Barra de herramientas

La API de componentes cambió un poco entre Ionic 1 e Ionic 2. Por ejemplo, los componentes de ion-spinner de Ionic 1 usan el atributo icon para el tipo de spinner:

 <ion-spinner icon="bubbles"></ion-spinner>

Mientras que Ionic 2 usa el atributo de name :

 <ion-spinner name="bubbles"></ion-spinner>

Como puede ver, si está familiarizado con la API del componente Ionic 1, también se sentirá cómodo usando los componentes Ionic 2. Sólo tendrá que ser consciente de estas diferencias.

Con una impresionante lista de componentes, todo lo que puede hacer con Ionic 1 se puede hacer con Ionic 2, e incluso más.

Introducción de trabajadores web

Web Workers permite que su aplicación ejecute scripts en subprocesos de JavaScript en segundo plano. Los trabajadores pueden realizar tareas tediosas y solicitudes HTTP fuera del contexto de su aplicación (es decir, sin interferir con la interfaz de usuario). Actualmente, Web Workers es compatible con todos los navegadores principales.

Tradicionalmente, todos los marcos se creaban sobre los objetos de window y document y dependían de ellos. Sin embargo, en los trabajadores tampoco están disponibles. Con la nueva arquitectura Angular >=2 que desacopla el renderer , es más fácil ejecutar la aplicación dentro de Web Workers (o cualquier otra plataforma).

Ionic 2 está comenzando a experimentar con el uso de Web Workers con el nuevo componente ion-img . Por ahora, ion-img solo se puede usar dentro de una lista VirtualScroll. Delega la llamada HTTP de la imagen a Web Workers y también admite la carga diferida (es decir, solo recupera y representa imágenes en la ventana gráfica). Su aplicación web ahora solo se enfoca en la interfaz de usuario y deja que los trabajadores hagan el resto.

Aquí hay un ejemplo de cómo usarlo:

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

Tenga en cuenta que esto es solo el comienzo y que esperamos ver más uso de Web Workers en un futuro próximo.

Ventajas de mecanografiado

Si ha estado usando Ionic 2, ya sabe que está usando TypeScript. TypeScript es un superconjunto de JavaScript ES2015 que se compila en JavaScript simple. Con TypeScript, tiene acceso a todas sus características únicas (como interfaces, mixins, etc.) y características de ES2015 (como funciones de flecha, generador, cadenas multilínea, etc.).

Veamos un ejemplo de un componente Angular >= 2.x que muestra el nombre de un presidente de los Estados Unidos:

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

Usamos una interfaz ( IPresident ) que describe la forma del objeto presidente. Es interesante tener interfaces que describan lo que estás manipulando, especialmente si hay varios desarrolladores en un proyecto. Si comete un error y, por ejemplo, usa un boolean para el nombre del presidente, su IDE le dirá que algo anda mal incluso antes de que ocurra la compilación.

En prácticamente cualquier IDE que utilice (Visual Studio Code, Atom, WebStorm o similar), encontrará complementos para habilitar el autocompletado, la verificación de tipos y un linter.

TypeScript es una ventaja real para Ionic 2, ya que hace que su código sea más comprensible, lo ayuda a evitar errores tipográficos y lo ayuda a ser más productivo (a través de funciones como autocompletar, importación automática de módulos, definiciones de información sobre herramientas al pasar el mouse y CTRL + Click para ir a definiciones).

Todo nuevo CLI v2

Ionic CLI v2 agrega una forma de generar páginas, componentes, conductos y directivas, directamente a través de la línea de comandos.

Por ejemplo, si desea crear una nueva página llamada MyPage , este es el comando que puede ejecutar:

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

El comando seguirá las convenciones y creará tres archivos para usted:

Un archivo HTML para su plantilla. Un archivo SASS para el estilo de su componente. Un archivo TypeScript para la lógica de su componente.

Así es como se ve el archivo my-page.ts generado:

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

Hacer cumplir las convenciones mediante el uso de la CLI es excelente cuando trabaja en equipo. Angular 2.x e Ionic 2 están haciendo un gran trabajo al ayudar a fomentar una mejor comprensión de lo que debería ser una arquitectura de aplicación Angular. Por supuesto, eres libre de apartarte de las convenciones, si quieres.

Embalaje mejorado

Ionic 1 se basa en el ecosistema Gulp para agrupar aplicaciones, mientras que Ionic 2 le permite seleccionar sus herramientas favoritas. Ionic 2 proporciona su propia colección de herramientas como un proyecto separado: ionic-app-scripts.

ionic-app-scripts se basa en la idea de que los desarrolladores no deberían preocuparse en absoluto por la configuración del paquete. La única dependencia relacionada con el empaquetado que tendrá su proyecto con Ionic 2 es @ionic/app-scripts . De manera predeterminada, usa Webpack, pero también puede usar Rollup.

Con Ionic 2 y CLI v2, los assets , así como los archivos de TypeScript, viven en la misma carpeta src . El www ahora se genera durante cada compilación y, por lo tanto, debe eliminarse del seguimiento del control de versiones.

Introducción de la herramienta de informe de errores

La nueva CLI también introdujo una excelente herramienta de informe de errores. Para obtenerlo, debe instalar la versión Ionic> = 2.1:

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

Ahora, cada vez que tenga errores, aparecerá un modal con información significativa al respecto. Por ejemplo:

Recibir notificaciones sobre errores de tiempo de ejecución lo antes posible durante el desarrollo es increíblemente valioso e Ionic 2 ha hecho un gran trabajo en este sentido.

Beneficios de la compilación anticipada (AoT)

Ahead of Time Compilation (AoT) es una pequeña revolución en el ecosistema Angular. Introducido con Angular 2.x, AoT permite que las plantillas se compilen previamente en un paso de compilación, en lugar de que el navegador las compile sobre la marcha.

Si bien esto puede no parecer una gran diferencia, en realidad lo es. Con AoT, no tenemos que enviar el compilador de plantillas con la aplicación. Esto tiene dos ventajas. Primero, el paquete será más pequeño, lo que impacta directamente en la red y, por lo tanto, hace que su aplicación se descargue más rápido. En segundo lugar, la aplicación se iniciará más rápido porque ya no es necesaria la compilación de plantillas sobre la marcha.

Ionic 2 aprovecha al máximo Angular 2.x AoT para optimizar el tamaño y el tiempo de carga de su aplicación de forma gratuita.

Ionic 2 es un gran paso adelante

En general, Ionic 2 es un gran paso adelante para la industria móvil híbrida. Aunque el conjunto de componentes de Ionic 2 es similar a los componentes de Ionic 1, Ionic 2 ofrece muchas herramientas y mejoras de rendimiento.

De hecho, con herramientas como TypeScript, ionic-app-scripts e Ionic CLI, los desarrolladores de Ionic 2 pueden ser más productivos, pueden producir un código más fácil de mantener y reciben alertas sobre errores de tiempo de ejecución tan pronto como ocurren.

Ionic 2 también proporciona un aumento de rendimiento gratuito en relación con Ionic 1, en particular al eliminar o reducir sus cuellos de botella (relacionados con la detección de cambios, animaciones, tiempo de carga, etc.).

Con Ionic 2, sus aplicaciones se sentirán más nativas que nunca. Sácalo a dar una vuelta. Estaras contento de haberlo hecho.