React Native vs Flutter

Luis Andrade
Drakezair
Published in
8 min readJul 23, 2019

Los contendientes más poderosos en el campo de desarrollo de apps móviles en este momento son Flutter de Google y React Native de Facebook. Revisemos las fortalezas y debilidades de Flutter y React Native y hagamos una comparación objetiva React Native vs Flutter.

Flutter

Flutter es un Framework de desarrollo móvil reactivo multi plataforma que utiliza el lenguaje Dart. Dart y Flutter han sido creados por Google, que utiliza el framework para algunas de sus aplicaciones más grandes y lo empuja constantemente para que sea la solución definitiva para crear aplicaciones multi plataforma. Su lanzamiento alfa inicial fue en mayo de 2017, por lo que es mucho más joven que React Native.

Programación reactiva con flutter

Flutter es un framework reactivo, ¿qué significa eso? Bueno, hablemos un poco sobre la programación reactiva y por qué es realmente potente y útil, especialmente en el caso del desarrollo de aplicaciones. Supongamos que desea enviar una solicitud a un servidor y hacer algo según la respuesta. Si realiza una acción antes de que la respuesta esté de vuelta, es decir, antes de que tenga un objeto, estará tomando una acción que resultará en el famoso error de mil millones de dólares, una referencia nula. Si vienes del mundo de Android y Java, sabrías que uno de los motivos principales detrás de Kotlin fue eliminar la referencia nula.

Las cosas se salen de control si sus datos se envían de forma asíncrona y no se envía una sola solicitud, sino una secuencia de clics de los usuarios, por ejemplo, y hay muchas partes de su programa que necesitan responder a los datos entrantes.

Este problema dio origen a un paradigma en la programación conocida como programación reactiva, que se encuentra en el corazón del lenguaje Dart.

Desarrollo

El bloque de creación principal de una aplicación Flutter es un widget. Los widgets son análogos a los componentes en React Native. Flutter viene con una gran cantidad de widgets listos para usar, la mayoría de los cuales implementan los conceptos de diseño de materiales. Hay dos tipos de widgets, widgets sin estado y widgets con estado, al igual que los componentes de clase y funcionales en React.

Desafortunadamente, los widgets de Flutter no son adaptables, por lo que debe hacer la adaptación específica de la plataforma manualmente.

Es bastante fácil comenzar con Flutter, todo lo que necesita hacer es descargar el paquete de flutter, descomprimirlo y luego crear una variable de entorno que apunte a una carpeta dentro de la carpeta descomprimida. Y estaría bastante listo para comenzar, sin embargo, es posible que necesite descargar Android Studio y configurar y emular si no quiere usar su teléfono.

Flutter es compatible con la función Hot Reload, que le permite volver a ejecutar su aplicación con los ajustes que realice mientras desarrolla y acelera el desarrollo. Actualmente, Flutter es oficialmente compatible con Android Studio, IntelliJ Idea y Visual Studio Code.

Entorno

Flutter está ciertamente detrás de React Native cuando se trata del Ecosistema, ya que React Native ya lleva allí dos años antes de que Flutter fuera lanzado, y ya está bien establecido con toneladas de paquetes. Sin embargo, Flutter está alcanzando un ritmo tremendo, y muchos paquetes centrales para el desarrollo móvil están disponibles para uso público y el Ecosistema de Flutter está impulsando un gran impulso con la dedicación de la comunidad. En este momento, hay más de 1450 paquetes disponibles para Flutter en el sitio oficial de dartlang.org.

Performance

Cuando se trata de rendimiento, el enfoque de Flutter es bastante diferente al de React Native, o incluso NativeScript. La aplicación de Flutter se compila utilizando la biblioteca arm C / C ++ para que esté más cerca del lenguaje de máquina y ofrezca un mejor rendimiento nativo. No solo se compilan los componentes de la interfaz de usuario, sino todo.

Dart es un lenguaje bastante activo por sí solo, y muchas personas creen que en términos de rendimiento, Flutter tiene la ventaja, aunque es difícil juzgar definitivamente, ya que hay muchos factores involucrados en el rendimiento.

Documentación

La documentación de Flutter es increíblemente buena. La documentación es bastante útil y muy completa. Puede que sea un poco difícil de leer si no tiene experiencia en programación, pero una vez que se acostumbre a encontrarlo, encontrará casi todo lo que necesita, escrito en la documentación.

Arquitectura

Flutter es muy joven, lo que hace que todos se sientan inseguros sobre la mejor arquitectura para implementar para su aplicación. Sin embargo, hay algunas arquitecturas que son populares entre la comunidad de Flutter.

