Flutter vs React Native: ¿Qué elegir para el desarrollo de aplicaciones móviles?

React Native de Facebook y Flutter de Google han estado creando un gran revuelo últimamente mientras se enfrentan en la carrera para decidir qué marco es EL MEJOR. En este artículo, vamos a ver cómo se comparan entre sí en la industria.

• ¿Qué es Flutter?
• ¿Qué es React Native?
• La diferencia entre Flutter y React Native: una imagen detallada.
• Aleteo para React Native
• ¿Qué hay de nuevo en Flutter?
• ¿Qué hay de nuevo en React Native?
• Preguntas frecuentes sobre el debate de Flutter vs React Native.

Hubo un tiempo en que la industria del desarrollo de aplicaciones móviles solo se restringía a desarrollar una aplicación individualmente para iOS y Android, pero ahora las tornas han cambiado al 100 %.

En la actualidad, invertir en una empresa de desarrollo de aplicaciones móviles que se destaque en el desarrollo de una sola aplicación que funcione tanto en Android como en iPhone, en una base de código, se ha convertido en la agenda comercial de moda.

Cada guía para el desarrollo de aplicaciones multiplataforma menciona que 'The Trend' se volvió popular cuando Facebook lanzó y popularizó su marco de desarrollo de aplicaciones multiplataforma llamado React Native en 2015.

Desde entonces, las empresas, para aprovechar los costos y los beneficios de desarrollo que el desarrollo de aplicaciones React Native tenía para ofrecer, se habían estado moviendo al marco después de obtener una respuesta rentable a la pregunta ' ¿Es React Native la plataforma adecuada para su próximo ? aplicación? '. Fortaleciendo así aún más el debate React Native vs Native .

Y así, sin lugar a dudas, React Native se hizo popular y las mejores fotos como LinkedIn, Instagram, Walmart, etc. se trasladaron a la plataforma.

Una popularidad que hizo mella, bastante impactante, en marzo de 2018.

Google en el Mobile World Congress anunció el lanzamiento beta de su propio SDK multiplataforma llamado Flutter. Y, en solo unos meses, el desarrollo de aplicaciones móviles con flutter ya comenzó a empujar a React Native por su parte de protagonismo, respaldado por el poder que Google le ha otorgado en la forma de características como Soporte para AndroidX , controlador de juego y más .

Volviendo a hoy ahora.

La situación actual es que Flutter y React Native han entrado en una guerra abierta de tracción y adopción masiva y la consulta de búsqueda de cualquiera de los marcos regresa con el resultado que muestra: ' React Native vs Flutter 2019 '.

Miremos hacia atrás en lo que representan los dos marcos para establecer una base de comparación de las mejores soluciones nativas para crear aplicaciones para iOS y Android.

¿Qué es Flutter?

Flutter Engine es uno de los marcos de desarrollo de aplicaciones multiplataforma de código abierto líderes en la industria actual. Fue desarrollado por Google en 2017.

Veamos ahora los pros y los contras de Flutter para tener una idea mucho más clara del marco.

Viene con las siguientes ventajas para crear aplicaciones multiplataforma:

• Un completo ecosistema de desarrollo
• Altamente personalizable
• Google lo hace muy confiable
• Funcionalidad de recarga en caliente
• De código abierto y de uso gratuito

También tiene algunas desventajas, como:

• Gran tamaño de aplicación
• Confianza en herramientas y tecnologías nativas para crear aplicaciones

Las aplicaciones creadas con la ayuda del marco incluyen: Alibaba, Hookle, Topline, OfflinePal, Hamilton, etc.

¿Qué es React Native?

Es un marco de código abierto desarrollado por Facebook en 2015 como su propia tecnología de desarrollo de aplicaciones multiplataforma. Permite a los desarrolladores usar React y JavaScript además de las capacidades de la plataforma nativa requeridas para crear aplicaciones móviles.

Viene con una serie de beneficios como:

