Al momento de desarrollar aplicaciones móviles tenemos dos opciones ir por el desarrollo nativo o por el desarrollo híbrido; nosotros hemos decidido encaminarnos por el desarrollo híbrido con el fin de aprovechar su característica principal, que es generar a partir de un código fuente base las aplicaciones que permiten ejecutarse en los dos sistemas operativos móviles dominantes en la actualidad: Android e IOS.
De la gran cantidad de opciones que se encuentran hemos decidido comparar entre Flutter, Ionic y React Native, tres grandes referentes al momento de desarrollar aplicaciones móviles híbridas, vamos a conocer un poco de ellos y mencionaremos algunas de sus características principales, luego presentaremos un cuadro comparativo donde podremos ver desempeño, compatibilidad con dispositivos, curva de aprendizaje, ventajas y desventajas de cada uno.
Asunciones
Es importante mencionar que para la realización de este post, se realizaron las asunciones mencionadas a continuación con respecto al perfil del desarrollador, ya que inicialmente este análisis se hizo para la empresa donde actualmente trabajo:
- Tiene experiencia usando ReactJs en el desarrollo de aplicaciones Web.
- Actualmente se encuentra en un nivel técnico de principiante (junior).
- No cuenta con experiencia desarrollando aplicaciones móviles.
¿Qué es Flutter?
Flutter es un framework de interfaz de usuario multiplataforma desarrollado por Google. Se lanzó en mayo de 2017 y ha tenido un rápido crecimiento y popularidad entre los desarrolladores como lo indican estas estadísticas, donde pasó de ser escogido un 39% en el 2020 para desarrollar aplicaciones móviles a 42% en el 2021.
Características principales
- La velocidad, calidad y desempeño están pensadas desde el diseño, usando la aceleración gráfica por hardware en cualquier plataforma.
- Es un framework construido con Dart y el motor de renderizado está predominantemente en C++.
- Cuenta con recarga en caliente lo que permite reflejar tus cambios en la aplicación sin tener que reiniciar la depuración.
- La pieza mínima de diseño de interfaz de usuario se llama Widget.
¿Qué es React Native?
React Native es un framework multiplataforma creado por ingenieros de Meta (anteriormente Facebook), lanzado en el 2015, utiliza la librería ReactJs creada por ellos mismos lo que les ha permitido ganar bastante popularidad entre aquellos que ya la dominaban pues facilita la transición entre desarrollar aplicaciones web hacia desarrollar aplicaciones móviles híbridas.
Características principales
- Se desarrolla usando ReactJs, que no es más que una librería de JavaScript.
- Refresco rápido lo que permite reflejar tus cambios en la aplicación sin tener que reiniciar la depuración.
- La pieza mínima de diseño de interfaz de usuario se llama Componente.
¿Qué es Ionic?
Ionic es un kit de herramientas de interfaz de usuario de código abierto para crear aplicaciones móviles de alta calidad y rendimiento que utilizan tecnologías web (HTML, CSS y JavaScript) con integraciones para frameworks populares como Angular, React y Vue, aunque también es posible usarlo desde JavaScript puro.
Desde su lanzamiento en el 2013 ha sido desarrollado y mantenido activamente a tiempo completo por un equipo central, y su ecosistema está guiado por una comunidad internacional de desarrolladores y contribuyentes que impulsan su crecimiento y adopción.
Características principales
- Ionic se basa en tecnologías web confiables y estandarizadas: HTML, CSS y JavaScript, utilizando API web modernas como Custom Elements y Shadow DOM.
- Se puede utilizar con frameworks o con ninguno.
- Interacción con componentes Nativos a través de plugins de Capacitor (o Cordova).
- La pieza mínima de diseño de interfaz de usuario se llama Componente, eso si usando la sintaxis de su respectivo framework.
Cuadro comparativo
Luego de conocer un poco cada uno de estos frameworks, ahora si podemos compararlos y apreciar en detalle lo que tienen para ofrecer.
| Aspecto | Flutter | React Native | Ionic |
|---|---|---|---|
| Popularidad(1) | Se encuentra fuertemente en tendencia con 69 puntos de popularidad en promedio. Es el más popular de los tres. | Se ha mantenido en tendencia con 39 puntos de popularidad en promedio. Le sigue en popularidad a Flutter. | No se muestra mucho interés con 5 puntos de popularidad en promedio. Es el menos popular de los tres. |
| Desempeño | Al estar construido con Dart le permite compilarse más rápido que JavaScript. Como estándar muestra animaciones a 60 fps y por defecto las aplicaciones tienen buen desempeño, pues no requiere un puente para comunicarse con el código nativo, entonces se puede asumir con seguridad que eso mejoraría el rendimiento. | Como la arquitectura de React Native se compone de dos partes, JavaScript y nativo, el framework requiere un puente JS para interactuar con elementos nativos. Esta es otra cosa que hace que React Native sea un poco más lento que otras herramientas. Aunque recientemente la nueva arquitectura de React Native reemplazó los puentes JavaScript con JavaScript interface (JSI), que permite a los desarrolladores invocar directamente el módulo nativo sin usar puentes. | Ionic utiliza tecnologías web avanzadas, de HTML, CSS, JavaScript, que ayudan a crear aplicaciones híbridas de alto rendimiento. Pero requiere complementos y paquetes de terceros para envolver su aplicación en una cubierta nativa. Se deben seguir las recomendaciones del framework a utilizar para lograr el mejor desempeño. |
| Curva de Aprendizaje | Al usar Dart, un lenguaje que es más nuevo, requiere poco más esfuerzo para comprender el aspecto de esta plataforma, por lo tanto, los desarrolladores pueden necesitar ampliar sus capacidades de aprendizaje. | Al conocer ReactJs la transición a este framework facilita mucho las cosas pues se debe concentrar en aprender a utilizar los nuevos componentes y a aprender a crear los propios usando los componentes genéricos nativos que ofrece el framework. | Al poder integrarse con ReactJs, realmente el desarrollador deberá concentrarse en usar los componentes provistos por Ionic, así como los plugins que permiten interactuar con funcionalidades del dispositivo lo que lo hace relativamente fácil. |
| Costos de desarrollo | Flutter es un framework de código abierto que permite a los desarrolladores acceder a una amplia selección de widgets, bibliotecas y API de forma gratuita. | React Native es un framework de código abierto y permite a los desarrolladores acceder a una amplia selección de bibliotecas de forma gratuita. | También es gratuito y de código abierto, y permite a los desarrolladores acceder a una amplia selección de plugins de forma gratuita. Aunque también cuenta con servicios de pago que permiten acceder a beneficios como plugins y ambientes de trabajo especialmente diseñados para el trabajo con Ionic. |
| Compatibilidad con Dispositivos | Para dispositivos Apple requiere IOS 9 en adelante. Para dispositivos Android requiere Android 4.4 (API level 19) en adelante. | Para dispositivos Apple requiere IOS 11 en adelante. Para dispositivos Android requiere Android 6.0 (API level 23) en adelante. | Para dispositivos Apple requiere IOS 10 en adelante. Para dispositivos Android requiere Android 4.4 (API level 19) en adelante. |
| Cuenta con Hot Reload | Si | Si | Si |
- Según Google Trends, revisando las tendencias de hace un año desde Agosto de 2021 a nivel global.
Conclusiones
Podemos decir que con los tres frameworks nos dan la capacidad de realizar aplicaciones móviles partiendo de un código fuente base, que no vamos a tener que invertir dinero pues son gratuitas y de código abierto. En cuanto a rendimiento ninguna opción se van a comparar con una aplicación nativa, sin embargo Flutter es la que se destaca más. Todas cuentan con Hot Reload lo que hace que sea práctico al momento de desarrollar. Finalmente, que actualmente Flutter y React Native aunque son más jóvenes que Ionic parecen gozar de muchas más popularidad.
Mi humilde opinión
Teniendo en cuenta las asunciones que se hicieron en este post, creo que lo mejor sería adoptar React Native, pues aprovechando la curva de aprendizaje tan corta se lograría responder con prontitud a las solicitudes de un proyecto cercano; pero, dentro de lo posible creo que vale la pena invertir un poco más de tiempo aprendiendo Flutter, en especial por el desempeño que este ofrece y además que no sólo permite exportar las aplicaciones a dispositivos móviles, sino que también a Web y escritorio.
Enlaces de interés
Te invito a visitar los siguientes enlaces, gran parte de la información mostrada en este post ha sido recopilada de estas.
One thought on “Comparación entre Flutter, Ionic y React Native”