Puede usar la arquitectura BLoC(Business Logic Component), que significa Componente de lógica de negocios. Google describió la arquitectura en DartConf2018 y establece que la lógica de negocios debe sacarse de la capa de presentación y colocarse en los componentes de la lógica de negocios. El patrón BLoC se basa en gran medida en los flujos y RxDart (Reactivo Dart), una buena herramienta para comprender mejor los flujos es RxMarbles .

Hay otras arquitecturas presentes en el ámbito del flutter, por ejemplo, si se siente más cómodo usando Redux / Flux, puede usar estos patrones en su lugar, y hay paquetes en Flutter que lo hacen posible. Para aplicaciones pequeñas y para probar el framework, bastaría con almacenar el estado dentro de los componentes.

React Native

React Native es quizás el renombrado campeón mundial de desarrollo móvil multiplataforma. React Native es un framework javascript creado sobre la biblioteca React, ambos creados por Facebook, y le permite enviar aplicaciones de iOS y Android con un solo código. Es utilizado principalmente por Facebook, Instagram, Airbnb y muchos otros. React Native comenzó como un proyecto de hackathon interno en Facebook en 2013, y en 2015 se lanzó al público.

Desarrollo

React Native utiliza el componente, pero en lugar de usar los componentes web que tiene en la web, como Div y H1, usa el conjunto de componentes que proporciona la biblioteca react-native para el desarrollo móvil. React Native también utiliza un DOM virtual, pero no para manipular un DOM, ya que no lo hay, sino que se utiliza para comunicarse con elementos de la interfaz de usuario nativos.

El número de widgets provistos por React-Native no es tan grande como el de Flutter, pero es bastante inclusivo, además, algunos de estos componentes son adaptables, por lo que pueden averiguar en qué plataforma se están ejecutando, ya sea IOS o Android y renderizar el Composiciones adecuadas para esa plataforma.

Comenzar con React Native también es bastante fácil, puede comenzar instalando el paquete create-react-native-application con npm install create-react-native-package y luego usándolo para crear una nueva aplicación React Native. Hay algo bueno sobre el desarrollo con React Native, es que create native proporciona una integración de Expo. Expo le permite ejecutar su código en su dispositivo móvil sin tener que conectarlo, simplemente escaneando un código QR que aparece en la consola.

Entorno

React Native ha estado allí durante mucho tiempo, por lo que es compatible con la mayoría, si no todos los editores, y también es compatible con la recarga en caliente. Cuando se trata de paquetes, React Native es el claro ganador, con más de 5 veces el número de paquetes disponibles para el aleteo, por la naturaleza de estar allí durante más de tres años. Es un marco maduro ahora y mucho más estable que el aleteo.

Documentación

La documentación de React Native es bastante buena y más fácil de usar, ya que explica qué son los accesorios, qué representan y cómo usarlos. La documentación oficial también incluye guías y temas populares en el desarrollo multi plataforma con React Native, como la instalación y el uso de módulos nativos o la creación de componentes específicos de la plataforma.

Performance

El enfoque de React Native es diferente al de Flutter. La aplicación completa no está compilada en C / C ++ o en un idioma nativo, en su lugar, los componentes de la interfaz de usuario se compilan en sus equivalentes nativos, y JS se ejecuta en un sub proceso independiente y se comunica con los módulos nativos para cualquier acción necesaria a través de un puente. Esto permite que React Native sea mucho más rápido y más eficaz que las alternativas híbridas como Ionic / Cordova, pero lo coloca en un lugar difícil en comparación con Flutter, que está un paso más cerca de las aplicaciones nativas.

Por supuesto, tener un ganador definitivo en el juego de rendimiento es bastante complicado, ya que hay muchos factores involucrados, como el dispositivo en el que se está ejecutando la aplicación, y para algunas personas, React Native superó el Flutter, aunque en general, el flutter debería tener la parte superior mano.

El equipo de desarrollo realizó una evaluación comparativa de la aplicación Facebook Events creada con React Native para obtener más información sobre el rendimiento de React Native. Notaría que para todas las tareas realizadas, inicializar Javascript y requerir los módulos es la tarea más agotadora. Hay muchas áreas de optimización para React Native para aumentar su rendimiento, como la necesidad lenta y la carga lenta de módulos nativos y la lectura de memoria caché incremental, por lo que no es tan malo como podría pensar.

Arquitectura

Existen dos patrones principales en la creación de aplicaciones nativas React / React, que son Flux y Redux. Flux es el creado por los creadores de framework, Facebook, mientras que Redux es la opción más popular de la comunidad. Estos frameworks tratan sobre el flujo de datos unidireccional y el almacenamiento del estado de su aplicación en un lugar central llamado Tienda, y hacen que los componentes de su aplicación sean lo más apátridos posible. También puede usar la API de contexto, que es una nueva característica de React para administrar el estado.

--

--