Hablemos de desarrollo móvil multiplataforma

Noe Branagan
Oct 11, 2018 · 9 min read

Hemos escuchado mucho de ahorrar esfuerzos y recursos cuando queremos desarrollar una aplicación móvil. Estaremos explorando algunas de las opciones que nos permiten construir aplicaciones realmente nativas tanto para iOS y Android, es decir sin la necesidad de escribir código Objective-C/Swift y Java/Kotlin.

Comencemos por describir algunas de las opciones más populares hoy en día, ver sus diferencias y cuál podría ser la mejor opción para tu próximo proyecto móvil.

flutter.io

Flutter

Es un SDK y también un framework para Dark(lenguaje de programación desarrollado y mantenido por Google). La idea detrás de Flutter es escribir todo el código en Dart el cual es compilado a código nativo que se ejecutará en dispositivo. Utilizas Dart con Flutter para construir interfaces de usuarios(UI) llamadas widgets de las cuales hay muchas provistas por el framework. El framework tiene pre-configurados componentes o mejor decir widgets (Buttons, Navigation Bars, etc) los cuales son los más utilizados y también puedes crear tus propios para tus necesidades particulares.

facebook.github.io/react-native/

React Native

Es muy conocido por la comunidad de desarrolladores web, framework creado por Facebook, utiliza JavaScript como lenguaje y React (librería también creada por FB) la cual nos permite crear tremendas interfaces de usuarios basadas en los componentes que contiene esta.

A diferencia de las aplicaciones en React que están construidas para funcionar el el browser, no estarás utilizando tags de HTML en este caso serán componentes pre-construidos que se compilan a código nativo. Algo importante a destacar es que si tienes experiencia con React(puedes utilizar paquetes como Redux) y sabiendo JavaScript puedes comenzar a construir apps bien rápido con React Native.

nativescript.org

NativeScript

También utiliza JavaScript para construir aplicaciones nativas, permite utilizar diferentes opciones como puro JavaScript/TypeScript con Angular y Vue.js. Todas estas opciones están activas(en desarrollo) y mantenidas una independiente de la otra, tendrás que revisar la documentación para identificar cual es más conveniente basado en tu experiencia o que una de estas tenga más componentes que la otra.

Al igual que Flutter y React Native, NativeScript viene con gran cantidad de componentes pre-construidos para ser utilizados en las interfaces de usuarios y igual que React Native no trabaja con HTML.

Ionic

Sigue una estrategia diferente de las otras pero es un framework que no podemos dejar fuera de mencionar porque es muy utilizado por desarrolladores web.

Con Ionic continuas teniendo un app nativa pero creando un web app es decir HTML, CSS & JS la cual está empaquetada en una aplicación nativa que solo contiene un webview(un navegador solo con la parte donde se muestra el contenido web). Como estás construyendo una página web Ionic es un framework muy fácil de adoptar por cualquier desarrollador web.

También provee herramientas que hace el desarrollo fácil de manejar, estas incluyen librerías que te permiten acceder elementos del hardware como la cámara, el GPS, y simuladores.

¿Que opciones tenemos disponibles?

Opciones disponibles

Nativo(Native). significa Kotlin y Swift lo cual nos requiere aprender estos lenguajes, lo bueno de esto es que tendremos acceso a todos los features de estas plataformas cuando lancen funcionalidades nuevas las tendremos inmediatamente y que también que no necesitamos ningún paso adicional para llevar nuestro código a lenguaje nativo(machine code), la única desventaja que tenemos es de mantener los SDKs para cada plataforma utilizando sus respectivos lenguajes de programación, para iOS Swift/Objective-c y para Android Kotlin/Java.

Híbrido(Hybrid). Es un mecanismo tomado por Cordova y Ionic donde la idea es construir un website básicamente HTML, CSS & JS y es cargado en un componente llamado webview(un navegador sin la barra de navegación y las otras opciones), esencialmente tu webpage es ejecutado desde una aplicación nativa que contiene un webview y todos tus recursos están empaquetados dentro de un App que puede ser publicada en las tiendas para que pueda ser descargadas por tus usuarios.

