A lo largo de los años, se ha vuelto muy común que los desarrolladores comparen Flutter (como aprender Flutter) y React Native (como aprender react native).
Ambos SDK son dos de las herramientas multiplataforma predominantes para crear aplicaciones móviles de forma rápida y sencilla.
Si entras en una reunión de desarrolladores y haces la pregunta, ¿Qué debería elegir entre Flutter o React Native?, seguramente estés sembrando el terreno hacía un debate bastante entretenido.
A continuación, voy a intentar responder que opción puede ser la mejor de la manera más justa y respetuosa.
Analicemos en qué se diferencian estos frameworks y cómo cada uno atrae a diferentes desarrolladores, equipos o distintos casos de uso.
Experiencia de desarrollador
La experiencia del desarrollador es la sensación general que experimentan los desarrolladores y usuarios experimentados cuando utilizan una biblioteca.
Desde la documentación hasta la superficie del API real de esa biblioteca pueden influir en la experiencia del desarrollador, lo que a menudo se convierte en una de los principales puntos de elección para los equipos.
La Experiencia de Desarrollador en Flutter
En el caso de Flutter, es muy fácil para los desarrolladores y las empresas observar datos cuantitativos para medir el sentimiento general y la satisfacción de la comunidad.
Gracias a las encuestas trimestrales realizadas por el equipo de Google a los desarrolladores de Flutter y sus extensos informes que detalla los hallazgos.
En el último informe de Flutter, Flutter contaba con un índice de satisfacción del 92% entre sus usuarios.
El equipo de relaciones con desarrolladores y la comunidad de Flutter han realizado un trabajo excepcional al documentar las API y los patrones más comunes del framework.
DevTools de Flutter es un conjunto interactivo de herramientas de depuración y rendimiento que permite a los desarrolladores interactuar directamente con el IDE desde Chrome.
Con Flutter DevTools, los desarrolladores pueden depurar fácilmente los problemas de diseño más comunes, modificar los diseños de forma interactiva, depurar rápidamente problemas de red, revisar el rendimiento, etc.
De hecho puedes echar un ojo a los tutoriales sobre las Devtools de Flutter en español; sobre la vista de registro, vista de memoria, linea de tiempo de Devtools, etc.
La Experiencia de Desarrollador en React Native
En términos de experiencia de desarrollador, React Native es similar a Flutter en algunos aspectos.
El equipo de Facebook ha hecho un gran trabajo presentando toda la información en la página de inicio de React Native. En la web, los devs pueden realizar una visita guiada por cada parte del framework.
Si bien, no puedes encontrar ningún estudio oficial de los usuarios para React Native, merece la pena señalar que React Native ha existido mucho más tiempo que Flutter y tiene una comunidad de seguidores mayor.
La cantidad de paquetes y complementos para React Native supera ampliamente a la de Flutter, ya que los desarrolladores pueden usar la mayoría de las bibliotecas de Javascript y los paquetes de React.
Con respecto a las herramientas de desarrolladores, React Native tiene algunas opciones más que sus contraparte de Flutter.
Dada la madurez del framework y la capacidad para aprovechar las cadenas de herramientas de Javascript, los desarrolladores de React Native pueden elegir entre un número significativo de herramientas de JS estándar para mejorar el flujo de trabajo.
Algunos de esos paquetes se incluyen en el IDE de Visual Studio Code, junto a las mejores extensiones para el editor, como por ejemplo el paquete de la linterna ESLint.
Además de las herramientas de desarrollo React estándar, React Native también da soporte a Flipper, un depurador de aplicaciones móviles para aplicaciones de React Native.
En resumen, la experiencia del desarrollador para ambas plataformas es lo que esperarías de un framework de desarrollo moderno en 2021.
Ambos tienen una excelente documentación, con guías detalladas y herramientas de desarrollo.
Productividad del desarrollador
En la productividad de los desarrolladores es donde las cosas se ponen realmente interesantes.
Comencemos esta sección indicando que algunos de los puntos aquí dependen completamente de las preferencias personales. Cada desarrollador es diferente y cada uno prefiere su propio flujo de trabajo y herramientas.
Al observar la productividad de los desarrolladores, examinaremos cada framework a través de las siguientes lentes: La elección del idioma y el Ecosistema del desarrollador (paquetes y complementos).
Elección del idioma
Comencemos con posiblemente el tema más debatido de todos: La elección del idioma. La elección del idioma tiene un efecto dominó en todo el framework.
Además de la productividad del desarrollador, la elección del lenguaje impacta directamente en el desempeño del framework, algo que discutiremos en profundidad más adelante.
El Lenguaje de React Native
React Native usa JavaScript (JS) como su idioma preferido. El framework en sí se basa en el popular proyecto ReactJS. Como resultado, React Native tiene una gran ventaja entre los desarrolladores.
Si alguna vez has creado una aplicación usando React en la web, entonces la transición a React Native a la hora de escribir tu primera aplicación React Native será extremadamente fácil.
En su mayor parte, la estructura del código de React Native se parece mucho a la del código de React. De hecho, incluso es posible reutilizar la lógica de los proyectos de React en los proyectos de React Native.
Si bien el uso de JS permite a los desarrolladores aprovechar la gran cantidad de proyectos y bibliotecas creados por los desarrolladores para la web en sus aplicaciones, también tiene algunos inconvenientes graves:
Por un lado, a menos que optes por utilizar TypeScript (que solo agrega escritura estática) JS es un lenguaje dinámico. Esto significa que no hay ningún sistema de tipo de sonido o seguridad nula presente en la lógica.
Si has trabajado en el desarrollo de aplicaciones nativas y estás evaluando React Native como primer framework multiplataforma, la falta de tipos sólidos y advertencias pueden sorprenderte al principio.
Si bien, las herramientas como ESLint ayudan a reducir la cantidad de errores obvios en el código.
Dado que JS no puede compilarse en código de máquina nativo, todo el código escrito como parte de una aplicación React Native debe compilarse en el dispositivo del usuario con una máquina virtual de Javascript.
El Lenguaje de Flutter
Flutter como framework se encuentra en una posición única. Dart, el lenguaje más utilizado en Flutter, también es mantenido por Google y todo el equipo de Flutter.
Esto significa que el equipo puede optimizar el framework (Flutter) y el lenguaje (Dart) para ayudar a mejorar la experiencia del desarrollador.
Un ejemplo perfecto de esto es la reciente adición a los literales de condición y el operador de extensión. Ambas son pequeñas adiciones al lenguaje que contribuyen en gran medida a que sea más útil para los desarrolladores que crean aplicaciones con Flutter.
En términos del lenguaje en sí, Dart puede describirse con una sintaxis de estilo C que debería resultar muy familiar para los desarrolladores que han usado JS, C# o Java en el pasado.
A diferencia de JS, Dart se escribe estáticamente y se actualizó recientemente para tener seguridad nula e interoperabilidad.
El código moderno de Dart, no admite nulos de forma predeterminada, lo que significa que el compilador puede advertirte sobre posibles errores de eliminación de nulos antes de que ocurran.
Además, vale la pena mencionar que Dart puede compilar usando los modos Just-in-time (JIT) y Ahead-of-Time (AOT) lo que significa que los desarrolladores pueden tener un ciclo de desarrollo rápido usando JIT, que produce una aplicación pequeña y eficiente compilada con AOT para los usuarios finales.
El lenguaje de Dart, se puede compilar en código máquina nativa tanto en dispositivos de escritorio como móviles, por lo que no existe la necesidad de usar una máquina virtual en las aplicaciones de producción.
Si bien, Flutter no tiene una gran colección de paquetes de código abierto a su disposición como Javascript, lo compensa con su rendimiento.
Una aplicación de Flutter bien redactada puede ejecutarse fácilmente a 60-120 fps en producción.
Además, los desarrolladores pueden descargar grandes tareas computacionales, como decodificación o clasificación JSON, etc. para ayudar a mantener el rendimiento y evitar bloquear la interfaz de usuario.
Ecosistema del desarrollador
Un punto importante de cualquier SDK o framework, son las herramientas y el ecosistema que los rodea; en este caso, ambos SDK tienen un ecosistema de desarrolladores muy grande y apasionado que contribuyen al código.
React Native tiene un gran beneficio, ya que los desarrolladores pueden aprovechar la mayoría de las bibliotecas JS de código abierto en sus aplicaciones.
Como resultado, los desarrolladores pueden usar el administrador de paquetes favorito (por ejemplo npm) o buscar un paquete de JS que resuelva los casos de uso necesarios para agregarlo fácilmente a su aplicación.
Flutter, por otro lado, tiene una presencia importante de código abierto; pero palidece en comparación con la gran cantidad de paquetes entre los que los desarrolladores de React Native pueden elegir.
Por ejemplo, según Libraries.io, el número total de paquetes en Pub actualmente es de 24,952, mientras que el número de paquetes en npm es de 1,98 millones.
Ambas plataformas, tienen una amplia gama de proyectos en NPM y Pub.dev para ayudar a los desarrolladores a elegir el paquete adecuado de un proyecto y brindar un nivel adicional de confianza.
Rendimiento
Para decir lo obvio, siempre ha habido una brecha de rendimiento notable entre Flutter y React Native. Con los años, esa brecha de desempeño se ha reducido.
Hoy en día, aunque la brecha no es tan grande como solía ser, Flutter todavía tiene una ligera ventaja sobre React Native, pero para la mayoría de las aplicaciones, es insignificante.
Si bien la publicidad de ambos frameworks te haría creer que ambas son aplicaciones “verdaderamente nativas” eso no es necesariamente cierto.
Rendimiento de React Native
La interfaz de usuario de React Native está hecha de componentes nativos de Android e iOS. Eso significa que utiliza los widgets de la plataforma que se incluyen con cada versión del sistema operativo.
Cuando un desarrollador usa un texto para mostrar información en su aplicación, por debajo React Native muestra un
TextViewen
en Android y un
UITextViewen
en iOS.
Este enfoque ciertamente tiene sus ventajas, ya que la interfaz de usuario siempre es familiar para el usuario final y es nativa para cada dispositivo.
El código y la lógica empresarial, por otro lado, se escriben en Javascript y luego se ejecutan en un dispositivo utilizando una máquina virtual de JS y un puente.
Cuando los desarrolladores piensan en las deficiencias de React Native, esta configuración suele ser uno de los puntos que aparece como un gran fallo.
Sin entrar en detalles superfluos, esta elección en la arquitectura significa que para actualizar la interfaz de usuario o cambiar ciertas partes de la aplicación.
El código de Javascript escrito no solo debe interpretarse, si no que también debe agregarse a la cola para que pueda cruzar el puente del framework hacia interactuar con los módulos nativos.
Eso no es del todo malo para React Native, puesto que el equipo de Facebook ha estado trabajando fuertemente en una nueva arquitectura para React Native.
En esa nueva arquitectura se abordan las principales preocupaciones descritas anteriormente.
En particular, la sustitución del puente y la introducción de un mecanismo JSI que permita la comunicación directa entre el hilo de JS de React Native y los módulos nativos.
Rendimiento de Flutter
En el mundo de Flutter, las cosas son muy diferentes. A diferencia de React Native, Flutter no se basa en componentes o vistas nativas.
En cambio, Flutter pinta cada píxel en la pantalla, dando a los desarrolladores un control total de los ciclos de pintura y diseño.
Podría ser más fácil de entender, si pensamos en Flutter como si fuese un motor de juego pero centrado en crear aplicaciones.
El framework de Flutter se compone de cinco capas distintas:
- Material y Cupertino: Las bibliotecas de Material y Cupertino ofrecen conjuntos completos de controles que utilizan las primitivas composición de la capa de widgets para implementar los lenguajes de diseño de Material o iOS.
- Widgets: La capa de widgets es una abstracción de composición. Cada objeto de renderizado en la misma tiene una clase correspondiente en la capa de widgets. Además, la capa de widgets te permite definir combinaciones de clases que puedes reutilizar. Esta es la capa en la que se introduce el modelo de programación reactiva.
- Renderizado: La capa de renderizado proporciona una abstracción para lidiar con el diseño. Con esta capa, puede construir un árbol de objetos renderizables. Puedes manipular estos objetos dinámicamente con el árbol actualizando automáticamente el diseño para reflejar sus cambios.
- Interfaz de usuario de Dart: Clases fundamentales básicas y servicios de bloques de construcción como animación, pintura y gestos que ofrecen abstracciones de uso común sobre la base subyacente.
Con una composición agresiva, los desarrolladores pueden usar widgets de cada una de estas capas para dar vida a sus aplicaciones. El resultado compilado de este código es una app rápida y receptiva.
Debido a que Flutter usa Dart como lenguaje, las aplicaciones se pueden compilar directamente en código de máquina nativo, lo que significa que no hay necesidad de una máquina virtual o puente en producción.
Además, los desarrolladores de Flutter, pueden beneficiarse de la Interfaz de función externa (FFI) para interactuar de manera rápida y eficiente con el código C (u otro lenguaje compatible) en sus apps.
En términos generales, una aplicación Flutter compilada es más pequeña y más rápida que una aplicación React Native compilada.
Sin embargo, la densidad del código puede variar según la complejidad de la aplicación y la elección de sus dependencias.
Comunidad
La parte final y más importante de elegir un framework es la comunidad.
Eventualmente encontrarás problemas que no podrás resolver por tu propia cuenta y tener una comunidad de desarrolladores que hayan resuelto algunos problemas con anterioridad, es una gran ventaja.
Ambas plataformas han recorrido un largo camino desde que se iniciaron y hoy en día, ambas pueden considerarse dos ecosistemas maduros.
Si eres un ávido usuario de Twitter (la aplicación del pájaro) no te resultará difícil encontrar grupos de desarrolladores apasionados y deseosos de ayudar a los recién llegados a ambos frameworks.
Flutter Community y React Native Community, son dos grandes ejemplos de excelentes cuentas de Twitter que comparten recursos para ayudar a todos los nuevos desarrolladores de aplicaciones.
Además, cuentas como Flutterista o ReactJSGirls, son espacios seguros para que las mujeres compartan sus experiencias Flutter y React Native con el resto del mundo.
Los sitios web como Stack Overflow y Medium también tienen una buena cantidad de contenidos sobre Flutter y React Native, cubriendo una amplia variedad de aspectos técnicos y no técnicos de cada framework.
En Ciberninjas, vas a encontrar contenidos relacionados, tanto sobre Flutter como de React Native.
El futuro de Flutter y React Native
El futuro de ambas plataformas, aparentemente será muy brillante.
Con el cambio en la arquitectura de React Native y la implementación de JSI, el equipo de Facebook dará una nueva vida a un framework que se pensaba que podía caer en declive.
Recientemente, el equipo de React Native publicó una publicación de blog en la que señalaba su intención de ir más allá de los dispositivos móviles y entrar en el espacio de las aplicaciones de escritorio.
Respecto a Flutter, el equipo de Google está haciendo un trabajo fantástico escuchando a la comunidad e introduciendo funciones que realmente mejoran la experiencia de desarrollo de Flutter.
Con la reciente adición de seguridad nula y el inicio de clases de datos de solución alternativa en Dart son excelentes ejemplos de cambios interesantes.
Es 2021, el mundo no es blanco, ni negro. Es muy popular elegir un bando en el debate móvil y argumentar que un framework es mejor que el otro, pero ese no es el caso.
Si esperabas que este artículo terminase con un claro “ganador”, lo lamento, pero en situaciones del mundo real la resolución final nunca es tan claro.
Como desarrollador o empresa que busca crear una aplicación móvil, hágase las siguientes preguntas:
- ¿Cuál es el caso de uso de mi aplicación?
- ¿Cuáles son las fortalezas de su equipo de desarrollo actual?
- ¿Planeas compartir código entre diferentes proyectos?
- ¿Está creando una aplicación primero o primero la web con un cliente móvil?
En última instancia, depende de cada proyecto y los recursos disponibles por cada desarrollador, no todos los desarrolladores o equipos son iguales.
¿Y tú qué framework estás utilizando? No dudes en contármelo por twitter.