Comenzando en el desarrollo móvil: React Native vs Flutter

Jun 2, 2021 | español, Uncategorized | 1 comment

Las últimas tendencias para el desarrollo de aplicaciones móviles han ayudado a muchos clientes a tener mejores experiencias con las empresas que contratan y esto a su vez ha permitido a las empresas aumentar su número de descargas diarias y generar mayores ingresos.

Sin embargo, detrás de cada aplicación hay un proceso de desarrollo de software que utiliza un conjunto cada vez mayor de herramientas que permiten que estas experiencias se produzcan. Hay muchas opciones para estos conjuntos de herramientas e incluso cuando pueden servir para el mismo propósito, las diferencias entre ellas se convierten en el aspecto más crítico cuando los desarrolladores de software quieren tomar una decisión sobre cuál es la mejor herramienta a utilizar.

React Native y Flutter son dos frameworks para el desarrollo de aplicaciones móviles nativas, tanto para iOS como para Android, utilizando un único código base. Los dos frameworks comparten funcionalidades similares y son tendencia en la industria de las aplicaciones móviles en este momento. React Native fue lanzado oficialmente en 2015 y Flutter en 2018, actualmente React Native lidera la carrera, sin embargo, Flutter quiere abarcar más cuota de mercado permitiendo a los desarrolladores publicar también la aplicación final en la web. Ambos frameworks son de código abierto y están respaldados por los mayores actores del juego tecnológico React Native por Facebook y Flutter por Google.

La diferencia clave entre Flutter y React Native es el lenguaje base: dart y javascript, respectivamente. Esta es una diferencia inicial y enorme ya que dart se compila mientras que javascript se interpreta.

Flutter utiliza Dart que ha sido utilizado internamente en el desarrollo en google y ha estado disponible desde 2011 y obtuvo más atención en 2017 con el lanzamiento de Flutter. La mayor diferencia es que Dart es un lenguaje compilado y viene con seguridad de tipo permitiendo a los desarrolladores un prototipo suelto y fuerte para evitar más errores al compilar. Dart es diferente de lo que los desarrolladores están acostumbrados y puede tener una curva de aprendizaje. Aunque los desarrolladores familiarizados con la programación orientada a objetos pueden aprenderlo muy rápidamente.

React Native utiliza javascript que ha existido durante más de veinte años, casi todos los dispositivos electrónicos desde un ordenador, una tableta o un teléfono móvil utilizan alguna forma de javascript. React Native se basa en la biblioteca de javascript React y tener conocimientos de javascript hace que la curva de aprendizaje sea corta y la mayoría de los desarrolladores puedan ponerse al día rápidamente.

Javascript es un lenguaje poco tipado que puede causar algunos problemas durante el tiempo de ejecución si los tipos de datos no se gestionan con cuidado (por ejemplo, pasando una cadena a una función que espera enteros), aunque typescript se utiliza a menudo para garantizar la seguridad de tipos puede complicar las cosas.

Flutter cuenta con una creciente comunidad de desarrolladores que mejoran constantemente las bibliotecas y la documentación. La documentación inicial se considera más organizada que la de React Native en algunos temas.

React Native a fecha de publicación tiene menos estrellas en GitHub con 87,9k frente a las 93,9k de Flutter mostrando que Flutter está ganando popularidad rápidamente. Aunque las estrellas de GitHub son sólo una métrica que puede significar muchas cosas (cuántas personas siguen la biblioteca, cuántas la encontraron útil, etc.) las preguntas de StackOverflow dan más información, ya que muestran cuántos desarrolladores están utilizando actualmente la tecnología en sus proyectos. El total de preguntas sobre Flutter es actualmente de 48.751, mientras que las de React Native son 77.166, lo que sugiere que Flutter está aumentando su popularidad. React Native tiene la ventaja de contar con una comunidad más estable ya que lleva más tiempo en el panorama tecnológico y por tanto tiene más preguntas.

Pero este artículo no va a ser la misma comparación de siempre entre Flutter y React Native, así que vamos a empezar por lo bueno.

Flutter

Configurar

A partir de la configuración del entorno de desarrollo Flutter es más ágil y en la mayoría de los sistemas operativos permite una configuración muy rápida y productiva. El doctor Flutter es especialmente útil para detectar configuraciones problemáticas.

El comando Flutter doctor ejecuta una comprobación exhaustiva del sistema asegurándose de que la cadena de herramientas correcta está instalada, asegurándose de que un IDE está configurado, por defecto pide que se instale Android studio ya que utiliza el emulador configurado dependiendo del sistema operativo.

El médico de Flutter también comprueba los dispositivos conectados al ordenador, las actualizaciones de la versión de Flutter, las licencias de android, todos los dispositivos posibles para la emulación y los IDEs actualmente compatibles con Flutter.

En resumen, tras configurar el entorno de desarrollo se puede desplegar y emular una aplicación de prueba en menos de una hora.