• Implementación de componentes de interfaz de usuario nativos
• Componentes listos para usar
• Da acceso a funcionalidades nativas
• recarga caliente
• Altamente fiable
• Código específico de la plataforma
• Fuente abierta
• React Native para la funcionalidad web

Pero el marco de desarrollo de aplicaciones móviles multiplataforma también tiene algunas desventajas, que incluyen:

• Navegación no fluida
• IU compleja

Las aplicaciones creadas con React Native incluyen: Facebook, Skype, Artsy, Vogue, Bloomberg y Tesla, etc.

La disección se ha hecho hasta tal punto que hemos podido realizar una infografía comparativa para conocer el mejor desarrollo de apps multiplataforma de la misma.

La diferencia entre Flutter y React Native: una imagen detallada

Marco de madurez

React Native se lanzó por primera vez en 2015, mientras que el primer lanzamiento beta de Flutter se realizó en el Mobile World Congress, que se llevó a cabo entre el 26 de febrero y el 1 de marzo. Entonces, hablando de madurez, Flutter es menos maduro en comparación con React Native. Dado que aún está en su etapa inicial, el desarrollo de la aplicación Flutter llevará algún tiempo antes de que madure.

reaccionar nativo – 1

Aleteo – 0

Lenguaje de programación

React Native usa JavaScript para crear aplicaciones multiplataforma. Se usa principalmente con React además de otros marcos de JavaScript famosos. Esto hace que sea extremadamente fácil para los desarrolladores web comenzar con su viaje de aplicaciones móviles.

Por otro lado, Flutter utiliza el lenguaje de programación Dart. El lenguaje fue introducido por Google en 2011. Utiliza una serie de conceptos orientados a objetos que son bastante fáciles de aprender y comenzar.

Pero, al ver cómo JavaScript es un lenguaje con el que los desarrolladores comienzan su viaje, el hecho de que React Native sea fácil le otorga más puntos.

reaccionar nativo – 1

Aleteo – 0

Instalación

El marco React Native se instala a través de Node Package Manager (NPM). Para los desarrolladores que tienen conocimiento de JavaScript, el proceso de instalación es extremadamente fácil.

Flutter se instala mediante la descarga de binarios para una plataforma específica desde Github. En el caso de macOS, se debe descargar y agregar un archivo flutter.zip adicional como variable PATH.

Si bien el marco Flutter y React Native carecen de una instalación de una sola línea con un administrador de paquetes nativo para un sistema operativo, la instalación de Flutter requiere un paso adicional. Debido a esto, el punto es React Native.

reaccionar nativo – 1

Aleteo – 0

Configuración y configuración

El proceso de configuración de Flutter es mucho más sencillo en comparación con React Native. Flutter viene con la provisión de verificación automática de problemas del sistema, algo que React Native pierde en gran medida.

aleteo – 1

Reaccionar nativo – 0

Arquitectura Técnica

La arquitectura React Native se basa en la arquitectura del entorno de tiempo de ejecución JS, conocida como puente JavaScript. Utiliza la arquitectura Flux de Facebook. Flutter, por otro lado, usa el marco Dart que no requiere necesariamente un puente para comunicarse con módulos nativos.

Dado que el motor Flutter viene con una gran cantidad de componentes nativos en el propio marco y no necesita un puente para comunicarse con los componentes nativos, el punto aquí es Flutter.

Aleteo – 0

reaccionar nativo – 1

Interfaz de usuario

Tanto los servicios de desarrollo de aplicaciones de Flutter como sus homólogos de React Native tienen una gran diferencia en lo que respecta a los componentes básicos que utilizan para el desarrollo de la interfaz de usuario. Mientras que, por un lado, React Native aprovecha los componentes nativos de Android e iOS con la ayuda de componentes personalizados o de terceros, Flutter funciona con widgets patentados que están 100% personalizados.

Estos widgets están tanto en Material Design para Google como en Cupertino para Apple, lo que hace que la interfaz de usuario sea uno de los factores de posibilidad de que Flutter reemplace o no a React Native .

