Flutter vs React Native

Post_Flutter_vs_ReactNative
Flutter

Flutter vs React Native

Desde hace ya muchos años el sector del desarrollo de aplicaciones móviles ha ido lanzando al mercado diferentes soluciones para abordar el reto de desarrollar para varias plataformas desde una misma base de código.

Por un lado tenemos soluciones que se basan en el desarrollo híbrido (Cordova/Ionic) Esta tecnología encapsula una aplicación desarrollada con tecnología web (HTML, CSS, Javascript) en una aplicación nativa mediante un web view. El acceso al hardware del dispositivo se hace a través de plugins que se invocan desde código Javascript.

Por otro tenemos soluciones como Xamarin, React Native, Native Script y, el último en llegar, Flutter. En estos casos cada tecnología ofrece un framework de desarrollo que permite compilar la app a código nativo de cada plataforma mejorando así la experiencia de usuario y resolviendo algunos de los problemas que se dan en las aplicaciones híbridas.

React Native se ha convertido en uno de los referentes en este tipo de soluciones, pero tras el lanzamiento de Flutter por parte de Google le ha salido un duro competidor. Por esto vamos a hacer una comparativa de lo que ofrece cada uno de ellos.

Los competidores

React Native

React Native es una tecnología open source desarrollada por Facebook que se lanzó en 2015. Utiliza Javascript como lenguaje y la forma de programar es muy parecida a React.js, pero en este caso utiliza componentes nativos en vez de componentes web.

Flutter

Flutter es una tecnología open source desarrollada y mantenida por Google. Utiliza Dart como lenguaje de programación. Dart es un lenguaje desarrollado por Google. En Flutter no existe un lenguaje diferente para programar la UI, si no que se realiza mediante la composición de Widgets que están implementados en Dart.

Lenguaje

React Native

Su lenguaje de programación es Javascript. Utiliza JSX para la definición de las vistas. En su documentación puedes encontrar una gran variedad de componentes para construir la UI.

Flutter

Utiliza Dart para desarrollar toda la aplicación, tanto la UI como la lógica de negocio. Dart es un lenguaje desarrollado por Google. Nació con la intención de ser una alternativa a Javascript pero no tuvo éxito. Ahora se ha recuperado para formar tándem con Flutter.

Curva de aprendizaje

React Native

Si has trabajado con React.js anteriormente te adaptas muy rápido a este framework ya que el desarrollo es similar, solo que en React Native, en vez de usar componentes web, utiliza componentes nativos de cada plataforma. En otro caso, pueden ayudarte tus conocimientos en desarrollo web pero necesitarás un tiempo para adaptarte. En general podemos decir que la curva de aprendizaje es corta.

Flutter

Aquí tienes que aprender un nuevo lenguaje de programación. Dart es un lenguaje orientado a objetos fuertemente tipado por lo que si vienes de Java, te adaptas rápido. Para otros casos puede suponer un esfuerzo mayor pero es un lenguaje que se aprende bastante rápido. A otro reto al que te enfrentarás es a la forma en la que se implementan las interfaces. En Flutter se utiliza la composición de Widgets, lo que provoca un continuo anidamiento que al principio puede costar manejar visualmente. En este caso Flutter tendría una curva de aprendizaje un poco más elevada que React.


Flutter utiliza su propio motor de renderizado . Funciona de forma parecida a un motor de videojuegos.


Velocidad de desarrollo

En este caso ambas tecnologías son muy parecidas. Las dos permiten la carga en caliente, es decir, cualquier cambio en nuestro código se actualiza en nuestra app en tiempo de ejecución. Esta característica es muy potente para ir probando y corrigiendo las diferentes funcionalidades que vamos implementando. Además, tanto React como Flutter, tiene un repositorio de librerías externas que permiten reutilizar código y centrarnos en la lógica de nuestra app.

Arquitecturas simplificadas

Para entender mejor los dos siguientes punto vamos a añadir la diferencia de las arquitecturas que utilizan React Native y Flutter respecto a una arquitectura nativa.