Compiladas(Compiled). Está opción trata de utilizar un solo lenguaje de programación con el fin de obtener una App nativa, React Native, NativeScript y Flutter trata de proveer. La idea es trabajar con una sola tecnología y un lenguaje de programación como JS para React Native/NativeScript y Dart para Flutter, el código es parcialmente compilado a código nativo para ser mas especifico los componentes gráficos(UI) son compilados a su equivalente nativo y esto típicamente nos ayuda a construir aplicaciones más rápidas si la comparamos con la híbridas.

Aquí vemos una comparación las opciones compiladas, todas tienen en común que utilizan un lenguaje de programación para generar una aplicación nativa. La gran diferencia es Flutter el cual utiliza Dart a diferencia de ReactNative y NativeScript utilizan JavaScript, si eres desarrollador web esto debe ser una ventaja para ti en el otro caso deberás aprender Dart que puedo decir que es un lenguaje fácil de aprender.

Algo muy importante para mencionar es que React Native y con NativeScript el código no es compilado a nativo lo que quiere decir que tu JS no será llevado a lenguaje de máquina en lo contrario se ejecutará en un thread(hilo) separado en la aplicación móvil, lo que si es compilado a lenguaje de máquina son los elementos de UI, aclarando no es una opción híbrida como ionic la cual se mantiene en HTML porque básicamente tenemos una webpage al final, aquí es donde compilar los componentes a nativos nos dará un mejor rendimiento(performance).

En el caso de Flutter es diferente porque compila a ARM y genera una librería C/C++ lo cual nos dice que es lo más cercano a código nativo, Dart no se ejecuta en un thread o instancia separada que tiene que comunicarse con la versión compilada de los componentes, haciéndolo un poco más claro el código Dart es compilado a una librería que es consumida por el código nativo lo cual lo hace más rápido en términos de rendimiento.

Sabemos que JavaScript no fue inventado para esto, es algo que todos tenemos que reconocer se ha probado por el trabajo que han hecho ReactNative y NativeScript en hacer que todo funcione aunque en algunos casos implican realizar soluciones alternas donde muchas de estas pueden convertirse en algo complejo(algunas implican un proxy).

En el caso de Flutter, igual Dart no fue creado para desarrollar aplicaciones móviles pero cómo es manejado y mantenido por la misma compañía(Google), ellos están haciendo una gran inversión en asegurarse que puedas desarrollar aplicaciones multiplataforma con Dart. Personalmente no tengo mucha experiencia con este pero al igual que los demás necesitas ser un poco creativo para encontrar una solución para esos escenarios especiales que tu app puede tener.

Todas la opciones mencionadas tienen componentes preexistentes y también puedes crear tus propios, algunos tienen más widgets/componentes que la otra pero tienes la oportunidad de modificar/crear estos para la plataforma de tu selección, puedes detectar y manejar manualmente dependiendo de la plataforma en que tu app se ejecute.

Escribe una vez, utilízalo en todas partes.

No me malinterpretes, la idea detrás de todas estas tecnologías es de reusar código y utilizar un solo lenguaje de programación. Pero en algunos casos tendrás que proporcionar un desarrollo particular (independientemente que utilices el mismo lenguaje) para cada plataforma.

Un ejemplo muy común es cuando tienes que posicionar elementos en diferentes posiciones dependiendo el diseño proveído o porque este no existe(en el framework de tu elección) para ambas plataformas

Aprende una vez, pública para todas las tiendas

Esto aplica para todas las opciones que hemos estado explorando excepto las nativas. Es cierto que en general sólo tienes todo tu código base en un solo lenguaje pero algunas ocasiones debes buscar alternativas lo cual está muy atado el desarrollo en particular que estés trabajando.

Popularidad y cobertura

Tener un ecosistema vibrante es una cosa buena — pero ¿que tan popular es esta opción? no necesariamente es lo mismo cuando tienes un ecosistema bueno por ser bien adaptado a la industria versus que sea popular por la comunidad de desarrolladores.

Flutter: es muy claro que Google está invirtiendo muchos recuerdos en convertirlo en algo grande y hasta el momento por lo que he apreciado le está funcionando. Puedo decir que construir una aplicación desde una idea a un prototipo es divertido con este.

Nativo: Tenemos muchos libros, cursos, artículos, foros y cobertura de los medios de comunicación en las últimas novedades. Si alguien quiere construir una aplicación de seguro que estará viendo algún material de las plataformas nativas.

