Publicada: 3 Oct 2019 - Autor: Carlos Ramirez

Recientemente me plantee realizar una actualización profesional para aprender a desarrollar apps con la tecnología más solicitada actualmente en el mercado, tomando en cuenta Angular, Vue y React.

Inicialmente me pareció muy apropiado aprender React y React Native. Sin embargo, en el camino conocí Flutter, una tecnología relativamente nueva que está dando mucho de qué hablar.

En esta publicación, discutiremos las similitudes y diferencias entre las herramientas de desarrollo Flutter o React Native ¿Cuál debería aprender?

Categorías de aplicaciones y lenguajes

Tenemos las siguientes categorías de Aplicaciones:

  • Nativas: se desarrollan con Swift y Objective-C en el caso de iOS, Kotlin y Java en el caso de Android. Con estos lenguajes se logra un mejor performance de la app.
  • Híbridas: se desarrollan en Ionic, Apache Cordoba o PhoneGap. Utilizan archivos HTML, Javascript y CSS, los empaquetan en un WebView para luego pasarlos a una app móvil. Generalmente el rendimiento es pobre y se cuelgan con cierta frecuencia.
  • Cross Platform (multiplataforma): se desarrollan en Xamarin, React Native, Native Script y Flutter, entre otros.

Mientras que las aplicaciones nativas ofrecen una experiencia de usuario superior, las híbridas y Cross Platform están diseñadas para ahorrar tiempo y costos en el desarrollo, además de proporcionar un tiempo de comercialización más rápido.

Más allá de las ventajas y desventajas, cada marco tiene su arquitectura única para crear aplicaciones.

¿Qué es React Native?

React Native es un Framework de aplicaciones móviles de código abierto creado por Facebook. Se utiliza para desarrollar aplicaciones para Android, iOS, Web y UWP (Universal Windows Platform) permitiendo a los desarrolladores usar React junto con las capacidades de la plataforma nativa.

En verano de 2013 React Native comenzó como un proyecto interno de Facebook durante el Hackathon de Facebook.

En enero de 2015, durante la Conferencia React.js se presenta “React Native 1 Preview reléase”.

En marzo de 2015, durante la Conferencia F8 se realiza el lanzamiento oficial de React Native. Facebook declara React Native, «abierto para su uso y disponible en Github».

¿Qué es Flutter?

Flutter es el SDK de código abierto de Google para crear aplicaciones de calidad superior para Android e iOS utilizando una única base de código.

Su principal objetivo es el diseño de interfaces móviles; sin embargo, esta basado en un lenguaje de programación que permite compartir código fuente para Android e iOS, lo que facilita el aprovechamiento de la lógica del negocio como un elemento común.

Fue presentado por Google y la comunidad Flutter en mayo de 2017. El primer lanzamiento estable fue en diciembre de 2018. A partir de julio de 2019 está disponible la versión estable 1.7.8.

¿Quién está usando React Native?

  • Facebook usa React Native para sus proyectos importantes, tales como la app de Facebook, Instagram y la de Facebook Ads.
  • Oculus Go VR Headset viene con una aplicación móvil complementaria, construida completamente con React Native.
  • Pinterest, Uber, Tesla, Walmart, Wix.com, Baidu Mobile, Artsy, entre otros.

¿Quién está usando Flutter?

  • Alibaba, el gigante de comercio electrónico más grande del mundo, utilizó Flutter para crear su app Xianyu.
  • El app de Google Ads.
  • Greentea, la aplicación interna de gestión de clientes de Google.
  • JD Finance, una empresa líder de Fintech.
  • Reflecting, una aplicación de noticias muy atractiva.
  • Hamilton Musical, la aplicación oficial de Broadway Musical.
  • La aplicación Abbey Road Studios.

Similitudes entre Flutter y React Native

  • Están diseñados para el desarrollo de aplicaciones multiplataforma: Ambos ofrecen aplicaciones superiores, rápidas y de alta calidad en múltiples plataformas.
  • Ambos marcos están respaldados por comunidades tecnológicas gigantes.
  • De código abierto, gratis y rápido: Ambas son SDK de código abierto y gratuitos que permiten a los desarrolladores crear aplicaciones increíbles rápidamente debido a sus actuaciones nativas.
  • Documentación actualizada y detallada: Las comunidades de estos dos marcos están haciendo esfuerzos adicionales para mantener la documentación actualizada con referencias API y recursos integrales.
  • Excelente soporte de UI y experiencia nativa: React Native utiliza elementos de construcción de UI fundamentales como los que usa en Android / iOS para ofrecer la experiencia nativa. Flutter también utiliza sofisticados Widgets para proporcionar una experiencia nativa notable en ambas plataformas.
  • Hot Reload y modificaciones rápidas: React Native admite «Recarga en caliente» que permite visualizar en los emuladores de apps los cambios en el código fuente y mantener el estado de la aplicación en lugar de volver a compilar. Esto hace que el desarrollo sea más rápido, instantáneo y eficiente.
    De igual forma Flutter tiene la “Recarga en caliente con estado”, que admite la reflexión inmediata de los cambios sin reiniciar o en caso de pérdida del estado de la aplicación.

