Probé desarrollar la misma app con Flutter, React Native e Ionic

• Mientras buscaba el framework ideal para desarrollo móvil multiplataforma, me llamaron la atención Flutter, React Native e Ionic
• Los tres frameworks prometen buen rendimiento en varias plataformas con una sola base de código
• Hice una app móvil en tres versiones usando una API para mostrar datos básicos en pantalla y compararlas
  • Requisitos de la app: mostrar información de un país al cargar la pantalla, mostrar un spinner de carga, un botón para obtener un nuevo país aleatorio, y cargar la lista de países solo una vez

Flutter

• Flutter es un framework de código abierto creado por Google en 2017 para construir aplicaciones nativas para varias plataformas desde una sola base de código. Está basado en el lenguaje Dart
• Empecé a desarrollar después de estudiar la documentación y los tutoriales de Flutter durante una hora
• La configuración del entorno de desarrollo y la ejecución del emulador fueron fluidas
• Hice una app con funcionalidades básicas en 4 horas
• La función de sugerencias de Android Studio ayudó mucho durante el desarrollo
• La función Hot Reload permitió ver los cambios al instante y redujo el tiempo de desarrollo
• Sin embargo, el concepto de que "todo es un widget" hace que haya mucho anidamiento y que estilos y elementos estén mezclados, por lo que no resulta tan intuitivo

React Native

• Es un framework open source de JavaScript creado por Meta en 2015, con el que se pueden construir aplicaciones nativas para Android e iOS
• Ya tenía experiencia usando la librería React y VS Code ya estaba instalado
• El proceso de configuración del entorno fue complejo y confuso (hubo que entender la diferencia entre Expo Go y React Native CLI)
• Terminé la app en 2.5 horas, aunque tuve dificultades para resolver un problema con la visualización de imágenes
• Gracias a la arquitectura basada en componentes de React, el código quedó conciso y modular
• Con JSX, se puede escribir la UI de los componentes con un código similar a HTML

Ionic

• Ionic es un toolkit open source de UI móvil creado en 2012 para construir apps móviles multiplataforma modernas y de alta calidad desde una sola base de código
• Se puede desarrollar con React, Vue y Angular
• Ofrece componentes de UI abundantes y una interfaz de usuario atractiva
• Empecé a desarrollar después de dedicar 30 minutos a estudiar videos y guías de Ionic
• Desarrollé la app con la versión de Angular y pude avanzar rápido gracias a un ecosistema de desarrollo familiar
• La gran cantidad de archivos de configuración JSON y TypeScript generados en la configuración inicial fue algo abrumadora
• Terminé la app en 2 horas
• Fue fácil implementar la UI y la documentación está bien hecha
• Con plantillas HTML, se puede separar la UI de la lógica
• Componentes de UI como Spinner y Floating Action Button facilitan mucho la implementación de la interfaz

Comparación: Flutter, React Native, Ionic

• Estilo de código y lenguaje
  • Los frameworks basados en JavaScript se llevan la ventaja en legibilidad y simplicidad del código
  • El estilo de código anidado de Flutter es algo confuso y difícil de leer
  • La preferencia entre las plantillas de React y Angular depende del gusto personal
• Ecosistema
  • A abril de 2024, entre las 500 apps más instaladas en Estados Unidos, 12.57% fueron hechas con React Native, 5.24% con Flutter y 0.52% con Ionic
  • React Native ofrece mucha libertad, pero eso también puede generar confusión con la configuración y el uso de herramientas
  • Flutter sigue aumentando su adopción y tiene una gran cantidad de repositorios públicos en GitHub
• Herramientas
  • Hot Reload
    • En navegador, los tres frameworks recargan rápidamente la app cuando cambia el código
    • En dispositivos Android o simuladores, el Hot Reload de Flutter fue el más rápido
  • Depuración remota
    • Flutter DevTools es intuitivo y ofrece muchas funciones
    • Ionic facilita la depuración con una interfaz similar a Chrome Developer Tools
    • React Native ofrece React DevTools, pero queda por detrás de Flutter e Ionic en depuración remota
