Una de las primeras cuestiones a las que nos enfrentamos al momento de comenzar a desarrollar aplicaciones móviles, Apps, es qué modelo, tecnología y lenguaje de programación usar para el desarrollo.
Por supuesto que no existe una respuesta única y unánime al respecto, dependerá de los recursos económicos con que se cuente, los conocimientos previos del equipo, la arquitectura general de la solución, así como elementos exógenos como intereses, pasiones, acuerdos, etc. No obstante en este artículo trataremos de brindar un análisis general y argumentado, que sirva como una guía para la toma de decisiones.
Lo primero que haremos será dividir el universo de las Apps en tres grandes grupo de acuerdo a la técnica con que fueron desarrolladas:
La diferencia más importante entre una app nativa y una híbrida es que, a través de una estrategia nativa, una aplicación se desarrolla específicamente para una plataforma móvil (como Android o iOS), mientras que una estrategia híbrida permite que el desarrollo de aplicaciones logre un mejor funcionamiento en cualquier plataforma y dispositivo, en teoria se evita tener que hacer dos desarrollos por separado
Otra diferencia fundamental es que las aplicaciones híbridas utilizan como núcleo el mismo código para cada plataforma (HTML5, un lenguaje de programación usado para crear sitios web), y solo necesitan algunos ajustes para adaptarse al sistema operativo deseado.
En cambio, una app nativa no permite esto, pues el código utilizado para Android, iOS, Windows o macOS necesita un desarrollo único y diferenciado.
Nativas
Significa que en su desarrollo se utilizó el lenguaje de programación nativo del dispositivo
Objetive C o Swift para iOS
Java para Android
Net para Windows Phone
Es un modelo cien por ciento dependiente de la plataforma y las Apps no son portables, hay que desarrollar una por plataforma.
Los principales paradigmas asociados a las Apps nativas son:
- Se puede lograr el mejor rendimiento posible.
- Se puede lograr un look&feel ópitimo acorde al sistema operativo
- Se puede acceder a todas las capacidades del dispositivo
Características de una app nativa
Aprovecha mejor las funciones integradas al dispositivo, es decir, las ventajas del GPS, detector de movimiento, cámara y otras facilidades que vienen hoy en día en la mayoría de teléfonos.
Aporta mayor seguridad, ya que se aprovechan los protocolos integrados al dispositivo en cuestión.
Estas apps son más rápidas y ofrecen un mejor desempeño. Esto se debe a que trabajan bajo el estándar UX/UI de la plataforma para la que fueron diseñadas.
Se requiere subir actualizaciones de forma regular, puesto que es la única forma de mantener la aplicación al día. Características de una app híbrida
Nativas Hibridas
Este tipo de aplicación aprovecha al máximo la versatilidad de un desarrollo web y tiene la capacidad de adaptación al dispositivo como una app nativa. Permite utilizar los estándares de desarrollo web (HTML5) y aprovechar las funcionalidades del dispositivo tales como la cámara, el GPS o los contactos. Además, comporta un menor coste que una aplicación nativa y una mejor experiencia de uso que una aplicación web. Sin embargo, tiene un rendimiento ligeramente inferior al de una aplicación nativa debido a que cada página debe ser renderizada desde el servidor y supone una mayor dificultad de desarrollo.
Características de una app híbrida
Desarrollo unificado. Como se mencionaba antes, los desarrolladores pueden utilizar la misma base de código para plataformas diferentes, lo que permite ahorrar dinero y tiempo.
El desarrollo de aplicaciones es más rápido y requiere de un menor esfuerzo.
Se puede escalar con mayor facilidad.
Los juegos y animaciones 3D pueden ejecutarse, pero no funcionan de la misma manera que en una app nativa.
El rendimiento es más lento, ya que se trata de tecnología web integrada a plataformas móviles (que no siempre es lo ideal).
El diseño UX suele ser inferior al que ofrecería una aplicación nativa.
Dentro de las aplicaciones hibridas actualmente destacan dos tecnolgias React Native y Flutter
Flutter vs React Native
A medida que más y más personas están adoptando la tecnología más moderna. La demanda de aplicaciones móviles ha aumentado en gran medida. Para mantenerse al día con la creciente necesidad de los clientes y las empresas, la entrada constante de tecnología de nicho, marcos y plataformas se convierte en una necesidad.
Para desarrollar una aplicación móvil nueva para el nuevo segmento de negocios. Los desarrolladores necesitan una tecnología robusta que haga que el tiempo de codificación sea simple y eficiente. Para lograr esto, muchos desarrolladores han comenzado a usar la aplicación multiplataforma. De modo que pueden aprovechar sus características para diseñar aplicaciones de comercio electrónico, aplicaciones interactivas y aplicaciones sociales.
Flutter y React native son los dos marcos de desarrollo principales que compiten para demostrar su valía y que son los anfitriones del desarrollo de aplicaciones móviles multiplataforma(hibridas).
Facebook introdujo React Native y en ningún momento el marco ganó popularidad y las compañías que lo utilizaron se beneficiaron enormemente. React Native es conocido como el futuro de las aplicaciones híbridas.
Flutter introducido por Google es un novato en el mundo de las aplicaciones móviles. No es de extrañar que Flutter ayude a los desarrolladores a crear hermosas aplicaciones nativas y les ayude a desarrollar aplicaciones multiplataforma con facilidad.
¿Qué es Flutter?
Flutter es un kit de desarrollo de IU de código abierto (UI Toolkit) de Google para el desarrollo de aplicaciones compiladas de forma nativa. Actualmente ofrece a los usuarios la opción de compilar aplicaciones para plataformas web, iOS, Android, Linux, Windows, Mac y Google Fuschia.
La primera versión de Flutter, conocida como “Sky”, funcionaba en el sistema operativo Android. Se presentó en la cumbre de desarrolladores de Dart de 2015 como una solución que podía ofrecer un renderizado de 120 fps. Google anunció el lanzamiento de Flutter Release Preview 2 durante el discurso de apertura de Google Developer Days en Shanghai. Esta fue la última versión importante de Flutter antes de Flutter 1.0. El evento Flutter Live el 4 de diciembre de 2018 vio el lanzamiento de Flutter 1.0. Flutter 1.12 se lanzó en un evento interactivo de Flutter el 11 de diciembre de 2019.
La versión 1.17.0 de Flutter y la versión 2.8 de Dart SFK se lanzaron el 6 de mayo de 2020. Se agregó compatibilidad con la API Metal en esta versión. Esta función mejoró enormemente el rendimiento de los dispositivos iOS, ofreciendo nuevos widgets de materiales, herramientas de seguimiento de red y mucho más.
Arquitectura de Flutter
Los componentes principales de Flutter incluyen el lenguaje de programación Dart, el motor Flutter y la biblioteca Foundation.
Lenguaje de programación Dart
Las aplicaciones de Flutter se desarrollan con el lenguaje de programación Dart. Utiliza muchas de las funciones más avanzadas de este lenguaje. Flutter opera en la máquina virtual Dart que cuenta con un motor de compilación en tiempo de ejecución, en macOS, Linux, Windows y a través del proyecto Flutter Desktop Embedding.
Flutter utiliza la comparación JIT durante los procesos de escritura y depuración de una aplicación. Esto permite la recarga activa para permitir a los usuarios incorporar cambios en el archivo de origen para inyectarlos en una aplicación en ejecución. Flutter extiende el soporte de widget con estado de recarga activa. Permite que los cambios en el código fuente se reflejen en las aplicaciones en ejecución, sin perder el estado ni reiniciarse.
Las versiones de lanzamiento de la aplicación Flutter se compilan utilizando la versión inicial (AOT) en iOS y Android. Esto permite un alto rendimiento del marco en dispositivos móviles.
Motor de Flutter
El motor Flutter, que se ha escrito principalmente en C++ ofrece soporte de renderizado de bajo nivel por la biblioteca de gráficos Skia de Google. Además, puede interactuar con SDK específicos de la plataforma, como los proporcionados por iOS y Android. El motor Flutter es un motor de ejecución portátil para alojar aplicaciones Flutter. El motor implementa bibliotecas de Flutter como E/S de archivos y redes, animación y gráficos, arquitectura, soporte de accesibilidad y varios componentes de compilación y tiempo de ejecución de Dart. La mayoría de los desarrolladores usan el marco Flutter para interactuar con Flutter. El marco Flutter ofrece una estructura receptiva junto con widgets de diseño, base y plataforma.
¿Qué es React Native?
Native es una biblioteca de JavaScript de Facebook. Se utiliza para el desarrollo nativo de aplicaciones para sistemas iOS y Android.
Historia
Mark Zuckerberg, fundador de Facebook, comentó en 2012 que la empresa debería comenzar a enfocarse en lo nativo en lugar de en HTML5. Este era el concepto detrás de React Native, cuando Facebook comenzó a crear una oferta móvil. Jordan Walke generó elementos de IU para iOS a partir de un hilo de JavaScript en segundo plano. Se organizó un Hackathon para mejorar el prototipo para desarrollar aplicaciones nativas. Facebook lanzó la primera versión de React en 2015.
Implementación
React Native tiene principios operativos idénticos a los ReactJs. Sin embargo, React Native no utiliza Virtual DOM para manipular DOM. React Native se ejecuta dentro de un proceso en segundo plano que interpreta directamente JavaScript creado por el usuario en un dispositivo final. Utiliza la serialización para comunicarse con una plataforma nativa. React Native no se basa en HTML. Utiliza sintaxis JSX y JavaScript puro.
¿Hay diferencias al publicar en las tiendas de aplicaciones?
El proceso es el mismo para Flutter y React Native. Las diferencias clave se basan en el proceso de publicación de la Apple Store frente a Google Play Store. Por favor, consulte los detalles de cómo publicar en cada tienda a continuación:
App Store
La App Store requiere que los usuarios paguen una tarifa anual de $99 por desarrollar y distribuir sus productos móviles. Los usuarios deben formar parte del Programa de Desarrolladores de Apple para crear y distribuir aplicaciones en la App Store.
Los miembros del Programa de Desarrolladores de Apple obtienen acceso a todas las tecnologías modernas que ofrece la empresa para crear aplicaciones atractivas y de vanguardia. Algunas de estas tecnologías incluyen Apple Maps, Apple Pay, HomeKit y HealthKit. Apple proporciona a los usuarios todas las API y SDK para crear experiencias de usuario atractivas.
Los usuarios de la App Store también pueden probar sus aplicaciones antes de su lanzamiento. Las pruebas beta de TestFlight permiten a los usuarios compartir las primeras versiones de productos con miembros de su equipo interno para obtener feedback completo sin demora. El programa de desarrolladores de Apple permite que hasta 25 miembros del equipo de desarrollo realicen pruebas beta si tienen un rol de administrador o desarrollador en iTunes Connect. Cada miembro también puede probar una aplicación en 30 dispositivos. Los desarrolladores ahora encuentran bastante conveniente publicar sus productos en la App Store de Apple.
Google Play Store
Se necesita una tarifa de $25 para registrarse para tener una Google Publisher Account. Pero la diferencia es que un usuario solo tiene que pagar la tarifa una vez, a diferencia de los usuarios de la plataforma Apple que deben pagar su tarifa anualmente.
Al registrarse, la Google Publisher Account de un usuario se vincula a su consola de desarrollo. La Consola para Desarrolladores de Google Play permite la carga de aplicaciones de Android, la creación de páginas de productos la administración de suscripciones y compras dentro de la aplicación, y la publicación de aplicaciones. Los usuarios también pueden modificar la distribución de aplicaciones y promocionar sus aplicaciones. La Consola del Desarrollador proporciona muchas funciones útiles que facilitan la publicación de aplicaciones.
Las aplicaciones se publican más rápidamente en Google Play Store que en Apple App Store. Google Play solía depender de algoritmos para el escaneo de aplicaciones para lanzar aplicaciones más rápido. Ahora, Google depende de un equipo de revisores para examinar todas las solicitudes enviadas antes de que se publiquen en Google Play. Los tiempos de revisión de la solicitud siguen siendo inferiores a 3 horas a pesar del examen manual.
Wep App
La aplicación web es la opción más sencilla y económica de crear aplicaciones, puesto que al desarrollar una única aplicación se reducen al máximo los costes de desarrollo. Asimismo, en este tipo de aplicaciones, puede utilizarse el “responsive web design”, creando así una única aplicación adaptada para todo tipo de dispositivos. Por el contrario, la aplicación web ofrece una peor experiencia de usuario, puesto que ignora las características del dispositivo y una menor seguridad ya que depende de la seguridad que ofrezca el propio navegador.
¿Qué es PWA?
PWA (Progressive Web App) no es un término nuevo (Google lo introdujo en 2015), pero es desconocido para muchas personas. Las PWA se definen comúnmente como las Apps que reúnen lo mejor de las aplicaciones web y de las nativas, incluso llegando a ser entendidas como un punto medio o una forma evolucionada.
La base son páginas webs, pero utilizan tecnologías que hacen que su estética y funcionamiento se asemejen enormemente a una App nativa, por ejemplo, mediante la ejecución en segundo plano. Se accede a ellas a través de un navegador, pero se puede anclar un acceso directo en nuestro dispositivo (en la pantalla de inicio o en el menú de aplicaciones). No dependen de sistemas operativos (se ejecutan en el navegador) y van incorporando funcionalidades nativas del dispositivo.
Características de una PWA
Para entender en mayor profundidad qué ofrece una Progressive Web App y, por tanto, en qué se diferencia de otro tipo de aplicaciones o de las webs comunes, pasamos a señalar algunas de las características que la definen:
Responsive
En la actualidad, la mayoría de webs cuentan con diseño responsive que las permite adaptarse a diferentes dispositivos, algo imprescindible con el papel predominante de los smartphones. A pesar de que las PWA van más allá del simple diseño responsive, este se puede seguir mencionando como una de sus características principales. Estas Apps deben adaptarse automáticamente a cualquier formato, navegador o dispositivo (con los consecuentes cambios de medidas y resolución), y más considerando la naturaleza mobile de las mismas.
Actualizada
Las PWA siempre mostrarán su última versión al usuario, con el empleo de actualizaciones automáticas, de manera constante e instantánea y sin necesidad de descargarlas. Esto es posible gracias al empleo de Service Workers y porque no deja de ser una web App, independiente de la publicación (y todo el proceso de revisión e instalación por parte del usuario que conlleva) en los markets de aplicaciones.
Segura
Se usa siempre el protocolo seguro HTTPS que, además, es necesario para la instalación del Service Worker. Esto posibilita asegurar que el acceso sea seguro y que el contenido servido no haya sido sujeto a manipulaciones. Se emplean tecnologías como TLS para el cifrado web.
Rápida
Por lo general, una PWA tiene la velocidad, tanto de carga como de navegación, optimizada. Esto permite que los contenidos se muestren al usuario prácticamente al instante, ya que se apoyan en el almacenamiento en la caché. Las interacciones, tales como clics o scroll, también deben ser inmediatas. El menor peso de la Progressive Web App en comparación a la App nativa es un factor decisivo para ello.
Offline
Una PWA debe permitir el acceso, ya sea de manera parcial o incluso total, a pesar de que no haya conexión a Internet (o esta sea de baja calidad). Para que se pueda servir contenido a los usuarios que estén offline, se utilizan los service workers y el almacenamiento en caché de la información esencial para iniciar la App, que se realiza desde la primera vez que esta se abre. Así, en las visitas posteriores, se puede disponer de cierto contenido independientemente de la red. Esto se basa, a la vez, en la “App shell”, es decir, la estructura básica de la App, que se podrá mostrar aunque existan problemas con el contenido. Todo ello deriva en una mejor experiencia de usuario y evita la frustración que genera la imposibilidad de acceso.
Multiplataforma
En su desarrollo, la tecnología utilizada contempla su ejecución en diversos dispositivos, sistemas operativos y navegadores. Esto, además de ser clave a la hora de ofrecer una experiencia de usuario satisfactoria y alcanzar a más público potencial, supone facilidades para los desarrolladores y permite abaratar costes, puesto que no se requieren programaciones diferenciadas (algo que sí ocurre con las Apps nativas).
Indexable y enlazable
El contenido de una PWA es rastreable e indexable, de forma que pueda aparecer como resultado en un buscador. Además, esta se puede compartir mediante una URL, con la posibilidad de que la otra persona la utilice sin necesidad de instalarlo.
Con acceso directo
Las webs a las que se acceda desde el navegador que dispongan de una versión PWA suelen informar al usuario, invitándole a “añadirla a su pantalla de inicio”. Estas aplicaciones se pueden utilizar desde el navegador, pero también se pueden instalar en el dispositivo. Esta instalación no requiere de una “descarga” tal y como la conocemos, sino que se basa en la inclusión de un acceso directo en la pantalla de inicio o escritorio de nuestro dispositivo. Este se muestra como un icono más, prácticamente idéntico al de cualquier App nativa.
Apariencia nativa
La interfaz de usuario y, en general, la apariencia de una PWA es muy similar a la de las Apps nativas, tanto en estética como en la manera de interactuar y navegar por ella. A esto contribuyen elementos como una pantalla de inicio, que se ejecute en una ventana de aplicación propia, totalmente responsive, que ocupe la pantalla por completo (sin la barra que muestra la URL), etc.
Funcionalidades propias de una App nativa
Con la evolución de las PWA, han ido adquiriendo opciones que antes se reservaban únicamente a las Apps nativas, como el acceso a distintas funciones del dispositivo. Las Progressive Web App pueden, por ejemplo, acceder a la geolocalización del dispositivo, al Bluetooth, sincronizarse en segundo plano o enviar notificaciones push (incluso cuando no está abierta la PWA). Estas notificaciones son una potente herramienta de comunicación que permite informar al usuario e invitarle a acceder, aumentando las visitas y, en consecuencia, las conversiones. Se debe considerar que estas posibilidades no están disponibles para todos los navegadores.