React Native: es el más activos de todos en GitHub. Puedes encontrar varias discusiones, una gran comunidad soportada por el popular React y lo más importante JavaScript el lenguaje más popular para desarrollo web. Estos son muy buenos argumentos para tomarlos en consideración.

Performance

Esta métrica habla por si misma — como se diferencian estas tecnologías desde el punto de vista de performance(rendimiento)

Flutter, NativeScript and React Native: Todos estos tres ofrecen tener un App nativo(compilado de tu código) y por esto, proveen mejor performance que Ionic. Realizar mediciones exactas en cual de estos es el mejor es un poco difícil ya que depende mucho en el App que estás construyendo, el dispositivo móvil que estás utilizando, la versión del sistema operativo donde se está ejecutando tu App y la versión de Flutter/ React Native/ NativeScript que estés utilizando, todos prometen buen desempeño es lo único que debes saber!

Los nativos: Prácticamente no hay forma de competir con ellos, ya que todos (los que compilan a nativo)tratan de acercarse a estos.

Híbridas: En el caso de Ionic muestra el peor performance ya que es un aplicación web empaquetada, generalmente esto es mal interpretado “peor” suena extremadamente mal pero esto no significa horrible, simplemente este ofrece el rendimiento más bajo comparado con las otros métodos y si lo vemos desde la perspectiva de los dispositivos que tenemos hoy en dia tu App probablemente se ejecute de manera fluida. Para ilustrar lo que me estoy refiriendo imaginemos tu tienes 100 fps en vez de 140 fps — ¿notarías la diferencia? no creo, en este sentido puedes mantener Ionic como una de tus opciones.

Casos de uso reales

Grandioso que ya estás convencido de que tecnología vas a utilizar — pero como el resto del mundo piensa de esto — aqui una comparacion.

Lenguajes nativos: La gran mayoría de apps disponibles en la tiendas de aplicaciones están escritas en estos lenguajes nativos. Cada uno de actores en la actualidad(Google, Apple) tratan de proveer las mejores herramientas, soporte y las mejoras al día, esto contribuye a que la mayoría de desarrolladores/empresas elijan esta opción principalmente en mi opinión por soporte y mantenibilidad.

React Native: Utilizado por algunas empresas grandes como Facebook(quienes desarrollaron React Native) y también un caso muy conocido en la comunidad el cual es bueno notar por los grandes aportes que han dado es — AirBnB — los cuales tomaron una decisión reciente de moverse a nativo hay un post bueno de sus razones puedes aquí en link. Es bueno resaltar que parte de su popularidad se debe a React.js donde tenemos un gran cantidad de desarrolladores web que conocen esta librería y React Native les ayuda a cerrar la brecha para poder llegar a desarrollar aplicaciones móviles utilizando las herramientas que conocen.

Flutter: Es relativamente nuevo pero con los recursos y el tremendo soporte de Google los cuales lo está utilizando en algunas de sus aplicaciones ejemplo AdWords, ya ha empresas de la industria que están apostando a Flutter por la agilidad que les brinda al crear interfaces y mucho mas si estas muy basado en material, un caso real es Alibaba los cuales están en un mercado muy particular(china) y desarrollaron el app Xianyu(un ecommerce) donde tienen más de 50 millones de usuarios.

Recomendaciones

No existe la bala de plata que nos ayudará enfrentar la decisión de cuál es el mejor, aquí están las consideraciones más importantes que debes tomar antes de elegir uno:

  • Cual nos permite avanzar rápido y cumplir los objetivos del negocio con los recursos que ya tenemos; lenguajes conocidos por los miembros del equipo y experiencias vividas.
  • Elige una que te permita mejorar la experiencia de desarrollo..
  • Si la aplicación móvil es el producto principal de tu negocio, siempre busca casos de usos similares en la industria y mucho mas si esta iniciando el desarrollo, esto te puede ayudar a corroborar tu decisión o ponerla en duda.
  • Lo más importante analiza la data de tus usuarios y trata de identificar esos casos donde tu app tiene bajo rendimiento o crashes y como si el equipo está siendo ágil al momento de solucionar/mejorar los features de tu app con el objetivo de reevaluar tus decisiones muchos casos no es algo particular del framework/librería que elegiste mas bien la estrategia o el diseño que el equipo adoptó.

Noe Branagan

Written by

Isleño caribeño who loves develop products has a passion for mobile development, education and collaboration. Opinions are my own;

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade