Ionic Framework es una librería que proporciona un conjunto de herramientas orientadas al desarrollo de aplicaciones web, móviles y de escritorio, utilizándose para ello tecnologías web estándares tales como HTML, CSS y Javascript. Al inicio del año 2019 fue lanzada la versión 4 la cual ha sido un gran avance comparada con la versión anterior y ha servido para sentar las bases del futuro inmediato del desarrollo multiplataforma.
Novedades y objetivos de Ionic 4
- Basado en estándares web: Para esta versión el código de Ionic se ha re-escrito prácticamente desde 0 utilizando Stencil, otra librería de la compañía Ionic orientado al desarrollo de componentes web (web components), lo que permite utilizar componentes estándares para la web reutilizables por cualquier navegador compatible.
- Componentes web independientes (librería agnóstica): En la versión 3 e inferiores la librería estaba acoplada estrechamente con Angular. Ahora, al estar construido íntegramente con componentes web estándares permite ser abstracto de librerías como Angular, React o Vue. Eso quiere decir que a partir de esta versión de Ionic, puede ser utilizada como librería independiente (en un proyecto web con Javascript/Jquery, por ejemplo). Actualmente el soporte oficial es para Javascript nativo (ES5/ES6) y Angular. Las capas de la librería para trabajar con Vue y React están en fase de pruebas aunque ya son instalables desde su repositorio oficial.
- Mejora del comportamiento de componentes visuales: En la versión 3 uno de los puntos débiles de Ionic era la cantidad de pequeños errores o bugs que había en muchos de sus componentes visuales. Para esta versión, al tener que reescribir el código con Stencil, han corregido muchos de esos problemas y también han mejorado en velocidad de carga y rendimiento cada componente visual.
- Mejora en Ionic CLI (consola de trabajo): Se han incorporado múltiples mejoras y cambios en la consola oficial de la librería, permitiendo adaptarla para el tipo de tecnología utilizada para el proyecto (Angular, React, Vue, Javascript…), además de mejora en el comando de generación de componentes, páginas, directivas, servicios. Esta última, como en versiones anteriores, sigue la forma de generación de Angular CLI.
- Nueva posibilidad de capa nativa: Anteriormente para utilizar componentes nativos de cada dispositivo móvil Android y/o iOS y hacerlos compatibles con el código de Ionic era necesario utilizar Cordova y sus plugins creados por desarrolladores terceros como puente. A partir de esta versión existe otra alternativa llamada Capacitor, creada también por el equipo de Ionic, que permitirá que los desarrolladores creen funcionalidades nativas y puedan adaptarla a prácticamente cualquier tipo de proyecto Android, iOS e incluso (y a diferencia de Cordova), a PWA utilizando los recursos propios de cada dispositivo. A pesar de que Capacitor es más moderno y su gran ventaja reside en la capacidad de adaptación a cualquier tipo de proyecto y plataforma, todavía no tiene lanzamiento estable, por lo que en la web oficial de Ionic se recomienda usar para recursos básicos como la cámara, mapas y coordenadas, gestión teléfonica, los plugins de Cordova. En un futuro la idea es acabar utilizando Capacitor en vez de Cordova.
Tipos de proyecto con Ionic 4
Los tipos de proyecto que pueden realizarse con Ionic, por tanto, son prácticamente todos donde la palabra “web” esté presente, tanto directa como indirectamente. La madurez que la Web está alcanzando ya con la entrada de componentes web estándares, elementos personalizados (Custom Elements), nuevas versiones de Javascript, etc. es una apuesta firme de cara a futuro.
- Android e iOS: Posiblemente el tipo de proyecto más común. Con una sola base de código, es posible construir una aplicación de Ionic para las dos plataformas móviles nativas más famosas y utilizadas. Con ayuda de Cordova (y Capacitor tal y como se comentó anteriormente), existen una gran cantidad de plugins de terceros donde es posible integrarlos con la aplicación de Ionic y utilizar los recursos del dispositivo para realizar cualquier cosa.
Además, el rendimiento una vez la aplicación es construida e instalada en el dispositivo es bastante bueno, mientras no sea para realizar una aplicación que requiera una gran cantidad de recursos (como un videojuego, por ejemplo), realizar este tipo de proyectos con Ionic es una idea muy buena, por su rapidez en el desarrollo.
- Aplicación Web Progresiva (PWA): Si el objetivo es realizar una aplicación móvil reusable también para web e instalable como acceso directo en el dispositivo, es posible utilizar Ionic con el tipo de proyecto PWA.Para que una aplicación pueda considerarse una PWA primero debe cumplir una serie de requisitos específicos según la plataforma (Android o iOS) como utilizar el protocolo HTTPS para las comunicaciones o un Service Worker que permite trabajar sin conexión (almacenando todos los archivos del proyecto en una especie de memoria caché), entre otros.
La aplicación PWA se instala en el dispositivo pudiendo abrirla igual que una nativa, pulsando en el icono de la aplicación correspondiente. Al abrirla se estará ejecutando una web en un navegador pero con el aspecto como si de una aplicación nativa se tratase. Es el navegador el que actúa de puente entre el dispositivo y la aplicación, por tanto, algunos de los recursos nativos no están disponibles ya que depende del navegador concreto. Afortunadamente, las APIs para Android y IOS ya permiten la mayoría de funcionalidades más utilizadas tales como cámara, notificaciones push (iOS ha tardado más, pero finalmente posibilita la opción), compartir contenido en otros servicios, etc. Tanto Android como iOS con cada nueva versión de su sistema operativo y actualizaciones de sus navegadores Chrome y Safari están haciendo grandes esfuerzos por integrar y permitir la máxima variedad de funcionalidades nativas, en aplicaciones PWA. Este tipo de proyectos puede ser interesante como servicios extras ya que en un mismo desarrollo se está haciendo una aplicación web que puede ser inestalable en el dispositivo Android e iOS y puede utilizar una variedad de funcionalidades nativas, salvando las distancias con una aplicación nativa 100%.
- Escritorio: Ionic también posibilita utilizar sus herramientas para hacer una aplicación de escritorio. Para ello, en el proyecto de Ionic es necesario instalar Electron y todas sus dependencias. Esto permitirá poder compilar y construir un proyecto con tecnología web para Windows o Mac OS. El aspecto es muy similar al efecto que se consigue con el tipo de proyecto PWA, esto es, se está ejecutando una web pero esta vez en vez de en un navegador, en una ventana nativa del sistema operativo que estemos usando.
Este tipo de proyectos puede ser utilizado en conjunto con PWA o con Android/IOS solo que en funcionalidades específicas que requieran del dispositivo nativo, seguramente haya que diferenciar el comportamiento o lógica a aplicar dependiendo en qué plataforma se esté ejecutando. La posibilidad de hacer una aplicación de escritorio si bien actualmente no es tan solicitada, puede ser interesante en determinados tipos de proyecto donde se priorice más la experiencia de software en puestos “estáticos” como por ejemplo, TPVs o softwares internos para empresas.
