Cuando hablamos de crear aplicaciones moviles multiplataforma, es decir crear apps con una sola base de código que funcionen en Android y iOS. Los dos Frameworks más mencionados siempre son React Native y Flutter, asi que si estas empezando en el desarrollo de Apps apps multiplataforma y no te decides por alguno, en este artículo vamos a comparar los puntos más importantes de ambos.
Y si en caso no sabes que es React Native o que es Flutter, primero te recomiendo ir a los videos de cada tema para que puedas enterarte de que va cada uno:
- ¿Qué es React Native?
- ¿Qué es Flutter?
Los puntos que voy a estar comparando son los siguientes:
- Lenguajes de Programacion
- Rendimiento de las Apps
- Experiencia de Desarrollo (DX)
- Popularidad y Comunidad de cada Framework
- Curva de aprendizaje
Empecemos comparando los lenguajes de programacion que ambos Frameworks usan.
Lenguajes de Programación
El conocer con que lenguaje de programacion esta desarrollado un Framework es muy importante porque sabiendo esto, podemos imaginar que tan veloz pueden llegar a ser nuestras apps, y que tan facil se nos va a ser encontrar bibliotecas, paquetes o modulos para poder integrarlos en nuestros proyectos.
Si hablamos de los lenguajes de programación de estos Frameworks, React Native usa Javascript mientras que Flutter usa Dart.
siendo Javascript un lenguaje mucho más popular que Dart. principalmente porque con Javascript se desarrollan todas las plataformas web Frontend que existen, asi que es normal que al haber tantas web, tambien existan muchos paquetes Open Source en Javascript que ya estan disponibles para que los integres en tus aplicaciones web o en este caso en las apps moviles creadas con React Native, todo esto haciendo uso de npm, el programa que permite instalar paquetes de Javascript. De hecho la web de npm es uno de los sitios de alojamiento de código más grandes de la web, gracias a la enorme cantidad de modulos de Javascript que todos los desarrolladores publican y descargan a diario.
Entonces Dart no es tan popular como Javascript, pero si es un lenguaje más moderno que este. Cuando Google creo Dart inicialmente pensaba integrarlo como una alternativa a Javascript para crear sitios web, usando un lenguaje que tuviera mejores capacidades y un mejor diseño, esto en la practica significa que Dart es un lenguaje que posee tipado fuerte (Strong TYping), y hace uso de un compilador que optimiza las aplicaciones, y no solo aplicaciones moviles, sino tambien aplicaciones de escritorio, apps web ya que tambien permite compilar a código nativo.
Aunque ambos lenguajes han ido mejorando con los años, ya que con los dos se pueden crear todo tipo de aplicaciones como Apps Desktop, Apps moviles, aplicaciones de servidor e incluso pueden ser usados en sistemas embebidos. Siendo ambos, actualmente lenguajes de proposito general, es decir que sirven para crear de todo, aunque su uso más amplio de momento es la creacion de aplicaciones cliente (Web, Moviles, y Desktop).
Ahora Javascript no es ajeno a los compiladores y tipos de datos, porque usando Typescript, que añade un compilador para analizar codigo en tiempo de desarrollo, añade tipos de datos y strong typing, puedes tener caracteristicas muy similares a lo que ofrece Dart como lenguaje. Aunque typescrpt se tiene que configurar y hace que en muchos proyectos puedas encontrar paquetes que no esten creados con este lenguaje. Mientras que en Dart no tienes que pensar en esto.
Asi que Dart es un lenguaje mucho más moderno y simple de entender que todo el ecosistema de versiones, herramientas y cambios que ha tenido Javascript a lo largo de todos estos años.
Rendimiento de las Apps
En cuanto al rendimiento, tanto React Native como Flutter han demostrado ser capaces de crear apps rapidas, Sin embargo, hay algunas diferencias entre ambos.
Primero Flutter es relativamente nuevo, pero ha demostrado que es un Framework muy eficiente en consumo de recursos al estar desarrollado encima de componentes de C, C++ y Dart.
,
Ademas como Dart soporta la compilacion AOT (Ahead of Time), que compila el codigo antes que el programa se ejecute, y JIT (Just in Time), que compila el codigo en tiempo de ejecucion, tanto las aplicaciones generadas como el desarrollo tiende a ser muy veloz en Flutter.
Pero no solo se trata de compilacion, sino que tambien cuando se renderizan las interfaces en el movil, Flutter tiende a ser muy veloz, al usar un motor de renderizado (graphics engine) llamado Skia, el cual es un motor de gráficos 2D de alto rendimiento desarrollado por Google y que es utilizado tambien en muchos otros de sus productos, como su navegador web Google Chrome, el sistema operativo Android y Chrome OS.
En el caso de Flutter, Skia se utiliza para renderizar la interfaz de usuario y las animaciones en alta calidad en todas las plataformas donde se ejecute tu App, Por ejemplo, si queremos crear un botón personalizado que tenga una forma y un diseño únicos, podemos utilizar Skia para dibujar el botón y definir sus características de diseño.
De hecho esto no es ajeno tampoco en React Native, que tambien existe un paquete creado por Shopify, llamada React Native Skia, que permite usar este engine, aunque su uso no es tan extendido, y se debe integrar manualmente.
Esto es asi porque las apps de React native realmente usan los componentes nativos del sistema, es decir si creas un TextField en codigo este se traduce en su equivalente para Android y iOS. Lo que quiere decir que React native es un puente de conexion entre tu codigo de javascript y los componentes nativos del movil.
De hecho este punte o Bridge, es literalmente el nombre de la API que comunica tu codigo y las interfaces. Aunque este tambien ha sido el responsable de algunos inconvenientes en las apps de React native como:
- que solo mantenia un solo hilo o Thread de comunicacion
- Tiene que serializar y deserializar datos, lo que hace la comunicacion más lenta
- solo funcionaba de forma asincrona
por esto actualmnete react native esta desarrollando una nueva API de comunicacion, llamada JSI o JavaScript Interface, en reemplzado de Bridge, asi que podemos ver una mejorar significativa en las siguientes version de Recta native.
Pero de momento, n general, Flutter tiende a ofrecer un rendimiento mejor y más predecible que React Native, gracias a su motor de renderizado personalizado y al uso del lenguaje de programación Dart..
Arquitectura: Flutter utiliza una arquitectura basada en widgets, que permite la creación de interfaces de usuario altamente personalizadas y eficientes. React Native utiliza una arquitectura basada en componentes, lo que significa que los componentes están vinculados a los componentes nativos de cada plataforma. Esto puede resultar en una sobrecarga adicional y una menor eficiencia en algunos casos.
Experiencia de Desarrollo (DX)
No importa que tan rapido sea un Framework, si su experiencia de desarrollo es muy complicada, muy pocos lo usuaran.
Durante el desarrollo, las aplicaciones de Flutter y React native ofrece una recarga instantánea de los cambios (Hot Reload) y con estado de los cambios realizados sin necesidad de una recompilación completa (Hot Module Replacement), esto hace que el desarrollo sea comodo porque no se tiene que recompilar a cada momento. sin embargo he notado que en React native es muy comun que esta caracteristica falle por momentos, siendo en Flutter mucho menor al tener una integracion más cercana con Dart.
Ahora en produccion las aplicaciones de Flutter a diferencia de las de REact native, se compilan directamente en código de máquina, ya sea en instrucciones Intel x64 o ARM, o en JavaScript si se apunta a la web.
Ya que con Flutter tambien puedes convertir tus apps moviles a web usando la misma base de codigo, aunque esta de momento no tienen muchas optimizaciones asi que estas pueden ser bastante pesadas ademas el desarrollador necesita conocer varios conceptos web para que estan se ejecuten correctamente. Siendo distinto en React native, porque recordemos que React es una biblioteca que esta más pensada para la web, asi que ya existen paquetes como react-native-web que te permiten convertir tu app de react native a una aplicacion web facilmente que puedas desplegar como cualquier sitio.
Por otro en cuanto a interfaces, Flutter utiliza su propio conjunto de widgets y herramientas para crear interfaces de usuario personalizadas, lo que proporciona una experiencia de usuario más consistente en todas las plataformas, es decir los diseños de tus componentes se pueden ver igual tanto en Android y iOS. React Native, en su lugar, utiliza los componentes nativos de la plataforma donde se ejecute, lo que puede resultar en una experiencia de usuario ligeramente diferente en cada plataforma.
De hecho algo genial con Flutter, es que cada mes añaden más y más Widgets, que mejoran el rendimiento o permitne al desarrollador integrar más interfaces, Incluso tienen un canal de Youtube en donde comparten los avances del Framework.
Popularidad y comunidad
Ambos Frameworks estan desarrollados por empresas muy grandes, React native esta mantenida por Facebook, mientras que Flutter es mantenida por Google, pero ambos realmente dependen mucho del uso y de los paquetes que sus comunidades creen.
React Native tiene una comunidad de desarrolladores muy grande y activa, en gran parte debido a la popularidad de Javascript, lo que significa que hay una amplia variedad de herramientas y bibliotecas disponibles. Flutter también está creciendo rápidamente y tiene una comunidad cada vez mayor, pero no es tan grande como la de React Native. De hecho mientras que React Native es muy usado debido a Javascript, Flutter más bien hace que Dart sea más usado.
Curva de Aprendizaje
En cuanto a la curva de aprendizaje en este caso depende mucho de la experiencia del desarrollador.
Si eres un desarrollador Web, que hace uso de Frameworks Frontend de Javascript, es muy probable que te sea más facil aprender React Native que Flutter, porque vas a ver muchas herramientas y conceptos (Nodejs, npm, webpack, babel, Typescript, axios, Redux, etc) que ya has usado para crear aplicaciones web. Aunque algo a considerar es que si importa que framework has usado, porque si necesitas aprender los fundamentes de React primero antes aprender React Native, pero de nuevo sería tan complicado.
Ahora si no sabes nada de la web y vienes de otros lenguajes como Kotlin, Swift, C#, entre otros, puede que te sea más sencillo empezar con Flutter que con React Native, al no tener que considerar conceptos web, es decir no tienes que aprender de como funciona la web y los componntes de react, sino pasas directo a crear apps.
De hecho esto mismo, para los que empiezan. Si recien estas considerando empezar a crear apps es mucho más facil ir Fluter.
Aunque todo es solo en comparacion, porque igual te llevara varias horas de practica dominar uno u otro.
Conclusión
En mi opinion personal, por lo general, si solo tuviera el trabajo de crear una app movil multiplataforma, es bastante probable que prefiriria ir por Flutter, la experiencia de desarrollo es mucho más comoda, y sus desarrolladore estan continuamente añadiendo más y más Widgets y mejoras., ademas que su entorno de desarrollo es más comodo y rapido. Pero si tuviera que crear un proyecto completos o FullStack, es decir que esten conformados ademas por un Backend, o incluso adicionalmente una Web, iria por React Native al poder usar tambien Javascript en el backend e incluso con los mismos paquetes en su gran mayoria, al tener este una comunidad más grande.