Krama Mostrar menú

¿Qué es Ionic?

29 de abril de 2020

Ionic hace más fácil el desarrollo de apps móviles y aplicaciones PWA (Progressive Web Apps) con un alto rendimiento, y con un aspecto atractivo en cualquier plataforma o cualquier dispositivo.

En este artículo hacemos una exposición de sus características y repasaremos las diferencias entre aplicaciones nativas, web y móviles, y en las versiones de Ionic existentes hasta hoy.

Ionic Framework

Ionic es un SDK completo de código abierto para desarrollo de aplicaciones móviles híbridas creado por Max Lynch, Ben Sperry y Adam Bradley en Drifty Co., en 2013.

La primera versión se lanzó en 2013, construída sobre AngularJS y Apache Cordova. En cambio, la última versión lanzada se reconstruye como un conjunto de Componentes Web, que permiten al usuario escoger cualquier framework de interfaz gráfica, como Angular, React o Vue. También permite el uso de componentes Ionic, sin ningún framework de UI en absoluto.

La plataforma Ionic proporciona herramientas y servicios para el desarrollo de aplicaciones móviles híbridas, aplicaciones de escritorio y PWA (Aplicaciones Web Progresivas) basadas en las más modernas tecnologías y prácticas de desarrollo web, utilizando tecnologías tales como CSS, HTML5 y Sass. En particular, permite construir apps móviles utilizando estas tecnologías web, y después distribuirlas a través de App Stores nativas (Apple Store y Google Play), para ser instaladas en dispositivos.

¿Necesitas una empresa que te desarrolle una app móvil a medida? Contacta con nosotros

Apps Nativas, Apps Web y Apps Híbridas

¿Qué es una app móvil Nativa?

Una aplicación móvil nativa se desarrolla utilizando los lenguajes de programación nativos y las herramientas de desarrollo específicas de un sistema operativo. Por ejemplo, una aplicación nativa iOS desarrollada para iPhone está escrita en lenguaje Objective-C o en lenguaje Swift, y compilada utilizando el entorno Xcode. En cambio, una acplicación nativa Android se programa en lenguaje Kotlin o en Java, y se compila en la herramienta Android Studio.

Como estas aplicaciones se desarrollan utilizando las herramientas por defecto de cada plataforma, los desarrolladores tienen acceso completo, de una forma sencilla, a las capacidades del dispositivo, tales como los cantactos del usuario, la agenda, la cámara de fotos, sensores de inclinación, brújula, GPS, etc.

Las aplicaciones móviles nativas suelen tener mejor rendimiento, porque su código fuente está más cercano al hardware del dispositivo. Además de funcionar más rápido, tendrán acceso a todos los controles y el diseño de la interfaz de usuario nativa del teléfono para el que se han desarrollado. Esto permite desarrollar aplicacione móviles con una interfaz de usuario personalizada, pero "coherente" con el tipo de botones y aspecto habituales en el sistema operativo, de tal forma que el usuario la encuentra fácil de usar y no la vea "extraña".

Una aplicación desarrollada en Java para Android no se puede ejecutar en un iPhone, y viceversa. Esto significa que si quieres desarrollar una aplicación móvil nativa para usuarios de iOS y de Android, tendrás que hacer un desarrollo específico para cada una de los dos sistemas operativos. Esto impleca más presupuesto, un equipo de trabajo más numeroso.

Otro tema a tener en cuenta es que una aplicación móvil nativa se distribuye únicamente dentro de las tiendas de apps esepecíficas de cada plataforma (Apple App Strore y Google Play), y deben cumplir sus normas y sus restricciones, por arbitrarias que nos puedan parecer. Por ejemplo, una aplicación para iPhone tiene prohibido utilizar la palabra 'Android' en tódo su contenido. Esto significa que por cada nueva versión de nuestra aplicación, ya sea por que incorpora nuevas características o porque soluciona bugs de la versión anterior, la aplicación deberá cumplir todo el proceso de revisión y aprovación en cada una de las dos tiendas de apps oficiales. Este proceso puede llegar a tardar más de dos semanas en el caso de Apple.

¿Qué es una aplicación web para móvil?

Una aplicación móvil web es una aplicación web tradicional, escrita en HTML, CSS y Javascript, diseñada para el tamaño de pantalla de un móvil, o con un diseño web responsive, para ofrecer una interfaz de usuario adecuada tanto en un ordenador como en un móvil. Se pueden desarrollar con la ventaja de diferentes librerías y frameworks, como Angular, React, Vue o JQuery.

Una aplicación web para móvil se ejecuta en un navegador de Internet en el dispositivo, y tendrá acceso sólo a las capacidades que ofrezca el navegador. Esto significa que no tendrá acceso completo a todos los recursos del dispositivo, como la agenda de contactos. Esto ha ido mejorando enormemente en los últimos años, y actualmente una aplicación web ya puede acceder al GPS o a la cámara.

Uno de los mayores retos al desarrollar aplicaciones móviles en tecnología web es que muchos componentes de IU de aplicación no existen, como por ejemplo el navegador de pestañas, y se tienen que simular. Esto puede dar como resultado que las aplicaciones no funcionen bien en todos los dispositivos, y dependa del navegador que utilice el usuario. No obstante, existen librerías de IU que proporcionan componentes adecuados a la mayoría de dispositivos.

En el año 2017 Google creó el concepto de PWAs (Progressive Web Applications), que permitía desarrollar un tipo de aplicación web con más características de app móvil: icono de app para instalar en el escritorio, notificaciones push y capacidad de funcionamiento offline. Microsoft ha acogido esta tecnología, y la recomienda para las apps de su tienda de apps.

Para los equipos de desarrolladores esta solución es muy interesante, porque permite crear aplicaciones para todos los dispositivos con el mismo desarrollo, pueden utilizar una amplia variedad de frameworks, pueden actualizar rápidamente sus aplicaciones, y no dependen de tiendas de aplicaciones propietarias que impongan restricciones ni rechacen sus aplicaciones.

¿Qué es una aplicación móvil híbrida?

Esta solución es una mezcla de las dos anteriores. Se trata de una aplicación cuyo nucleo está desarrollados con tecnologías web (HTML, CSS y Javascript), y está "encapsulado" en una aplicación nativa. Utilizando plugins, estas aplicaciones pueden tener acceso total a las capacidades del dispositivo móvil.

Aunque la mayor parte de la aplicación esté desarrollada en HTML, CSS y Javascript, la aplicación no se ejecuta en un navegador, sino en una aplicación nativa con un browser embebido, invisible para el usuario.

El código web de la aplicación se ejecuta en una aplicación nativa utilizando una solución como Apache Cordova o Ionic's Capacitor. Estas soluciones crean una aplicación nativa con un componente donde ejecutar páginas web. Además, esta aplicación nativa nos dará acceso a características del móvil a través de librerías Javascript. Con esto, tenemos la capacidad de crear una aplicación realmente nativa, que podemos distribuir a través de las tiendas de Apps de cada plataforma.

Tanto Cordova como Capacitor tienen un sistema de plugins que nos permitirán extender nuestras app híbridas más allá de las limitaciones del browser, y accedes a una completamente colección de capacidades de los teléfonos móviles, como el TouchID de un iPhone para hacer login, conectar con un dispositivo Bluetooth.

Al igual que pasaba con las aplicaciones web, muchos componentes de interfaz muy comunes en una aplicación, como el navegador de pestañas, no existen y tienen que se simulados. Este inconveniente se solventa gracias a frameworks como Ionic, NativeScript, Xamarin o React Native. Estos frameworks nos ofrecen conjuntos de componentes de IU con un aspecto idéntico a los componentes nativos de cada sitema operativo, además de proporcionar un conjunto de bloques con los que construir aplicaciones móviles.

Entonces, ¿cómo desarrollo mi aplicación?

Nuestra recomendación es utilizar desarrollo híbrido con Ionic. Esta decisión permite desarrollar con tecnologías más utilizadas, con mayor soporte y en las que puedes encontrar más desarrolladores, y minimiza costes, ya que el mismo desarrollo va a funcionar en todas las plataformas.

No obstante, si tienes que desarrollar una app que necesite tener un alto rendimiento, tal como un juego o algo similar, es mejor opción un desarrollo nativo para cada plataforma.

¿Necesitas una empresa que te desarrolle una app móvil a medida? Contacta con nosotros

Versiones de Ionic

Ionic es una plataforma open-source que a su vez utiliza otras librerías open-source. Esto quiere decir que hay una comunidad de desarrolladores que trabajan contínuamente en su mejorar y ampliar tanto Ionic como las librerías que utiliza, los que a su vez hace necesario adaptar Ionic a las nuevas versiones de estas librerías. A continuación os contamos las principales características y diferencias de las versiones de Ionic que han existido hasta hoy.

