En este artículo vamos a hablar de aplicaciones multiplataformas, vamos a contar qué son y cómo funcionan, cuáles son los principales frameworks existentes, y vamos a enfocarnos en mayor detalle sobre los dos principales frameworks que existen hoy en día en el mercado: React Native y Flutter, brindando información que nos permita tener un panorama más claro a la hora de elegir uno.

 

¿Qué es el desarrollo de aplicaciones multiplataforma?

Antes de comenzar, definamos el término desarrollo de aplicaciones multiplataforma y dividámoslo en dos categorías: desarrollo híbrido y desarrollo nativo.

Las aplicaciones multiplataforma son aplicaciones que se pueden desarrollar utilizando una única base de código y funcionan de manera prácticamente idéntica en los sistemas operativos iOS y Android. (En este artículo, nos enfocaremos sólo en el desarrollo de aplicaciones móviles; y no en aplicaciones web y de escritorio).

 

Desarrollo Híbrido

Las aplicaciones híbridas son aplicaciones móviles diseñadas de manera similar a las web apps utilizando CSS3, HTML5, y JavaScript, junto con un framework que permite adaptar la vista web a cualquier vista de un dispositivo móvil. También poseen componentes nativos, desarrolladas para una plataforma en particular como Android o iOS, que se combinan con estos elementos webs mencionados anteriormente como parte de la solución para el desarrollo de estas aplicaciones.

Este tipo de aplicaciones se instalan en un dispositivo móvil como cualquier aplicación, y pueden descargarse de las tiendas oficiales de Android e iOS, Play Store y App Store respectivamente.

 

Desarrollo Nativo

Las aplicaciones nativas se desarrollan con los SDK nativos de sus plataformas de destino,  Android Studio y Xcode para Android e iOS respectivamente. Esto significa que no comparten ningún código entre plataformas y la interfaz de usuario se implementa mediante bibliotecas y widgets específicos de la plataforma.

 

Frameworks multiplataforma

Si bien existen varios frameworks multiplataforma, los cuales son válidos y elegibles como solución para el desarrollo de una aplicación híbrida, profundizaremos el análisis, entre los dos más populares: Flutter y React Native. 

Sólo por mencionar algunos:

 

• PhoneGap: es un framework gratuito open source que permite crear aplicaciones móviles híbridas en el contexto de HTML5, Javascript y CSS3. Aunque fue uno de los pioneros en intentar impulsar el desarrollo híbrido, principalmente por sus defectos de rendimiento y limitaciones, no prosperó. Todavía se utiliza (aunque muy poco) por lo que es una herramienta que no recomendamos actualmente. 

 

• Xamarin: Puede ser útil para aplicaciones simples, principalmente basadas en formularios, pero es indudable que la mayoría de los competidores en el mercado se desempeñan mucho mejor de todos modos. Ya sea por tiempos de construcción más rápidos, bibliotecas más estables, mejor soporte de herramientas, un IDE rápido y sólido, lenguajes modernos (Swift, Dart) o Kotlin.Native como compañero perfecto para escribir aplicaciones multiplataforma. En definitiva, todo esto puede repercutir en el tiempo de entrega y, por lo tanto, en los costos del proyecto.

 

• Ionic: JavaScript, CSS, HTML, Angular, TypeScript, etc. son compatibles con Ionic y su framework de trabajo de Apache. Los desarrolladores de Ionic tienen acceso a un mayor conjunto de componentes de UI (interfaz de usuario) y conjuntos de herramientas que son más fáciles de usar.

Si bien tuvo su momento de auge, React Native y Flutter evolucionaron mucho más y hacen que tampoco sea una herramienta a contemplar. 

 

Flutter y React Native: ¿Cuál es mejor en 2022?

Tanto Flutter como React Native se encuentran entre los mejores frameworks de desarrollo multiplataforma disponibles en la actualidad. Ambos usan widgets nativos para ofrecer una interfaz de usuario receptiva altamente personalizable mientras comparten código en diferentes plataformas.

Google desarrolla el framework Flutter, mientras que Facebook desarrolla el framework React Native, por lo que estos gigantes tecnológicos tienen equipos muy grandes que se ocupan de todo, desde los SDK de la plataforma hasta su documentación, soporte, etc.

Si bien las aplicaciones Flutter y React Native son nativas, es decir, son compiladas como código nativo, tienen ventajas sobre el desarrollo de aplicaciones nativas tradicionales porque pueden compartir una proporción significativa de su código base para ambas plataformas, Android e iOS.

 

Cómo se comparan 

La principal diferencia entre Flutter y React Native es que React Native no se compila en un lenguaje móvil nativo (Java, Swift, Objective-C), sino que simplemente ejecuta su código JavaScript. Flutter, por otro lado, compila su lenguaje Dart en nativo.