Flutter viene con plugins para android, vs code, y otros IDE’s comunes, En el android studio viene completo con plugins de dart y todas las facilidades para poder emular apps.

A partir de noviembre de 2019, React Native implementó Doctor, que esencialmente comprueba las configuraciones del sistema para acelerar los procesos de desarrollo. Doctor comprueba las configuraciones del entorno node, yarn, npm, Android SDK y Xcode de forma similar a Flutter.

Aunque pretende hacer lo mismo que flutter doctor lo probamos y nos encontramos con problemas mientras se ejecutaba y escaneaba algunos módulos de nodo.

React Native también viene con plugins para vs code y otros IDE’s comunes aunque android studio no soporta el desarrollo.

Configuración de los beneficios de Flutter

Flutter responde muy bien y es muy rápido. Es compatible con dispositivos antiguos y, aunque las aplicaciones son un poco más grandes que las nativas, el rendimiento y los gráficos están optimizados. Muchas funcionalidades y componentes gráficos son compatibles desde el principio, lo que ahorra tiempo a los desarrolladores y no requiere que éstos se metan en los matices de la navegación y la gestión de estados. Esto es genial para la productividad, pero no para la personalización, ya que Flutter es todavía bastante nuevo, algunos plugins y funcionalidades pueden no estar disponibles en las bibliotecas existentes, lo que resulta en la necesidad de codificar y ajustar lo que está disponible. Sin embargo, es muy útil para crear MVP y probar pruebas de concepto.

Desde hace poco, Flutter ha permitido probar la versión beta de Flutter para la web, que permite compilar el código dart en javascript para utilizarlo en el navegador. Esto permite a los desarrolladores crear aplicaciones con soporte web para que puedan ejecutarse en el navegador creando un servidor de desarrollo web y la aplicación web frontal. Así, con el mismo código Flutter permite el desarrollo de aplicaciones web y aplicaciones móviles permitiendo menos redundancia mientras se codifica y prácticas de prueba más simples.

React Native

Por otro lado React Native aunque tiene un ecosistema más maduro, configurar el entorno de desarrollo puede llevar mucho tiempo ya que a veces algunas configuraciones y versiones pueden ser incompatibles entre sí y por lo tanto requieren más ajustes.

Sin embargo, después de la configuración, todo funciona sin problemas. Pero requiere más tiempo para el desarrollo ya que fuera de la caja React Native sólo permite la funcionalidad básica y tiene un montón de opciones para el manejo de los estados, la navegación, y la mayoría de las otras funcionalidades básicas. Esto es genial para la personalización, pero requiere que los desarrolladores profundicen en la aplicación de las bibliotecas de componentes, ya que necesitan entender los matices y detalles de las bibliotecas que necesitan implementar. Esto lleva más tiempo y esfuerzo pero tiene como resultado un producto más personalizable.

La apk generada entre Flutter y React Native es similar en tamaño por lo que no hay mucha comparación aquí. Como ambos son multiplataforma ninguno es completamente Nativo por lo que el tamaño puede ser un problema en algunos casos pero ambas compañías están trabajando en reducir el tamaño de las apk.

Aplicaciones desarrolladas en cada marco

Flutter

Flutter se ha utilizado para desarrollar muchas aplicaciones de uso común, por ejemplo.

Google ads

Esta aplicación permite a los usuarios lanzar campañas de marketing, supervisarlas y contar con la posibilidad de recibir alertas y mensajes.

Alibaba

Los marketplaces completos de Alibaba están desarrollados con Flutter, los usuarios pueden comprar, vender, publicar y pedir información de productos desde los dispositivos móviles permitiéndoles hacer comercio electrónico desde todo el mundo.

Birch Finance

Birch Finance es una aplicación de recompensas para tarjetas de crédito que ayuda a los usuarios a gestionar y optimizar sus tarjetas actuales. Los usuarios pueden controlar sus compras, elegir la mejor tarjeta para sus necesidades y mostrarles las recompensas disponibles.

Music Tutor

Esta aplicación enseña a los usuarios a leer música identificando las notas musicales en sesiones y ejercicios cronometrados.

School Planner

Esta aplicación permite a los estudiantes controlar sus clases y deberes, pueden ver información sobre sus horarios, deberes, calificaciones, exámenes, pruebas, y permite compartir notas y mensajes entre estudiantes y profesores.

App Tree

App tree es una aplicación empresarial para marcas populares como Mcdonald’s en la que las organizaciones pueden auditar, recopilar información y gestionar los flujos de trabajo empresariales. Flutter integra la autenticación de usuarios, la seguridad, el rendimiento y la integración de terceros en su flujo de trabajo.

The new York times

El rompecabezas Ken Ken publicado en el new york times es portado al foro móvil y web del New York Times es apoyado por Flutter.

Google Assistant