Reaccionar nativo – 0

aleteo – 1

Apariencia Nativa

La apariencia nativa es algo que tanto Flutter como React Native para el desarrollo de aplicaciones móviles están promocionando como su USP. Si bien el rendimiento que es un signo de React Native Development está disponible para que el mundo eche un vistazo y explore, no se puede decir lo mismo con garantía de Flutter.

La razón por la que las empresas contratan a los desarrolladores de Flutter es su característica de usar las funcionalidades principales del dispositivo sin ningún componente de terceros, tiene lo que se necesita para llegar lejos en el camino del desarrollo de aplicaciones nativas para iOS y Android.

reaccionar nativo – 1

aleteo – 1

Estampación

Cuando se trata de herramientas, Flutter no coincide con React Native, TODAVÍA. Dado que Flutter tiene al menos 3 años, la gama de IDE y herramientas que lo admiten es mucho mayor.

Pero entonces, Flutter framework definitivamente puede presumir de su compatibilidad con Visual Studio Code, IntelliJ idea y Android Studio. Además, el depurador, Dart linter, el formato automático, el analizador de código y las herramientas de formato automático de Flutter han recibido críticas muy favorables.

reaccionar nativo – 1

Aleteo – 0

Productividad de los desarrolladores

Para un desarrollador que tiene experiencia en JavaScript, React Native es muy fácil. Viene con una función de recarga en caliente que ahorra mucho tiempo a los desarrolladores. Además, los desarrolladores son incluso libres de usar cualquier IDE o editor de texto de su elección.

Flutter también viene con una función de recarga en caliente. Sin embargo, la curva de aprendizaje es un poco mayor cuando los desarrolladores tienen que aprender y usar los nuevos conceptos de Flutter. Además, Dart, al ser nuevo, carece de compatibilidad con muchos editores de texto e IDE, lo que reduce la productividad de los desarrolladores.

Al ser más maduro, React Native brinda más soporte para desarrolladores a una empresa de desarrollo de aplicaciones Flutter en términos de funciones de lenguaje e IDE. Por esto, la puntuación va para React Native.

reaccionar nativo – 1

Aleteo – 0

Documentación

Si bien se espera el estado caótico en el que se encuentra la documentación de React Native de un marco que es en gran medida de código abierto, tiene mucho que aprender de la documentación de Flutter.

Google es conocido por su documentación clara, detallada y bien formulada y con Flutter han continuado con la expectativa.

Cuando observa la comparación actual de Flutter vs React Native en 2019 , encontrará que Flutter se está quedando atrás y lo está. Pero la situación va a cambiar.

Flutter en un lapso de tiempo muy corto ha comenzado a obtener toda la tracción correcta de las empresas, de hecho, cuando mira su página de Showcase, encontrará que las aplicaciones que se han creado con Flutter pertenecen a la categoría compleja, que se están utilizando por varias personas al mismo tiempo.

Agregue a esto las bibliotecas que agregan continuamente en su cartera, junto con la documentación precisa, y obtendrá un marco que está listo para enfrentarse al mundo multiplataforma.

De hecho, el propio Google no rehuye desafiar a Facebook en la cara.

En caso de que te hayas perdido la existencia de la documentación detallada de Flutter para React Native, aquí tienes una versión resumida.

Aleteo para React Native

Flutter para React Native es el documento de Google que ayuda a los desarrolladores a aplicar su conocimiento actual de React Native en el desarrollo de aplicaciones de Flutter.

El documento detalla el proceso de creación de una nueva aplicación flutter . Este enlace explica particularmente el aleteo para reaccionar nativo, esa página destinada a mostrar que cualquier desarrollador que ya haya trabajado en el nativo de reacción puede cambiar fácilmente a Flutter.

La documentación es una clara invitación para que los desarrolladores de aplicaciones de iOS y Android se desvíen de React Native y experimenten la facilidad y flexibilidad de Flutter.