A los programadores que ya están familiarizados con JavaScript (ES2015+) o TypeScript/Flow les resultará mucho más fácil empezar a trabajar con React Native. Esto es particularmente cierto para los desarrolladores que han usado React para la web, ya que existe una gran superposición entre React y React Native.

JavaScript todavía tiene una participación de mercado significativa en el espacio de desarrollo móvil, y debido a que tanto React Native cómo Flutter le permiten elegir su lenguaje de programación favorito, es difícil decir cuál será más popular en 2022.

 

Cómo funcionan 

Aunque estos frameworks multiplataforma comparten muchos conceptos y características, cada uno de ellos se creó con diferentes objetivos en mente.

React Native fue diseñado para proporcionar un rendimiento de código nativo combinado con la facilidad de desarrollo que React web trae a la mesa. La idea no es usar un solo conjunto de componentes compartidos entre iOS y Android, sino tener interfaces de usuario completamente separadas en un solo paquete o archivo JavaScript.

Flutter se creó principalmente para satisfacer las necesidades de Google. En otras palabras, otro intento de combinar ciclos de desarrollo rápidos con el rendimiento del código nativo y crear componentes de interfaz de usuario reutilizables que se pueden compartir entre las aplicaciones de iOS y Android. Es por eso que Flutter de Google es mucho más rápido que React Native.

Flutter también se diseñó con la idea de hacer que el desarrollo de aplicaciones sea más fácil y accesible porque permite escribir código usando Dart, un lenguaje que se puede aprender en muy poco tiempo.

Es por eso que creemos que Flutter será el framework de desarrollo móvil elegido por las empresas que necesitan crear muchas aplicaciones móviles nativas muy rápidamente sin sacrificar el rendimiento o las funciones. 

 

Pros y contras de las aplicaciones Flutter y React Native

Las aplicaciones creadas con Flutter no se distinguen de las nativas. Vienen con el mismo rendimiento y la misma apariencia (aparte de algunos aspectos estilísticos específicos de la plataforma).

Los principales problemas de los que las personas suelen quejarse al crear aplicaciones con React Native están relacionados con su entorno de tiempo de ejecución, que es más pesado que administrar procesos separados para cada arquitectura. Esto significa que no podrá lograr un rendimiento de aplicación nativo puro con React Native, aunque puede acercarse y para la mayoría de las aplicaciones no presenta diferencias notables.

Flutter no ofrece los mismos beneficios que React Native a la hora de soportar la reutilización de código base existente y permitir la reutilización de algunos componentes compartidos entre aplicaciones para iOS y Android.

 

Pros y contras en términos de rendimiento 

En la práctica, React Native es tan rápido como las aplicaciones nativas puras porque puede lograr el mismo rendimiento que una aplicación de iOS sin necesidad de cambiar la configuración de compilación de iOS.

Flutter viene con su propio compilador adelantado que emitirá un código optimizado para iOS y Android una vez que haya creado su proyecto. Obtiene un rendimiento nativo sin tener que enviar todo el código base en el binario de su aplicación, como con React Native.

 

Pros y contras en términos del tamaño de la aplicación

Las aplicaciones de React Native generalmente vienen con un tiempo de ejecución de JavaScript que pesa alrededor de 300 kb comprimidos en gzip, aunque es posible reducir este número ajustando algunas opciones que pueden traer problemas en la interfaz de usuario como en la calidad de las imágenes.

Flutter viene con un compilador adelantado que permite a los desarrolladores enviar solo la base de código necesaria para la aplicación que están creando sin tener que empaquetar nada con ella.

Es posible ejecutar Flutter dentro de una VM de JavaScript existente si lo desea, lo que le permitirá ahorrar el espacio necesario para su aplicación.

 

Pros y contras en términos de la versión SDK mínima requerida

Por lo general, React Native se puede compilar con cualquier SDK de iOS 9+ o Android 5.0+ sin ningún problema, pero no hace falta decir que para lograr el mejor rendimiento, debe apuntar a las últimas versiones de SDK disponibles en el momento de su lanzamiento.

En la práctica, las aplicaciones React Native se pueden compilar con SDK de iOS y Android más antiguos con un conjunto limitado de funciones disponibles en tiempo de ejecución, aunque para obtener todas las funciones, aún debe apuntar a las últimas versiones de SDK disponibles.

Las aplicaciones de Flutter se pueden compilar con la versión de Android 21 (Lollipop) y posteriores, aunque se recomienda compilar con las últimas versiones de SDK disponibles para obtener el mejor rendimiento.

Flutter se puede ejecutar en iOS 8 o posterior, pero llamar a algunas API puede provocar fallas en el tiempo de ejecución dado que Apple ha dejado de usar la mayoría de las API que usa Flutter.

 

