Aplicaciones híbridas ¿Qué es Ionic Framework?

Aplicaciones móviles nativas

Las aplicaciones nativas son aquellas diseñadas para una plataforma específica. Normalmente se utiliza un SDK (Software Development Kit) propio de dicha plataforma. Cada SDK hace uso de un lenguaje específico. Por ejemplo, el SDK de iOS utiliza Swift u Objective C, el de Android utiliza Java. Por lo tanto, si queremos crear aplicaciones para los distintos dispositivos, debemos adaptar el código a los SDKs correspondientes.

Aplicaciones móviles híbridas

Todas las plataformas móviles disponen de un subsistema denominado webview. Webview permite la inclusión de contenido web dentro de una aplicación. Por lo tanto, webview permite el uso de tecnologías web (HTML, CSS, Javascript) para el desarrollo de componentes que posteriormente se pueden embeber en una app nativa. Gracias a ello, se puede crear una aplicación una vez, y ejecutarla en cualquier plataforma que permita el uso de esta tecnología (ordenadores, tabletas, teléfonos móviles, relojes inteligentes, navegadores de coches…).

Una aplicación híbrida es, en esencia, una aplicación nativa que contiene un webview en el cual se ejecuta el desarrollo realizado. A pesar de ejecutarse en este subsistema, la aplicación dispone de acceso a todo el hardware del dispositivo, como si de una aplicación nativa en sí misma se tratase, disponiendo incluso de aceleración por hardware.

Aplicación híbrida VS Aplicación nativa

La decisión principal para decantarse por una tecnología u otra, debe basarse en criterios organizacionales, teniendo en cuenta factores como los siguientes:

App Hibrida

App Nativa

Pros

Mejor aprovechamiento de los recursos humanos de la organización, ya que el grado de especialización necesaria es menor (solo requiere conocimientos de HTML, CSS y Javascript)

El único conocimiento de tecnologías de desarrollo web permite la creación de aplicaciones multiplataforma ejecutables en prácticamente cualquier dispositivo actual.

La comunidad de desarrolladores web es mucho más amplia que la de los lenguajes específicos necesarios para cada plataforma.

Experiencia de usuario consistente entre distintas plataformas.

Aprovecha en su totalidad el hardware del dispositivo sin necesidad de capas intermedias (como webview), haciéndolo la opción preferente para el desarrollo de apps de alto rendimiento o uso intensivo de 3D (videojuegos por ejemplo).

Uso directo de todo el hardware del dispositivo (acelerómetro, brújula, GPS…) sin necesidad de plugins de terceros.

El fabricante del dispositivo facilita un SDK con todas las librerías necesarias para el acceso a todas las funcionalidades del mismo, incluso las de más reciente creación. De esta forma se eliminan también las dependencias externas

Contras

Mayor consumo de recursos, al necesitar de webview para su ejecución.

Desaconsejado para aplicaciones con uso intensivo de 3D o que requieran alto rendimiento.

El acceso al hardware de los dispositivos requiere de plugins de terceros (como por ejemplo Cordova), añadiendo complejidad y dependencias externas.

Depende del uso de frameworks de desarrollo (como por ejemplo Ionic). La vida de la aplicación desarrollada depende del mantenimiento de dicho framework por terceros.

Ciclo de desarrollo más largo, puesto que se debe adaptar cada desarrollo a las características específicas de cada plataforma. Esto alarga la capacidad para lanzar aplicaciones y los costes del proyecto.

Mayor complejidad para encontrar el talento necesario para el proyecto, al necesitar especialistas en cada una de las plataformas objetivo.

Qué es Ionic

Ionic es un framework (marco de trabajo) open source (de código abierto). Facilita las herramientas necesarias para el desarrollo y pruebas de aplicaciones híbridas. Permite, por lo tanto, el desarrollo de un proyecto una única vez, y su despliegue en múltiples plataformas, adaptando incluso el look 'n' feel (aspecto de la interfaz de usuario) a las características específicas de cada una de ellas.

