Blog

Flutter vs React Native

Contenidos

Aquí, en Juice Studio, preferimos principalmente Flutter para nuestros desarrollos multiplataforma, pero reconocemos que hay otras grandes opciones en el mercado para la creación de aplicaciones, por lo que muchos buscan comparaciones entre Flutter y React Native para orientarse. En su mayor parte, cada uno logra el mismo objetivo, pero los medios para llegar a él son un poco diferentes.

Aunque hay otras grandes plataformas multiplataforma como Unity, que hemos utilizado para crear otros productos, React Native y Flutter son utilizados por la gran mayoría del mercado para crear aplicaciones multiplataforma. Como tal, vamos a explicar lo que son y discutir algunos de los puntos más finos de sus diferencias para ayudar a comunicar sus fortalezas y deficiencias.

¿Qué son Flutter y React Native?

React Native y Flutter son frameworks multiplataforma que permiten a los desarrolladores crear aplicaciones para Android e iOS simultáneamente mediante la creación de una única base de código que puede ser utilizada de forma nativa por cada plataforma móvil (o de escritorio). Cada uno de ellos tiene una forma diferente de lograr una hazaña que esencialmente permite a los desarrolladores programar en un lenguaje familiar y utilizar este mismo conjunto de código para Android, iOS, y potencialmente otras plataformas como Windows, Linux o Mac.

En lugar de crear una aplicación híbrida de bajo rendimiento o escribir dos aplicaciones enteras desde cero utilizando el lenguaje nativo respectivo de cada plataforma, las plataformas de desarrollo cruzado permiten a los desarrolladores crear una base de código que interactuará de forma nativa con el dispositivo subyacente, es decir, como si estuviera escrito en el lenguaje nativo de la plataforma. Aunque ni Flutter ni React Native proporcionan un 100% de código compartido entre plataformas, hemos visto en nuestro trabajo que normalmente el 80-90% del código escrito en cualquiera de estos frameworks se puede utilizar tanto en iOS como en Android. Lo que esto proporciona en última instancia es una mejor experiencia, ya que tienes controles reales que interactúan directamente con el sistema operativo y el hardware subyacentes, que no se ven forzados a través de capas de código ineficiente y renderizados a través del motor del navegador web, como vemos con las aplicaciones híbridas construidas con Cordova, Titanium o Ionic.

Construir aplicaciones de forma nativa, utilizando Swift para iOS y Kotlin para Android, produce los mejores resultados posibles cuando se construye una aplicación, pero lleva mucho tiempo crear dos construcciones separadas desde el principio. Por ello, algunos eligen sólo una para empezar (normalmente, iOS) o se decantan por el desarrollo multiplataforma, ya que esto permite reutilizar una gran parte de una única base de código para múltiples plataformas sin comprometer la calidad. Dicho esto, aunque cada una de ellas realiza la misma tarea, existen algunas diferencias clave en la forma en que «hacen lo que hacen», lo cual es importante a la hora de seleccionar una para tus aplicaciones.

Desarrollado por Facebook, React Native está centrado en Javascript e inyecta código como Objective-C/Swift o Java, dependiendo de dónde se ejecute, para interactuar de forma nativa con el sistema donde se ejecuta, donde renderiza los controles nativos de la interfaz de usuario. Flutter, de Google, utiliza un lenguaje de programación llamado «Dart» que construye código binario nativo y utiliza su motor propietario Skia para renderizar la interfaz de usuario y los controles. 

Básicamente, el «dónde» y el «cómo» que cada uno traduce el código escrito por los desarrolladores en el lenguaje respectivo de la plataforma (es decir, JavaScript o Dart) a código nativo utilizable (es decir, Java para Android o Swift para iOS) se produce en diferentes lugares que hace una diferencia en el rendimiento, además del hecho de que cada uno renderiza la interfaz de usuario que sus usuarios ven un poco diferente. Pero más adelante hablaremos de ello.

Flutter vs React Native

A diferencia de la política que a menudo sigue a los productos y servicios de Facebook y Google, sus frameworks multiplataforma tienden a desviar muchas de estas discusiones triviales que pueden sesgar tu capacidad para evaluar objetivamente una plataforma. Siéntete libre de soltar un dramático y largo suspiro cada vez que oigas «Meta» en lugar de Facebook en el futuro inmediato, pero intenta no dejar que esto o algún tipo de afinidad de fanboy por cualquiera de las plataformas nublen tu juicio cuando se trata de estos frameworks.