Pros y contras en términos de desarrollo de la interfaz de usuario

Flutter viene con su propio conjunto de widgets para renderizar la interfaz de usuario, lo que significa que puede reutilizar el código existente de iOS o Android al crear aplicaciones de Flutter.

Algunas bibliotecas de terceros están disponibles para facilitar la reutilización de los componentes nativos existentes, aunque esto todavía es un trabajo en progreso, ya que no es fácil asignar widgets de Flutter a los componentes de la interfaz de usuario de iOS y Android existentes.

React Native viene con un puente que le permite reutilizar el código existente de iOS y Android como módulos de JavaScript, además de exponer algunas API para crear manualmente el puente entre sus componentes nativos de la interfaz de usuario y el código de JavaScript que se encargará de representarlos.

 

Pros y contras en términos de depuración

React Native viene con su propio depurador que se puede adjuntar a su aplicación en ejecución en iOS y Android, lo que brinda a los desarrolladores una vista previa del estado actual de la máquina virtual de JavaScript junto con varias herramientas para inspeccionar el uso de la memoria o ajustar algunas opciones sobre la marcha.

Flutter también viene con su propio depurador, que se puede adjuntar a su aplicación en ejecución en iOS y Android, lo que brinda a los desarrolladores una vista previa del estado actual del motor de renderizado, así como varias herramientas para inspeccionar el uso de la memoria o ajustar algunas opciones sobre la marcha. .

 

Pros y contras en términos de reutilización de código entre plataformas móviles

React Native viene con su propio conjunto de API que se pueden usar al desarrollar iOS y Android. Aunque la mayoría de las empresas que usan React Native desarrollarán sus aplicaciones primero en una plataforma antes de trasladarlas a la otra plataforma, también es posible escribir componentes compartidos entre sus aplicaciones de iOS y Android si así lo desea.

Las aplicaciones de Flutter están creadas con un código que es específico de la plataforma, por lo que no es posible compartir ningún código entre su aplicación iOS y Android. Sin embargo, hay bibliotecas de terceros disponibles para facilitar la reutilización de componentes nativos existentes.

 

Flutter o React Native,  ¿cuál es más fácil de aprender?

Tanto React Native cómo Flutter son igualmente fáciles de aprender (en términos de API), aunque esto dependerá de la experiencia del desarrollador. Ambos tienen una comunidad de desarrolladores grande y comprometida que puede ayudar a los nuevos desarrolladores y está constantemente creando nuevas herramientas y componentes. Sin embargo, en el caso de Argentina, la comunidad de React Native tiene mayor presencia que la de Flutter.

Para un desarrollador nuevo con poca o ninguna experiencia en codificación, probablemente recomendaríamos comenzar con React Native, ya que viene con un conjunto de componentes predefinidos que se pueden usar para crear aplicaciones iOS y Android, lo que significa que puede aprender una cosa a la vez. Tiempo sin tener que preocuparse por aprender todas las API utilizadas para renderizar vistas.

Sin embargo, probablemente recomendaríamos elegir Flutter sobre React Native para un desarrollador con algo de experiencia en codificación, ya que las API que ofrece Flutter están más cerca de lo que puede encontrar en iOS y Android.

Además, el equipo detrás de Flutter se está enfocando mucho en garantizar que la experiencia de desarrollo que ofrece Flutter pueda competir con la experiencia de desarrollo que ofrecen los otros SDK (incluido React Native).

Conclusión

Flutter y React Native son excelentes opciones para el desarrollo de aplicaciones multiplataforma. Si bien comparten algunas similitudes, también hay algunas diferencias clave que se deben tener en cuenta antes de decidir cuál usar, como por ejemplo, el hecho de que en React Native hay mayor cantidad de librerías que en Flutter, ya que en el primero se aprovechan librerías que fueron originalmente creadas sólo para JS y Node o React.

De todos modos, la elección del marco multiplataforma adecuado para su aplicación comercial o idea de aplicación de inicio dependerá en gran medida de su experiencia en desarrollo, del equipo de desarrollo y de los elementos nativos a los que deberá acceder su proyecto.

Finalmente, dejamos la puerta abierta a que nos contactes y nos cuentes tu caso. Así, nuestro equipo te puede dar su opinión sobre qué es lo que se ajusta mejor a tus necesidades.

Por último, les dejamos ejemplos de apps realizadas en RN y en Flutter:

Algunos ejemplos de apps hechas en React Native:

• Facebook
• Instagram
• Shopify
• Tableau
• Discord
• Pinterest
• Uber Eats
• Salesforce
• Adidas

 

Algunos ejemplos de apps hechas en Flutter:

• Alibaba
• Google Ads
• Reflectly
• AppTree
• Hamilton Musical
• Google Greentea
• Abbey Road Studios
• Tencent
• JD Finance