React Native vs Flutter. ¿Cuál es mejor para mi producto?

En las últimas semanas hemos estado hablando sobre React, Flutter y las características que hacen de estos dos frameworks, herramientas imprescindibles en tu toolkit para el desarrollo de aplicaciones web modernas, y aplicaciones móviles.

Estoy seguro que ya te habrás decantado por una de las dos opciones para tus proyectos, pero hoy me parece interesante poner sus diferencias sobre la mesa, y ayudarte en tu decisión para el desarrollo de aplicaciones móviles, si aún tienes dudas.

Antes de seguir te recomiendo leer los siguientes artículos:

• Flutter. El nuevo framework de Google
• React. El framework que revolucionó la web

¿Quieres ser el primero a saber de las novedades de nuestro Blog? Suscríbete a la nuestra newsletter!

¿Qué diferencias hay entre React Native y Flutter?

Como hemos dicho anteriormente, React Native y Flutter son dos de los principales frameworks de desarrollo para aplicaciones multiplataforma. Por eso comparar el sistema de Facebook con el de Google es buena idea, ya que te permite decidir e identificar cuál de los dos es mejor para el desarrollo de tu nueva APP.

Te dejo aquí una comparación rápida, si no quieres leer todo el artículo:

Ahora que ya conoces las que para mi son algunas las diferencias más importantes entre las dos herramientas, entremos en detalle.

Desarrollo

Flutter

Una de las características más interesantes de Flutter es su paradigma reactivo. Para lidiar con problemas relacionados con datos asíncronos - problemas muy familiares para los desarrolladores de JavaScript - Flutter hereda de Dart la programación reactiva. Hablaremos de ella en próximas sesiones, pero es muy potente en el desarrollo de aplicaciones, por ejemplo para lidiar con referencias nulas.

Widgets vs Components

Como vimos en el artículo de Sergio, Flutter tiene como piedra angular un “widget” mientras que React Native utiliza componentes. Lo interesante de los widgets de Flutter es que en su mayoría ya están preparados para utilizarse con conceptos de “material design”. Los widgets también pueden ser stateful o stateless como en React.

Empezar con Flutter es relativamente fácil, ya que solamente tienes que bajarlo, crear un entorno y comenzar a desarrollar. Eso sí, es muy posible que tengas que instalar también el Android Studio. Flutter también soporta IntelliJ Idea y Visual Studio Code.

Generalmente, Flutter necesita más tiempo de desarrollo que React Native, y gracias al Hot Reload podrás volver a ejecutar tu aplicación siempre que hagas algún cambio.

React Native

React Native tiene como característica importante el hecho de estar validada por aplicaciones de Facebook, o Airbnb utilizadas globalmente.

Sus componentes específicos para el desarrollo de aplicaciones móviles son diferentes de los componentes web y de los de React. Además, React Native usa un DOM virtual para comunicar con los elementos nativos de la Interfaz de usuario.

Algunos componentes de React Native son llamados adaptativos, pues pueden averiguar en qué plataforma - iOS o Android - se están ejecutando.

Tal como con Flutter, iniciarse con React Native es bastante fácil y también es una cuestión de instalar el paquete correspondiente y empezar a desarrollar. Si tus desarrolladores ya saben JavaScript y React, ¡perfecto!

En relación al tiempo de desarrollo, React Native es muy eficiente y gracias a los componentes prontos a ser usados el proceso de desarrollo de un PMV es simple y rápido.

Documentación

Creo que una de las principales características, que no permiten la adopción de un framework por parte de los desarrolladores es la falta de documentación, o la falta de buena documentación.

Flutter

Flutter tiene una documentación útil, organizada y muy completa.  Si entras en la página web oficial de Flutter verás como este detalle está cuidado. No solamente podrás encontrar los esperados códigos de ejemplo y referencias a la API, pero Google también ha incluido vídeos donde te enseñan a aprender sobre el kit de herramientas.

React Native