O, dicho de otra forma, con Ionic se codifica el desarrollo una vez, y posteriormente esta herramienta se encarga de generar el ejecutable propio de cada plataforma, aplicando además el tema gráfico y experiencia de usuario. Es decir, si se genera el ejecutable para Android, aplicará el tema Material Design. Si se genera el ejecutable para iOS, aplicará el tema Cupertino.

Como decía, Ionic es un framework que proporciona librerías y herramientas para el desarrollo de aplicaciones. Para la codificación de estas aplicaciones, soporta el uso de Angular, React y Vue. Por lo tanto, y simplificándolo mucho, el desarollador crea su código usando cualquiera de los frameworks indicados, encargándose Ionic de dar soporte y convertirlo en las respectivas versiones para las distintas plataformas.

Instalación y primeros pasos

Ionic necesita tener NodeJS instalado. Para instalar NodeJS se deberá ir a su web oficial https://nodejs.org y descargar el instalador

Se deberán seguir los pasos recomendados según la plataforma.

Una vez instalado NodeJS, ya se puede instalar Ionic Framework mediante el uso de NPM. Para ello se ejecutará el siguiente comando:

npm install -g @ionic/cli

Mediante esta acción, se instala el CLI (Command Line Interface) que se utilizará posteriormente para inicializar y crear los elementos de la infraestructura de nuestra app.

Para crear una nueva aplicación, nos moveremos a la carpeta raíz que deseemos utilizar, y escribiremos lo siguiente:

ionic start MiPrimeraApp tabs

Donde:

MiPrimeraApp es el nombre de la aplicación.
tabs hace referencia a la plantilla que se utilizará como base para la aplicación

Hay varias plantillas base, que se pueden utilizar para facilitar la puesta en marcha de la aplicación dependiendo del escenario más conveniente:

tabs crea una aplicación basada en pestañas
blank crea una aplicación en blanco, inicializando únicamente la estructura base
sidemenu crea una aplicación con menú lateral

Durante la inicialización, el CLI pregunta qué framework Javascript se va a utilizar. Tenemos la opción de utilizar Angular, React o Vue. Tambien preguntará si se desea utilizar Capacitor. Capacitor es la herramienta que permite acceder al hardware y funcionalidades nativas del dispositivo.

Posteriormente, para arrancar la aplicación nos desplazaremos a la nueva carpeta que el CLI l nos ha creado, y ejecutaremos el comando:

ionic serve

Mediante este comando, se arranca un servidor de desarrollo de Node, y se inicia en él la aplicación, que podremos visualizar mediante un navegador de Internet cualquiera, accediendo a la URL http://localhost:8100. El puerto puede variar en función de la configuración. Podemos consultarlo revisando el log que se genera mientras se está arrancando el live server.

Enlaces útiles

Por último, me gustaría compartir algunos enlaces que considero útiles si deseas iniciarte en el mundo Ionic

https://ionicframework.com Página principal del framework Ionic
https://ionicframework.com/docs Documentación del framework. Es una documentación tremendamente extensa y detallada, que explica con detenimiento todas las características y funcionalidades que Ionic facilita
https://nodejs.org Página de NodeJs, necesario para el funcionamiento de Ionic

Ionic

Mobile

Aplicación Móvil

Mobile Application

Cosas legales · Créditos · Política de Cookies · Términos y Condiciones · Política de Privacidad

Todos los elementos aquí publicados forman parte de mi propio conocimiento, y desarrollan los temas hasta donde alcanza mi conocimiento. Siempre intentaré mantener la información más actual y fiel a la realidad posible. No obstante, puede ser que ésta no sea totalmente fidedigna, y pueda ser más amplia o específica. Por lo tanto, no me hago responsable del uso que se haga de los contenidos expuestos en esta web, ya sea teoría, o código de programación.