Flutter vs. React Native: diferencias

La diferencia clave del lenguaje de programación:

  • Flutter usa Dart.
  • React Native usa JavaScript.

JavaScript no necesita ninguna introducción. No hace falta decir que ha recibido una enorme popularidad ya sea un código móvil, web o específico del servidor.

Dart es bastante nuevo para los desarrolladores. Fue creado por Google. Proporciona una biblioteca de gráficos cautivadora. Utiliza características modernas de varios lenguajes para codificar excelentes aplicaciones nativas. No tiene ningún componente y estilo de JavaScript. No tiene separación de plantillas, estilo y archivos de datos.

La sintaxis de Dart se parece bastante a Java. Sin embargo, Google ha declarado que Dart está inspirado totalmente en la programación reactiva y estilo de programación de React.js. Si el programador ha trabajado anteriormente con este Framework, usando Styled Components, seguro le será fácil comprender y adoptar su sintaxis.

Dart es fácil de usar para las personas que tienen experiencia en el desarrollo de una aplicación en lenguajes OOP como C++ y Java.

Otra diferencia remarcable es el manejo de estados. En Flutter se             utiliza por defecto el patrón BLoC (Business Logic Component pattern), mientras que React Native permite elegir entre varios patrones incluidos por defecto tales como Component State y Context API, sin embargo, Redux es uno de los más populares en la comunidad de programadores.

El patrón BLoC es una buena idea, pero requiere mucho código para hacerlo funcionar y la curva de aprendizaje es bastante inclinada.

Redux es mucho más fácil de implementar y es también una alternativa que se puede usar en Flutter.

Por último, pero no menos importante es la apariencia de la app final.

En el caso de React Native, los componentes por defecto se adaptan a los de cada plataforma, o sea que los botones, App Bar y otros controles tendrán un aspecto más “nativo” tanto en iOS como en Android.

En el caso de Flutter, por defecto los controles lucirán siguiendo las directrices de Material Design, un standard desarrollado por Google para la interfaz de usuario de Android. Esto significa que los componentes lucirán iguales sin importar la plataforma. Para que los componentes luzcan “nativos” para IOS por ejemplo, requiere programación extra.

¿Por qué Flutter se está convirtiendo en favorito?

En primera instancia, el respaldo de Google. Esto tiene mucho peso en nuestros días.

Segundo, Dart se puede usar para desarrollo multiplataforma:

  • En dispositivos móviles con Flutter.
  • En el desarrollo Web a través de un Framework para el desarrollo Front End con JavaScript llamado AngularDart, que es una combinación con Angular, o más recientemente con Hummingbird, un prototipo para la plataforma Web.
  • En desarrollo Back End a través de Frameworks para HTTP Servers como Aqueduct.

Dart es considerado por algunos como “el lenguaje de programación del futuro” por su versatilidad de uso.

Se espera que Flutter sea el Framework principal para el desarrollo de aplicaciones para Fuschia, el nuevo sistema operativo en el que Google se encuentra trabajando, con un Kernel propio distinto al de Linux y con el cual pretende sustituir a Android.

Estabilidad y flexibilidad

En términos de estabilidad, no hay ninguna diferencia significativa, ya que ambos son administrados por comunidades tecnológicas bien establecidas.

Hablando de flexibilidad y personalización, Flutter ofrece un rico conjunto de Widgets personalizados para crear experiencias atractivas. React Native ofrece una experiencia de usuario perfecta mediante la comunicación directa con las plataformas nativas.

Flutter se está posicionando en el mercado y React Native está disfrutando de la primera posición en la lista de herramientas de desarrollo de aplicaciones multiplataforma.

Tiempo de desarrollo de una aplicación

Aprovechando la multiplataforma, las empresas ya ahorran tiempo que generalmente ocupa en codificar aplicaciones en varios lenguajes.

Además, React Native y Flutter están comprometidos a proporcionar un tiempo de comercialización más rápido de una aplicación. Puede usar bibliotecas de terceros y componentes listos para usar para crear una aplicación. Una gama de Widgets personalizada y de alta calidad ayuda a construir una aplicación en menos tiempo que el desarrollo de aplicaciones nativas.

Rendimiento

A diferencia del desarrollo híbrido de aplicaciones móviles basado en un WebView para mostrar código HTML, o el desarrollo Cross Platform con un Bridge que utiliza Renderers intermedios de código nativo para la generación de apps, Flutter compila directamente hacia el código final que interactúa con el procesador, saltándose los pasos intermedios, por lo que las aplicaciones resultantes tienen una mejor performance y mayor rendimiento.

Flutter usa sus propios Widgets y Engine de Renderizado llamado Skia Canvas, desarrollado en C++, que se comunica directamente con el sistema operativo.

React Native es popular por ofrecer una excelente experiencia de usuario en ambas plataformas.

Flutter tiene la ventaja adicional de reutilizar el código, mientras que React Native es menos adecuado en este aspecto debido a su arquitectura.

Flutter también tiene una ventaja más de la capa de JavaScript que facilita la comunicación con los componentes nativos.