Y la documentación frontal que guía a los desarrolladores para cambiar de React Native a Flutter no es la única forma en que Google está tratando de pasar a React Native en la carrera hacia la adopción masiva. El movimiento para agregar Material Theming y el widget de Cupertino en el ecosistema de SDK multiplataforma ha agregado un toque completamente nuevo de interfaz de usuario expresiva en las aplicaciones desarrolladas con Flutter SDK, algo de lo que React Native aún carece y para lo que depende de otros kits de diseño.

aleteo – 1

Reaccionar nativo – 0

Rendimiento de la aplicación

Hablando de la comparación de rendimiento de Flutter vs React Native , Flutter se lleva la corona. Es mucho más rápido que su contraparte React Native Development. Dado que no existe un puente de JavaScript para iniciar interacciones con los componentes nativos del dispositivo, la velocidad de desarrollo y el tiempo de ejecución se aceleran drásticamente.

Esto sumado al hecho de que Flutter ha establecido el estándar de animación en 60 fps es una clara señal de su alto rendimiento. Por último, dado que Flutter se compila en el código ARM nativo tanto para Android como para iOS, el rendimiento es el único problema que nunca enfrentaría.

Reaccionar nativo – 0

aleteo – 1

Gestión del ciclo de vida

En términos generales, React Native tiende a hacer un trabajo mucho mejor para simplificar el manejo y la optimización del ciclo de vida de la aplicación. Flutter solo te brinda la posibilidad de trabajar con la herencia de widgets que solo permite condiciones sin estado y con estado, menos cualquier herramienta para guardar explícitamente el estado de la aplicación.

reaccionar nativo – 1

Aleteo – 0

Reutilización de código

React Native le permite escribir un código una vez y enviarlo a cualquier lugar mientras acepta las diferencias de la plataforma. Es decir, de vez en cuando, los desarrolladores pueden tener que investigar en qué plataforma se están ejecutando y cargar un conjunto diferente de componentes en función de la plataforma.

El código base de Flutter es mucho más reutilizable. Permite definir un único árbol de widgets de UI y luego reutilizar la lógica definida para que no se tenga que hacer mucha diferenciación.

Por la facilidad que ofrece Flutter, el punto va al marco.

Reaccionar nativo – 0

aleteo – 1

Ayuda de automatización de compilación y versión

Un beneficio incuestionable de Flutter sobre React Native es su ayuda de automatización en la compilación y el lanzamiento. El documento oficial de React Native no incluye ninguna forma automatizada de implementar las aplicaciones de iOS en la App Store. Sin embargo, proporciona un proceso manual para la implementación de la aplicación desde Xcode. Además, React Native se basa en bibliotecas de terceros para crear y lanzar la automatización.

Las características principales de Flutter vienen con una sólida interfaz de línea de comandos. Permite a los desarrolladores desarrollar aplicaciones binarias con la ayuda de herramientas de línea de comandos.

El hecho de que Flutter venga con una increíble herramienta de automatización y se use para implementar aplicaciones desde la línea de comandos lo coloca por delante de React Native en la carrera.

aleteo – 1

Reaccionar nativo – 0

Soporte de prueba

Al estar en el marco de JavaScript , solo hay unos pocos marcos de prueba de nivel de unidad disponibles para React Native. Eso también, no hay soporte oficial en React native cuando tienes que integrar. Hay algunas apariencias de terceros, como Detox y Appium, que se pueden usar para probar la aplicación, pero no son compatibles oficialmente.

Flutter ofrece un amplio conjunto de funciones de prueba para probar las aplicaciones a nivel de unidad, integración y widget. Incluso viene con una gran documentación.

El alcance del soporte de prueba destaca claramente la ventaja de Flutter sobre React Native.

Reaccionar nativo – 0

aleteo – 1

Soporte de CI/CD y DevOps

React Native no lleva ninguna documentación oficial en CI y CD . Flutter, por otro lado, tiene una sección completa que incluye varios enlaces que hacen que la adición de CI/CD para aplicaciones Flutter sea un proceso extremadamente fácil.