La alta adopción de React Native - aunque no haya videos - también está relacionada con su buena documentación, muy instructiva, pero no siempre bien organizada. En el sitio web oficial de React Native es posible aprender a utilizar el framework usando el CLI de React Native y, sobretodo, el cli de Expo, una biblioteca que proporciona una amplia variedad de APIs nativas basadas en iOS y Android y, que además te permiten ejecutar la aplicación que estás desarrollando en tu dispositivo móvil leyendo un código QR.

Rendimiento

El rendimiento suele ser uno de los más determinantes en la adopción de una nueva herramienta. Creo que vale la pena referir que siempre hay varios factores involucrados en el rendimiento de la aplicación, como el tipo de aplicación, el dispositivo que la usa y la experiencia de los desarrolladores en el lenguaje o framework escogido.

Flutter

Gracias a Dart, las aplicaciones de Flutter se compilan usando bibliotecas nativas de C/C++. Esto permite estar más cerca del lenguaje de máquina y obtener mejor rendimiento nativo, pues está más cerca de las aplicaciones nativas.

React Native

React Native se posicionó mejor, a nivel de rendimiento, que su competencia - Cordova o Ionic porque logró ejecutar su JavaScript en un hilo separado, además de complicar sus componentes de UI en sus equivalentes nativos. Aún así, utiliza un puente para comunicar y ejecutar acciones en los módulos nativos.

Ecosistema

Creo vehemente que “la comunidad no sólo crea la abundancia, la comunidad es la abundancia”. Sobretodo en el mundo Open Source.

Flutter

Flutter ha llegado más tarde al mercado, pero sus más de 7500 forks, más de 65000 estrellas en Github y más de 1400 paquetes disponibles en el repositorio de Dart, son solamente algunos de los indicadores que muestran que está involucrando a la comunidad y creciendo a un ritmo interesante.

React Native

React Native está ya hace mucho más tiempo en el mercado y esto se nota y, como vimos en el artículo sobre React. Gracias a la adopción de React, organizaciones, desarrolladores y vendors han contribuido para el desarrollo de la herramienta. De esta forma, es natural que tenga disponible muchos más paquetes que Flutter con el mismo objetivo de mejorar la productividad. Asimismo, como se trata de un framework más maduro, es también más estable que Flutter.

Adopción

Además de las diferentes comunidades que dan vida a ambos frameworks, también grandes organizaciones las utilizan. Mientras que React es una certeza en el mercado, Flutter por ser nuevo, aún está luchando por hacerse notar. Estos son algunos de los ejemplos de productos que utilizan cada uno de los frameworks:

Flutter

• Google Ads
• Alibaba
• AppTree
• Reflectly
• Hamilton Musical

React Native

• Facebook
• Facebook Ads
• Pinterest
• Tesla
• Salesforce

Conclusión

Como hemos podido ver, diferentes proyectos requieren diferentes soluciones tecnológicas. Si en tu equipo tienes desarrolladores para los dos frameworks y lenguajes, puede ser buena idea estudiar la viabilidad de cada uno de ellos. Ambos frameworks ofrecen estabilidad, rendimiento, buena documentación y una comunidad activa.

Por eso  no es fácil tomar una decisión. Desde mi punto de vista personal, React Native, por tener más tiempo de vida en el mercado, y por ser más estable en productos que conocemos tiene ventaja hoy mismo. Además, React Native está desarrollado en el lenguaje del momento.

Al mismo tiempo, creo que las características específicas de Flutter y Dart pueden ser importantes, sobretodo si quieres que tu aplicación proporcione a tus usuarios una experiencia lo más nativa que sea posible. Sin embargo, Flutter aún tiene un largo camino que recorrer, pero mucho potencial para alcanzar sus objetivos.

¿Utilizas React Native o Flutter en tus proyectos? ¿Qué tal la experiencia?

Fotografía: de rihaij en Pixabay

Fuentes:

• React Native vs Flutter en Hackr.io
• It’s 2019 and React Native is here to stay
• Why Airbnb is Moving Off Of React Native
• Flutter: Pros and Cons for Seamless Cross Platform Development