Ionic 5: Por qué tu próxima app debería ser híbrida.

¿Deberías usar tecnología híbrida para crear tu próxima aplicación móvil?

Para responder correctamente a esta pregunta primero deberás tener clara la exigencia técnica que tendrá tu aplicación, los costes, los tiempos de desarrollo y la forma de distribuirla.

Principalmente hay tres formas de construir apps hoy en día.

 

Aplicaciones 100% nativas

 

La primera sería utilizando los SDKs nativos directamente. Esto quiere decir que al final vas a crear una aplicación diferente para cada plataforma y en su lenguaje de programación nativo. Básicamente para Android estaríamos hablando de Kotlin o Java y para iOS, de Swift o Objective-C. Para aplicaciones web, el lenguaje nativo lógicamente sería JavaScript.

 

 

Por lo general, las aplicaciones de mayor calidad y las que ofrecen un mejor rendimiento están construidas con sus SDKs nativos, pero obviamente hay un pero muy importante y no es otro que el coste de desarrollo. Debes tener en cuenta que vas a tener dedicar el doble de recursos a construir tu app si decides hacerlo de forma nativa.

Tendrás el doble de código fuente que mantener y esto obviamente conlleva un mayor coste de operaciones, pero además significa que debes tener en tu empresa distintos equipos de personas cualificadas en cada una de las plataformas para poder ser capaz de mantener este código, lo cual es bastante complejo especialmente para iOS y Android.

Diríamos que la opción de lenguaje nativo va dirigida principalmente a aplicaciones que van a tener una alta interactividad, donde el rendimiento es clave y donde la experiencia de usuario debe ser diferencial para destacarse de la competencia.

Pero hay que tener en cuenta que no todas las aplicaciones tienen por qué ser nativas y puedes obtener un buen funcionamiento usando tecnologías híbridas.

 

Ionic, un framework para crear aplicaciones híbridas

 

Esto me lleva a la segunda estrategia para construir aplicaciones móviles, que es donde el framework Ionic encajaría, y se trata de construir aplicaciones móvil híbridas usando tecnologías web programando en lenguaje JavaScript.

La idea principal es poder escribir solamente un código fuente y hacerlo correr en las distintas plataformas sin problemas y aunque efectivamente esto suena estupendo, no está exento de algunas concesiones que tienes que hacer.

 

 

Una aplicación híbrida, realmente no es más que una aplicación web que se integra en el dispositivo móvil nativo a través de webviews, es decir, ventanas donde realmente estás mostrando una vista web.

El principal inconveniente es que una aplicación web no es capaz de comunicarse directamente con la mayoría de las funcionalidades nativas de los dispositivos móviles, es decir, la cámara, el acceso biométrico, los distintos sensores, etc. por lo que es necesario usar un conector, en este caso Capacitor o Apache Cordova, que lo que hace simplemente es envolver el código nativo en una API JavaScript para que pueda ser consumido por la aplicación web.

El mayor beneficio de este enfoque es poder aprovechar a los desarrolladores web de tu equipo para construir aplicaciones web multiplataforma por un coste mucho menor que si tuvieras que contar con desarrolladores especializados.

Por otro lado, el que una aplicación híbrida haga uso de webviews no significa automáticamente que ésta sea de mala calidad. Si se hace bien, casi la hace indistinguible de una aplicación realmente nativa y más teniendo en cuenta que los dispositivos móviles son cada vez más potentes y esto siempre va a jugar a nuestro favor.

 

 

Por poner un ejemplo, la aplicación móvil de Amazon hace uso de muchos webviews, si te fijas, verás que es muy similar a la versión que puedes cargar desde el navegador de tu dispositivo móvil. Esto es porque realmente no necesita de muchas características nativas, ni de un rendimiento espectacular o muy optimizado, obtienen aun así una muy buena experiencia de usuario.

 

 

De qué forma vas a distribuir tu aplicación

 

La decisión adecuada pasa también por saber de qué forma vas a distribuir tu aplicación entre tus clientes.

Pensemos que solamente estás enfocado en PWAs (Progressive Web Apps), en este escenario Ionic va a ser sobre todo útil como una librería de componentes. Vas a tener acceso a estos componentes y servicios ya predefinidos que te ayudarán a resolver problemas habituales de diseño UI. Por ejemplo, menús, botones, ventanas modales, etc. Y todo ello con aspecto nativo dependiendo de la plataforma en la que lo ejecutes.

 

Otro posible escenario es que tu aplicación sea una PWA, pero quieras también que tus clientes puedan instalarla como una aplicación nativa de Android o iOS.

Ionic hace posible preparar ese código fuente para poder distribuirlo como aplicación móvil en la App Store o Google Play, y lo hace de una forma realmente fácil, lo que quiere decir que los costes de desarrollo no aumentarían y tendrías un tres en uno.

Una cosa para tener en cuenta es que ahora Ionic ya es agnóstico en cuanto a fameworks y ya no tienes por qué usar Angular, sino que puedes usar cualquier framaework JavaScript como React, Vue o incluso simplemente Vanilla JS.

Pero hay que decir que no todo son ventajas y también hay ciertos aspectos a tener en cuenta.

Como tu aplicación está desacoplada de los SDKs nativos, más o menos se ha convertido en una caja negra, es decir, tanto la depuración de errores como la optimización del rendimiento se convierte en una tarea un poco más complicada.

 

Lo mejor de los dos mundos, híbridas pero nativas.

 

Y aquí es donde entra la tercera forma de construir aplicaciones móviles, mediante frameworks como React Native, Flutter o Native Script que sí hacen uso del SDK nativo. La principal diferencia con Ionic, es que estos frameworks no usan un webview para el UI y eso les proporciona de ciertas ventajas.

 

 

Ionic ha apostado por la tecnología web como los ‘Web components’ (gracias a Stencil), y realmente está muy optimizado para el uso en progresive web apps. Y, aunque puedes usar Ionic para exclusivamente para construir aplicaciones nativas, hay algunas ventajas de usar frameworks que no usen webviews que deberías tener en cuenta.

 

La principal ventaja en mi opinión es que, con React Native o Flutter, puedes hacer correr código completamente nativo. Esto quiere decir que puedes solventar ciertos problemas de rendimiento y optimización porque ya no estás utilizando un conector para todo, sino que estás directamente interactuando con código del SDK nativo, por lo que obtendrás un mejor rendimiento desde el principio.

Otro aspecto para tener en cuenta durante el desarrollo es que estos frameworks hacen uso de recargas en caliente, que es distinto que las recargas que hace Ionic. ‘Hot reloading’ mantiene el estado de la aplicación al realizar cambios en el código, mientras que el ‘Live reloading’ de Ionic vuelve a recargar la página. Esto, aunque parece que no es una cosa del otro mundo, hace que el proceso de desarrollo sea significativamente más rápido cuando estás trabajando con emuladores nativos.

La tercera ventaja que encontrarás es relativa al testing. Ionic tiene integradas las herramientas de testing heredadas de la implementación de Angular, con Jasmin y Karma. Eso está genial para la web, pero con React Native y Flutter, tendrás muchos más recursos dedicados al testing en dispositivos móviles reales.

Estos son los principales beneficios de estos frameworks, pero también tienen sus inconvenientes. Con Flutter tienes una gran curva de aprendizaje de adoptar Dart, un nuevo lenguaje que es bastante espeso Y con React Native es bastante común tener problemas de rendimiento con el cuello de botella de su conector con el SDK, por lo que es posible que llegues a escribir más código nativo de lo que pensabas en un inicio.