• Tamaño de la app
  • Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
  • El espacio ocupado después de la instalación fue de 9.61MB, 34.66MB y 55.47MB respectivamente
• Experiencia de usuario
  • Flutter e Ionic ofrecen componentes de UI acordes a la plataforma, lo que garantiza una experiencia de usuario consistente
  • React Native depende de librerías adicionales
• Rendimiento
  • Se espera que Flutter sea más rápido que React Native porque compila a código nativo
  • Como Ionic se ejecuta en una webview, su rendimiento puede ser algo más lento

Conclusión

• Me interesa profundizar más en el estilo de código de Flutter, y la función Hot Reload, que puede cambiar por completo la depuración, resulta muy atractiva
• Aun así, me atrae más Ionic porque permite aprovechar conocimientos previos de desarrollo web (TypeScript, HTML, CSS) en el desarrollo de apps móviles
• Creo que mejorar mis habilidades con Ionic puede fortalecer mis capacidades como desarrollador móvil y web
• A medida que el proyecto crezca, la organización del código, la separación de responsabilidades y la reutilización de componentes se volverán más claras
• Se pueden construir excelentes aplicaciones con cualquiera de los tres frameworks
  • Al elegir un framework, no hay que pasar por alto el disfrute del desarrollo
  • Recomiendo explorar distintos frameworks creando una app experimental

[firea32]

Como es la única librería cross-platform que usa native UI, es difícil renunciar a ella…
Si hubiera una alternativa, me cambiaría de inmediato, pero viendo que ni Flutter ni Ionic en el artículo eligieron native UI, parece que no tiene futuro.

[bus710]

En mi caso, me gustó Flutter porque podía hacer todo con Dart sin necesidad de saber HTML/CSS.

[superwoou]

Por lo general, quienes venían de trabajar con web decían que RN les resultaba más cómodo, y quienes no, que Flutter les era más conveniente.

[optid77]

Como el cross-platform en sí sigue siendo bastante de nicho, el desarrollo de librerías relacionadas suele ir más lento o quedarse corto.
Parece que React Native tiene como fortaleza el compartir parte del ecosistema de React.

Recuerdo que, comparado con cuando desarrollaba hace 2 años, recientemente al trabajar con RN su productividad había mejorado cada vez más gracias a que se podían usar librerías muy activamente desarrolladas y utilizadas en React, como Tailwind, React Query y TRPC.

[kaistj]

Por mi experiencia personal, al desarrollar apps las partes importantes fueron el manejo de estado y la UI.

En RN usé Redux + Redux-saga para la gestión global, y React-query por página.
En Flutter usé Riverpod.

Personalmente, me resultó un poco más fácil entender la gestión de estado del lado de React y el control del orden de la lógica,
y también fue más sencillo de desarrollar. Al ser una plataforma basada en web, el desarrollo fue un poco más fácil.

En Flutter, personalmente no me resultó fácil entender Riverpod. (También le dediqué relativamente poco tiempo.)
La gestión de estado simple no fue muy difícil, pero quizá por mi nivel de comprensión de la plataforma,
hubo cierta complejidad o dificultad en el manejo de cambios de estado y en la implementación de la lógica común después de procesar APIs del servidor.

En cuanto a la UI, los widgets de Flutter tenían propiedades y funciones bien definidas, así que el desarrollo fue fluido.
En React usé la librería de UI antd, y la experiencia de uso no fue mala.

Mi experiencia con React fue de hace 2 años, así que se basa en librerías de desarrollo algo antiguas,
mientras que Flutter lo desarrollé recientemente, pero le invertí poco tiempo.

También dejo mi experiencia de desarrollo en los comentarios~
Tómenlo como un simple “ah, también existe este lado de la historia...” ~ ^^

[xguru]

¡Gracias! Creo que también les será útil a otras personas.