Ambas son opciones confiables cuando se elige multiplataforma, pero Flutter tiene ventajas competitivas de su simplicidad y plataforma Dart.

React Native está prosperando con un rendimiento superior de la aplicación tanto en las plataformas, iOS y Android. Facebook y la React Native Community están trabajando en una nueva arquitectura a gran escala del marco para hacerlo más flexible y mejor.

IDE y facilidad de codificación

Flutter es nuevo y es compatible con Android Studio / IntelliJ, Visual Studio Code en la actualidad. Como React Native ha pasado 4 años desde su lanzamiento, es compatible con casi todos los IDE líderes.

React Native ofrece una curva de aprendizaje fácil debido al uso de JavaScript. Flutter requiere aprender Dart para crear una aplicación. Sin embargo, Dart es un punto a favor para los desarrolladores de C++ y Java.

Flutter vs React Native: una comparación rápida

Ambos marcos tienen su propio conjunto de ventajas y desventajas.

Tecnología React Native Flutter Ganador
Creado por Facebook Google Ambos
Primer lanzamiento Enero 2015 Mayo 2017 React Native
Lenguaje de programación JavaScript Dart React Native
Curva de aprendizaje Si ya conoces Javascript y React, es muy fácil de aprender Curva ligeramente inclinada si necesitas aprender Dart React Native
Performance del App final Buena Superior Flutter
Manejo de Estado / Arquitectura Component State, Context API, Flux, Redux BLoC (Business Logic Component pattern), Redux Redux
Tecnología (continuación…) React Native Flutter Ganador
Tamaño de la Biblioteca de componentes Muy grande Menor, pero creciendo React Native
Autoría de la Biblioteca de Componentes Mayormente por terceros, algunos pocos por Facebook Mayormente por Google Flutter
Componentes adaptativos Mayor soporte para componentes nativos de cada plataforma (iOS/Android) Menor soporte y necesidad de configuración manual. Se enfoca hacia Material Design React Native (la app final luce más “nativa”)
Comunidad Bien establecida y grande En buen crecimiento. Google está haciendo un gran esfuerzo por impulsarla React Native
Adopción de la industria Maduro, usado en producción por grandes organizaciones No tan maduro, pero creciendo React Native
Hot Reload Soportado Soportado Ambos
Precio Open Source Open Source Ambos
Estrellas en Github 78,168 67,422 React Native
Documentación de la Tecnología Muy bien escrita, fácil de entender, precisa y actualizada Actualizada pero imprecisa. Frecuentemente es necesario buscar documentación desarrollada por terceros Flutter
Quién la usa Facebook, Instagram, Pinterest, Uber, Tesla, Walmart, Wix.com, Baidu Mobile, Artsy, entre otros Alibaba, Reflectly, Google Greentea, Tencent, Google Ads, App Tree React Native
Ventaja Competitiva Con más de 3 años en el mercado y la habilidad de liberar experiencias de usuario con aspecto nativo Apps nativas simples, rápidas y elegantes desarrolladas con la sencilla SDK de Flutter Flutter
Time-to-Market (tiempo de comercialización) Más lento que Flutter Más rápido Flutter

Ventajas de Flutter

  • Documentación limpia, clara y fluida.
  • El apoyo de Google y su fuerte comunidad.
  • La velocidad de desarrollo más rápida y confiable.
  • Increíbles actuaciones de aplicaciones nativas.
  • Una amplia gama de componentes UI expresivos y flexibles.
  • Recarga en caliente con estado para una implementación de cambios más rápida.
  • Accesibilidad de los SDK nativos y sus características.
  • Enfoque moderno, mejorado y flexible para la codificación.
  • Soporte API para efectos 2D, animación y gestos.

Desventajas de Flutter

  • Aunque Dart es un lenguaje de programación fácil de usar, Flutter requiere aprenderlo.
  • Dificultades para diseñar los componentes ya que no se usa JavaScript.
  • Gestión compleja del ciclo de vida en comparación con React Native.
  • No es tan maduro como React Native.

Conclusión: Flutter o React Native ¿Cuál debería aprender?

Es complejo determinar cuál es el mejor ya que la selección depende de muchos criterios: requisitos, presupuesto, características y disponibilidad de desarrolladores. Sin embargo, puede elegir cualquiera de ellos para su próximo proyecto de desarrollo de aplicaciones multiplataforma, ya que ambos son herramientas consistentes, directas y líderes del mercado.

Yo me inclino hacia Flutter, más que nada por el mejor rendimiento en la app resultante. Creo que la inclinada curva de aprendizaje del programador a un nuevo lenguaje se traduce en un beneficio en la experiencia del usuario final, el cual representa el objetivo último de todo desarrollo.

He sido usuario de apps desarrolladas con React Native, muy buenas en cuanto al concepto general de la app, sin embargo, me han dejado muy aburrido y decepcionado respecto a su rendimiento, la experiencia de usuario ha sido desagradable, finalmente he dejado de usarlas y las he desinstalado.

¿Cuál de los dos lenguajes de programación elegirías tú? Déjanos tus comentarios al final.

¡Compartir!