Muchas de las aplicaciones de Google Assistant han aprovechado la potencia de Flutter. Flutter para móvil, web, incrustado y de escritorio se ha utilizado en muchas de las aplicaciones de Google. Ya que Flutter y Google Assistant pertenecen al mismo ecosistema.

React Native

React Native se ha utilizado para desarrollar, por ejemplo, las siguientes aplicaciones comunes:

Facebook Ads

Es la primera React Native completa, la aplicación multiplataforma construida por Facebook. El framework Javascript maneja perfectamente los diferentes formatos de anuncios, formatos de fecha, monedas, zonas horarias y todo lo necesario para el marketing.

Walmart

Después de que Walmart implementara node en su infraestructura, portaron su aplicación móvil a React Native, donde pudieron ahorrar tiempo en el desarrollo y dar al usuario una gran experiencia en todas sus compras de comercio electrónico.

Instagram

Instagram es un producto emblemático de Facebook, por lo que, naturalmente, era importante para ellos portar a React Native, su primera implementación fue la vista de notificaciones push, pero con el tiempo portaron la aplicación completa que funciona bien con su backend basado en python.

SoundCloud Pulse

SoundCloud Pulse es una aplicación para creadores que les ayuda a gestionar sus cuentas y subir contenidos.

Wix

Wix es una empresa online que ofrece servicios de alojamiento web y diseño de páginas web. Los usuarios pueden diseñar y construir sus sitios en HTML5/CSS, así como sitios web para móviles, utilizando utilidades de arrastrar y soltar. Los usuarios no necesitan saber programación para poder utilizar Wix.

Airbnb

Airbnb ha utilizado React Native para sus aplicaciones. Según un ingeniero de software de Airbnb, hay 60 miembros trabajando en la tecnología React a diario en su equipo de desarrollo. Actualmente, han cambiado su ciclo de vida de desarrollo, pero han utilizado React Native para su infraestructura base.

UberEats

Esta empresa utiliza React Native para parte de la aplicación. Conectan restaurantes con colaboradores a sus clientes y han desarrollado partes de sus aplicaciones móviles usando React Native

Componentes o widgets

En Flutter casi todo es un widget. Las fuentes, los botones, los elementos de diseño y los estilos son todos widgets.

Los widgets tienen que ser importados desde las bibliotecas de componentes de la misma manera que React Native.

Sólo se importarán los componentes utilizados en la aplicación.

Al igual que los componentes de React Native que se pueden hacer a medida según la necesidad del proyecto, los widgets también se pueden hacer a medida y funcionan de forma similar a los componentes ya que heredan e interactúan con las propiedades de su widget o componente padre.

La principal diferencia entre los widgets y los componentes es que en Flutter los widgets están diseñados para funcionar de la misma manera en IOs y android permitiendo una integración más sencilla y un desarrollo más fácil aunque se podrían tener que hacer ajustes. En React Native hay que ajustar algunas cosas debido al puente de javascript a Native. La principal diferencia es un puente de javascript frente a una compilación directa a código que resulta en una ligera mejora de rendimiento.

¿Qué elegir?

React Native se recomienda para aplicaciones más grandes y complejas ya que su arquitectura robusta tiende a tener menos errores y problemas debido a que tiene más tiempo en el mercado. Por lo general, es más probable que se encuentren soluciones para conocer los problemas y otras opciones para trabajar, ya que más desarrolladores han utilizado React Native que Flutter.

Flutter, por otro lado, tiene un rendimiento mejorado que las aplicaciones React Native ya que permite 60fps en la app y 120fps en las animaciones todo ello mejorando el rendimiento ya que dart compila sin un puente de javascript que requiere React Native. Flutter también compila a una instalación de la app más pequeña permitiendo que ocupe menos tamaño en la memoria interna del teléfono. Sin embargo, algunos problemas podrían ser un obstáculo durante el desarrollo debido al reducido ecosistema.

Aunque la mayoría de las funcionalidades y APIs están disponibles actualmente, es más probable que react native tenga más soluciones, opciones y soluciones que Flutter.

Por lo tanto, para aplicaciones más pequeñas o menos complejas Flutter es un claro ganador pero si se necesita desarrollar una aplicación más grande y compleja React Native es una mejor opción.

Si los desarrolladores vienen del desarrollo web es más rápido y productivo continuar con React Native ya que Flutter requiere conocimientos de dart para el desarrollo.

En resumen, Flutter está alcanzando rápidamente a Flutter y si soluciona estos problemas y aumenta el rendimiento, como es muy probable, podría convertirse fácilmente en la mejor opción en el futuro.

Si estás pensando en crear una aplicación para tu negocio o tu página web, ten en cuenta que para utilizar estas herramientas, lo mejor es contar con un asesoramiento profesional y completo, que te ayude a potenciar el proyecto y te ayude a definir el alcance del mismo. De esta forma, ahorrarás tiempo y costes, obteniendo el mejor resultado para tu proyecto.

Para saber cómo conseguir este tipo de desarrollo, visite: https://www.appspringtech.com/services