aleteo – 1

Reaccionar nativo – 0

Soporte comunitario

React Native, que se lanzó en 2015, ha ganado una gran popularidad con el tiempo. Viene respaldado por una comunidad masiva que organiza varias conferencias y reuniones en todo el mundo. Flutter, aunque está recibiendo mucha atención de la comunidad de desarrolladores, todavía tiene tiempo para llegar al respaldo masivo de la comunidad, como en el caso de las empresas de desarrollo de aplicaciones nativas de React .

Debido a que todavía hay muchos menos recursos para los desarrolladores en la comunidad de Flutter, el punto es una clara evidencia de la ventaja de React Native sobre Flutter.

reaccionar nativo – 1

Aleteo – 0

Popularidad

Entre React Native y Flutter, la cantidad de desarrolladores de React Native e incluso la cantidad de aplicaciones que se ejecutan en él es mucho mayor que en el caso de Flutter. Sin embargo, la brecha se está llenando rápidamente. Según la Encuesta de desarrolladores de Stack Overflow 2019 , Flutter fue clasificado como el lenguaje más querido con más del 75,4 % de personas que mostraron interés en el marco, mientras que el 62,5 % de los desarrolladores mostraron interés en React Native.

Al ver cómo ambos marcos están ganando terreno, es difícil comentar quién es mejor en ambos.

reaccionar nativo – 1

aleteo – 1

Adopción de la industria

Dado que Flutter es considerablemente nuevo en la industria multiplataforma, la cantidad de empresas que han adoptado el SDK para desarrollar sus aplicaciones multiplataforma es muy inferior. Mientras que, por otro lado, los beneficios de usar React Native para el desarrollo de aplicaciones radican en que la página de presentación de las aplicaciones que se han desarrollado utilizando el marco es mucho mayor.

Sin embargo, el hecho es que incluso después de ser nuevas, las marcas con su empresa asociada de creación de aplicaciones Flutter han lanzado aplicaciones en el SDK que son bastante complejas como Google AdWords o Hamilton Musical, e incluso un gigante del comercio electrónico como Alibaba.

reaccionar nativo – 1

Aleteo – 0

Alimentando aún más este fuego de Flutter vs React Native 2019 están las nuevas incorporaciones que se han introducido en las dos principales herramientas multiplataforma.

Entre 2018 y ahora, especialmente después de los anuncios de eventos de Google IO de 2019, se han introducido una serie de cambios nuevos en ambos dominios que ahora han allanado el camino hacia una gran competencia.

Veamos qué hay de nuevo en Flutter y React Native en 2019.

¿Qué hay de nuevo en Flutter en ?

Desde la primera versión beta de Flutter, el marco ha ido creciendo en términos de capacidades de rendimiento y tasas de adopción.

Flutter lanzó su versión 1.7 en julio de 2019 con una gran cantidad de nuevas funciones y mejoras, que incluyen:

Compatibilidad con Android X : esto hace posible que los desarrolladores de aplicaciones de Flutter actualicen sus aplicaciones de Android diseñadas sin comprometer la función de compatibilidad con versiones anteriores.

Características tipográficas enriquecidas de OpenType : Flutter está lanzando un nuevo conjunto de características tipográficas como números tabulares y de estilo antiguo, ceros inclinados, conjuntos estilísticos, etc., que mejorarán la experiencia de la interfaz de usuario de la aplicación.

Además, Flutter para Web también está disponible con un enfoque en llevar a Flutter más allá de los teléfonos inteligentes e ingresar a Chromebooks, Windows y Mac. Hace que el desarrollo de aplicaciones de escritorio con Flutter sea una realidad. Esto, en su conjunto, da la impresión de que Flutter tiene un mayor alcance futuro y debería ser considerado por los desarrolladores de Android e iOS en 2019 .

2019 terminó con Flutter lanzando su versión 1.12 . En el evento Flutter Interact , se anunció la versión con varias características nuevas y mejoras con un enfoque central en Ambient Computing.