Ionic 1

La primera versión oficial Ionic 1.0.0 fue lanzada el 12 de mayo de 2015, tras dos años de versiones 0.x, con el nombre de Uranium-Unicorn. Consistía en un framework de desarrollo de apps híbridas Apache Cordova basadas en AngularJS versión 1. Este framework fue adopatado por IBM dentro de su plataforma IBM Worklight (actualmente conocida como IBM Mobile Foundation).

Ionic 2

Se anuncia el 25 de febrero de 2017. Introduce Angular 2 y TypeScript, con lo que cambia el lenguaje de programación (tanto de spript como de las plantillas HTML) y la estructura de los archivos de un proyecto. Ahora, cada página de la aplicación estará en una carpeta individual, con su archivo HTML, CSS y TypeScript. Otra característica es que incluye Ionic CLI (Command Line Interface), que permite al desarrollador generar automáticamente pages, providers, tabs, pipes, components y directives.

Una característica que cambia totalmente es la navegación. en Ionic 1 la navegación entre páginas era bastante parecida a la de enlaces entre páginas web, mientras que Ionic 2 introduce el onbjeto "nav" que mantiene una "pila" de navegación, y las páginas se muestran con funciones push y pop en esta pila.

Ionic 2, al utilizar TypeScript, hace necesaria la "transpilación" de código fuente antes de construir la aplicación ejecutable. La transpilación consiste en convertir todos los archivos ts (TypeScript) del proyecto en un único archivo js (Javascript). En este proceso, se lee nuestro código fuente (generalmente dentro de la carpeta "app") y se genera otro código para ejecutarlo dentro de la carpeta "www".

Ionic 3

Tan solo dos meses después de la versión 2, se anuncia la versión 3, el día 7 de abril de 2017.

Introduce Angular 4, compatibilidad con TypeScript 2.1 y 2.2, el control de versiones SEMVER. Ofree algún otro cambio, como que ya no importa por defecto los módulos BrowserModule y HttpModule, y el decorador de páginas pasa a ser "IonicPage", en lugar de "Page". Introduce la capacidad de cargar componentes sólo cuando se van a utilizar (lazy loading) y algunos cambios en Ionic native.

Ionic 4

Ionic 4 se reescribe completamente para utilizar las Web APIs, y cada uno de sus componentes está empaquetado como un Web Component, lo que permite utilizar sus tags HTML propias dentro de las plantillas de una app. En esta versión de Ionic ya no es obligatorio el uso de Angular. Se pueden desarrollar apps Ionic 4 en otros frameworks, como por ejemplo en Vue o React, o sin ningún framework. No obstante, la mayoría de los desarrollos Ionic seguirán usando Angular, y en Ionic 4 la versión mínima será Angular 6.

El CLI ha sido mejorado, y la estructura de los archivos de un proyecto cambia ligeramente. La navegación vuelve a cambiar. En Ionic 4 se utiliza el objeto Router de Angular 6, lo que permite tener varias pilas de navegación, no solo una para toda la aplicación. Esto puede ser muy util en una app que utiliza diferentes pestañas. NavController y ion-nav quedan obsoletos en esta versión.

Por cáda página existirá un módulo, y ya no será necesario importar todos los módulos en el archivo app.module.ts, lo que hace un código fuente de proyecto más limpio.

Ionic 5

Ionic 5 se lanza el 11 de febrero de 2020, con el nombre de Magnesium. Esta nueva versión incluye las siguientes novedades:

  • Actualización de componentes de IU para iOS, para conseguir el nuevo aspecto nativo de iOS versión 13
  • Ionic Animations: nueva utilidad open source para crear animaciones
  • Ionicons 5: nueva biblioteca de iconos gratuita y de código abierto
  • Ionic colors: nueva set de colores con recomendaciones de uso para modo oscuro
  • Starters: nuevas plantillas de aplicación, que incluyen modo oscuro. Plantillas blank, menu, list, tabs.
  • Angular Ivy: Soporte para el nuevo motor de Angular 9.

¿Necesitas una empresa que te desarrolle una app móvil a medida? Contacta con nosotros

Volver

¿Quieres saber más?

Ponte en contacto con nosotros

Consúltanos