Así que, echemos un vistazo a lo que cada uno tiene que ofrecer.

React Native tiene una antigüedad que importa

React Native lleva más tiempo entre nosotros, lo cual es un punto bastante importante a tener en cuenta. Dado que está basado en JavaScript (un lenguaje que ha existido desde los años 90), la sintaxis es más familiar para la mayoría de los desarrolladores que Dart, que es un lenguaje único de Flutter. Debido a que está basado en JavaScript y se basa en ReactJS (que es un poco más antiguo) tienes un grupo más grande de personas viables para construir y mantener estas aplicaciones, además de que simplemente hay mucho más que está disponible para React Native.

Dart es un lenguaje muy nuevo que fue impulsado por Google como un reemplazo de JavaScript – el tiempo nos ha demostrado que no es y probablemente nunca será un «asesino de JavaScript», pero puede existir como su principal competidor. Mientras que React Native tiene antigüedad, Dart ha recorrido un largo camino en un periodo de tiempo relativamente corto – ¿quizás has sido la «persona nueva» en un trabajo pero has conseguido rendir a la par que el personal senior?

Capacidades de personalización de la UI

Ambas plataformas ofrecen una personalización sustancial, pero se ve diferente para cada framework, a saber, en la forma de renderizar que es un punto central en el debate React Native vs Flutter. El renderizado es manejado por Skia para las aplicaciones construidas con Flutter, lo que significa que hay más libertad para crear tus propios controles en lugar de utilizar los proporcionados por Android o iOS como lo hace React Native invocando las APIs de cualquiera de ellos para interconectar nativamente un elemento. Esto significa que hay un poco más de personalización inherente a Dart, pero no es tan eficiente. Sin embargo, para algunas aplicaciones que necesitan o quieren una interfaz de usuario extremadamente única, Dart proporciona el tipo de lienzo que los desarrolladores necesitan para crear fácilmente diseños altamente personalizados y funcionales.

Gracias al diseño de React Native, es más fácil para los desarrolladores que simplemente quieren utilizar controles de interfaz de usuario fiables y específicos de la plataforma. Debido a que React Native es una plataforma más experimentada que Flutter, hay más soporte de bibliotecas, lo que puede significar que hay más casos en los que los desarrolladores necesitarán construir cosas desde el principio en Dart.

Diferencias en cómo Flutter y React Native renderizan la UI

Como hemos mencionado antes, Flutter utiliza un sistema integrado de procesamiento de gráficos en 2D llamado Skia para crear la UI – esto tiene su origen en la filosofía de la plataforma que busca proporcionar a los desarrolladores un framework de trabajo «todo en uno», con todo lo que los desarrolladores necesitan, desde controles preconstruidos hasta widgets. React Native puede utilizar elementos personalizados, pero sus puntos fuertes se basan en la capacidad de utilizar controles conocidos en aras de la funcionalidad.

Aunque el sistema de gráficos de Dart parece que podría ser extraño, lo traduce todo a través del compilador de Flutter utilizando un eficiente proceso anticipado (AOT) que compila al código de Android o iOS. El enfoque de React Native es más bien una interfaz directa que es comparativamente más rápida pero menos maleable sin un poco de trabajo extra.

Aplicaciones que utilizan Flutter y React Native

No siempre se puede saber con qué framework se ha construido una aplicación, pero si se observa la misma aplicación en diferentes plataformas, se puede hacer una conjetura. Como hemos comentado anteriormente, el renderizado basado en Skia utilizado por Dart significa más o menos que es más probable que veas controles personalizados en ambas aplicaciones en lugar de controles nativos que esperarías ver en cada dispositivo. Algunos ejemplos de aplicaciones construidas con React Native incluyen Facebook (sorpresa, sorpresa), Walmart, Skype y Bloomberg. Flutter también tiene algunos nombres importantes en su haber, como BMW, Google Pay (por supuesto), Alibaba y una importante asociación con Tencent.

Artículos destacados

From offline to online.

Comparte tus ideas con nosotros