Aparte de esto, trabajaron en varias otras mejoras como:

• Dardo 2.7
• DartPad revisado
• Soporte web beta
• soporte de escritorio macOS
• Actualización de agregar a la aplicación
• Nuevo paquete de fuentes de Google
• Compatibilidad con el modo oscuro de iOS 13

¿Qué hay de nuevo en React Native ?

En noviembre del año pasado, React Native estableció una hoja de ruta para lo que quedaba para 2018 y 2019, lo que hizo que todo el evento de crear aplicaciones móviles en React Native fuera mucho más emocionante.

Los elementos que se agregaron en la lista son algo que está listo para redefinir lo que significa React Native.

Han planeado:

• Hacer que las API sean estables
• Crear un mejor repositorio de GitHub
• Mejor Documentación
• El área de superficie de React Native está siendo eliminada por componentes no utilizados y no centrales
• Plan para mejorar el soporte para herramientas y plataformas que son famosas en la comunidad de código abierto.
• Facebook consumirá React Native a través de la API pública para reducir las instancias de cambios importantes.

Además de estos, React Native 0.60 se lanzó en julio de 2019 con un conjunto propio de nuevos cambios como:

Nueva pantalla: se presenta una nueva pantalla que muestra instrucciones relevantes como editar App.js, enlaces de documentos, menú de proceso para depurar y más. Esto se considera un esfuerzo de la comunidad para mejorar la facilidad de uso y la popularidad de React Native sobre Flutter.

Compatibilidad con Android X: al igual que Flutter, React Native también admitirá AndroidX (Android Extension Library). Esto implica que, independientemente de si elige React Native o Flutter, AndroidX será parte del proceso de desarrollo de su aplicación móvil.

En septiembre de 2019, React Native lanzó su versión 0.61 con una nueva experiencia de recarga, llamada Fast Refresh.

En esta versión, las funciones de recarga en vivo y recarga en caliente se han fusionado en una sola función conocida como Actualización rápida.

Estos son los principios que definen la función React Native 0.61:

• Es completamente compatible con React moderno.
• Se recupera después de errores tipográficos y recurre a la recarga completa cuando es necesario.
• No realiza ninguna transformación de código invasiva.

Además de Fast Refresh, también han realizado otras mejoras significativas como:

• Corrige el use_frameworks! Soporte técnico de CocoaPods
• Se agregó el gancho useWindowDimensions
• React ha sido actualizado a 16.9

Ahora que se están introduciendo estos cambios o se están preparando para agregarlos en el ecosistema de Flutter y React Native, la guerra solo se volverá más densa ahora.

Para concluir, Flutter tardará en superar la popularidad que ha acumulado React Native con el tiempo. Y tomará tiempo declarar que Flutter es el futuro del desarrollo de aplicaciones móviles, pero dale tiempo y saltará dentro y fuera de la base de usuarios de React Native.

Preguntas frecuentes sobre Flutter Vs React Native Debate

P. Entre flutter y react native, ¿cuál elegir en 2020?

Es difícil decirlo ya que ambos marcos están funcionando muy bien. Por lo tanto, recomendaría tomar una decisión basada en el factor de comparación compartido en este artículo.

P. ¿Flutter reemplazará a React Native?

Sí, Flutter reemplazará a React Native y se convertirá en el gobernante del desarrollo multiplataforma en el futuro.

P. ¿Qué tan popular es flutter?

Aunque es nuevo en el mercado, Flutter ha ganado una popularidad significativa en el mercado. Varias marcas populares como Reinvently, Hamiliton, Topline y Google Ads han adoptado el marco de la interfaz de usuario.

P. ¿React Native todavía está en versión beta?

No, no es.

P. ¿Por qué flutter es mejor que reaccionar nativo?

Flutter, respaldado por Google, ofrece más experiencia nativa que React Native y no depende mucho de bibliotecas de terceros para introducir nuevas funcionalidades. Esto le da a Flutter una ventaja sobre React Native