Arquitectura de app Nativa
Arquitectura de app React Native
Arquitectura de app Flutter

Componentes

React Native

React, como hemos comentado anteriormente, compila a nativo utilizando los componentes de cada plataforma para renderizar la UI. De esta forma cuando indicamos que queremos un botón, dependiendo de la plataforma en la que estemos, este se renderizará con los estilos de dicha plataforma. Este hecho, por otro lado, le condiciona a mantener la compatibilidad con las actualizaciones de dichos componentes en cada plataforma y, en caso de versiones de anteriores, hay que gestionar si el componente que se está utilizando es compatible con dicha versión.

Flutter

En el caso de Flutter no se hace uso de los componentes nativos de la plataforma. Flutter utiliza su propio motor de renderizado de forma que “pinta” directamente el componente que hemos programado en nuestra app. Funciona de forma parecida a un motor de videojuegos. Esta característica nos da una gran ventaja competitiva respecto a React Native. ¿Por qué? Pues porque independientemente de la versión de la plataforma vamos a poder utilizar componentes modernos que vayan apareciendo en las últimas versiones, superando el gran problema de la fragmentación (Sobre todo en Android). Esta característica también nos permite que a nivel de desarrollo podamos controlar el detalle de la UI a nivel de píxel consiguiendo así interfaces mucho más ricas.

Rendimiento

React Native

Compila a nativo, pero la lógica está escrita en javascript. Por tanto, necesita de un puente de comunicación entre javascript y la plataforma. Esto provoca un overhead que influye en el rendimiento de la app y a veces este hecho es perceptible por el usuario. Aun así mejora el rendimiento que ofrece una app híbrida.

Flutter

Flutter no utiliza ningún tipo de puente de comunicación. Compila directamente a código nativo y permite un rendimiento y una fluidez mucho mayor que con React Native. Esta característica permite a Flutter correr interfaces a más de 60 FPS.

Comunidad

Evolución del interés en Google de React Native y Flutter

React Native

Lleva ya varios años en el mercado y cuenta con una comunidad mucho más madura que Flutter. El apoyo de la comunidad es bastante alto y podemos encontrar mucha documentación y ejemplos por la red. Aquí React le lleva ventaja a Flutter.

Flutter

Es el nuevo en el patio, pero ha entrado con mucha fuerza. Desde el inicio de 2018 el interés ha ido creciendo muy rápido como muestran algunas de las gráficas. Flutter se va acercando poco a poco a React Native y se postula como un competidor directo en este tipo de soluciones.

Comparación del interés en GitHub entre React Native y Flutter

Flutter no utiliza ningún tipo de puente. Compila directamente a código nativo y permite un rendimiento y una fluidez mucho mayor que con React Native.


Entonces ¿Cuál es la conclusión?

React Native es una herramienta muy potente para el desarrollo de apps multiplataforma, pero para nosotros Flutter, aun siendo una tecnología menos madura, ha despertado mucho interés en la comunidad y ofrece ciertas características le dan un valor diferenciador con respecto a React. Sobre todo en cuanto a rendimiento y a control sobre la UI.

Además, detrás está Google que tiene un equipo completamente dedicado al proyecto; por lo que el mantenimiento de plugins y el compromiso es mucho más alto que en el caso de React Native, el cual depende más de su comunidad. Algunos apuntan a que Flutter podría ser el framework de desarrollo para Fuchsia, el nuevo SO en el que está trabajando el gigante.

Otra característica que ofrece Flutter es que te permite implementar animaciones, transiciones o otros componentes muy visuales con muy poco código, lo que, unido al resto de características, lo hace una herramienta potentísima para implementar prototipos rápidamente y salir al mercado a validar nuestras ideas de negocio.

Si quieres conocer un poco más sobre Flutter puedes acceder a la documentación oficial o a la documentación traducida por la comunidad en español. También puedes seguir su canal oficial en youtube.

Déjanos un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete a nuestra Newsletter