Skip to content

React Native en Apps multiplataforma

Share on twitter
Share on linkedin
Share on email
Share on whatsapp
REACT en NATIVE Apps multiplataforma

El primer problema al que nos enfrentamos en el desarrollo de una aplicación móvil es que el tiempo de desarrollo se multiplica por la incompatibilidad de las apps entre plataformas, Android e iOS. Por tanto tendremos que realizar desarrollos diferentes para cada uno de los sistemas operativos existentes en el mercado, con lo que el tiempo de desarrollo es doble. Mientras que en Android el desarrollo se realiza en Java o Kotlin, en iOS deberemos utilizar Objetive C o Swift.

Aplicaciones multiplataforma 

Muchas han sido las opciones que se han ido sucediendo para intentar mitigar este doble trabajo con el que nos encontramos a la hora de realizar una app móvil. 

La primera solución hace unos años fue la utilización de código HTML y que la app únicamente consistiera en un navegador sobre el que se mostraba un código HTML a modo de aplicación. De esta forma el único problema era hacer un código web común pero compatible con los navegadores propios de cada plataforma, una labor hasta cierto punto sencilla.

El problema de este tipo de aplicaciones es que su rendimiento es muy bajo, no deja de ser un código interpretado como cualquier web que podamos ver en un navegador. 

PhoneGap y Apache Cordova 

Otra solución posterior y más interesante fue PhoneGap o Apache Cordova, lo mismo pero con distinto nombre. En 2009 la empresa Nitobi desarrolló PhoneGap. Se basaba en el concepto anterior, desarrollar código HTML5 sobre un navegador en la app. La diferencia era que tenía una capa de Javascript que nos permitía acceder a funcionas nativas programadas para cada sistema, por ejemplo acceso a almacenamiento, a la cámara de fotos, llamadas de teléfono… Esto permitía mejorar el rendimiento y poder acceder a elementos del móvil sin tener que utilizar código nativo propio. 

Todo el código se donó a la fundación Apache en 2011, pasando a ser un proyecto Open Source. En ese momento Adobe compró Nitobi pero estando de acuerdo con que el código sea donado como Open Source, con lo que Apache cambia el nombre de su producto a Cordova. Por tanto son lo mismo pero de distinto proveedor.

PhoneGap y Apache Cordova

PhoneGap/Apache Cordova fue un avance muy importante en cuanto al desarrollo de aplicaciones móviles pero seguía teniendo deficiencias. Mejoró el acceso a funciones nativas pero, en cuanto a rendimiento, no dejaban de ser un navegador con código HTML5. 

React Native en Apps multiplataforma

En este punto se buscaba la forma de poder desarrollar una aplicación con el rendimiento del código nativo pero con los beneficios de un desarrollo utilizando un lenguaje común. De ahí surge la utilización de React Native en Apps multiplataforma, creado por Facebook, y en el que se utiliza JavaScript. 

La solución que aporta es un diseño de pantallas con componentes JSX al estilo HTML pero cuyo resultado será un componente nativo.

Por ejemplo, una etiqueta <TEXT> en la pantalla, se transformará en un elemento nativo TextView de Android o en un elemento UITextView de iOS según la plataforma para que hayamos realizado la compilación. De esta forma tendremos el beneficio de un desarrollo común pero manteniendo un alto rendimiento cercano a las aplicaciones nativas.  

Además de todo lo anterior, en las apps de React Native, JavaScript se ejecuta directamente. Utiliza una especie de doble thread. Uno corriendo todo el código nativo, de los diferentes módulos que utilicemos en nuestra app, y otro corriendo una máquina virtual ejecutando JavaScript. 

React Native Logo
React Native

La curva de aprendizaje de React Native es muy corta, y si el desarrollador conoce React y JavaScript, puede comenzar directamente a programar desde el primer minuto. También tenemos a nuestra disposición herramientas para facilitarnos el desarrollo y la depuración: React Developer Tools, React Native Debugger o Redux DevTools.

Instalación de React Native 

Para el desarrollar con React Native en Apps multiplataforma utilizaremos un editor como por ejemplo Visual Studio Code, que cuenta con extensiones que nos ayudan durante la programación. Antes de la instalación deberemos tener en cuenta la diferencia entre los dos tipos de desarrollo que se pueden hacer en React Native: 

  • Expo CLI: es la forma más fácil de empezar a desarrollar nuestras apps. Simplemente teniendo Node.js y un móvil Android o un simulador. Lo malo es que tenemos la limitación de no poder escribir código nativo complementario para cada plataforma si lo necesitamos en algún momento. 
  • React Native CLI: en este caso necesitaremos tener instalado Xcode (iOS) y Android Studio (Android) por lo que primero tendremos que preparar todo el entorno. La ventaja es que ante cualquier dificultad en la que necesitemos código nativo podremos añadirlo sin problema.

En su web nos ofrecen una guía de instalación muy sencilla de todas las herramientas necesarias. En resumen, y para la opción de aplicaciones con React Native CLI, necesitaremos tener instalado: 

  • Node.js.
  • JavaDevelopment Kit.
  • Android Studio con Android SDK. 
  • XCode y CocoaPods.

Otros entornos multiplataforma 

Actualmente las apps multiplaforma se están convirtiendo en la opción preferente en muchos casos. Todo ello debido a factores como: Continua actualización de componentes, menor tiempo de el desarrollo para una aplicación, mayor rendimiento ya que se acerca al de código nativo.

Aunque existen otras plataformas, la solución más popular en la actualidad es utilizar React Native en Apps multiplataforma. Las principales razones son:

  • Cordova/PhoneGap: Actualmente en desuso por su bajo rendimiento en comparación con las otras opciones multiplataforma debido a que está basado en un webview con código HTML.
  • Ionic: Basada como Cordova en HTML , CSS y Javascript. Es un framework que se fundamenta en Angular. También desfasada por el bajo rendimiento en comparación con código nativo.
  • Xamarin: Se encuentra dentro del entorno .Net de Microsoft. El lenguaje utilizado es C# con plataformas nativas envueltas en una capa de .Net. Es más antiguo que React Native o Flutter, pero tal vez el que tenga una curva de aprendizaje mayor.
  • Flutter: Es una tecnología desarrollada por Google, basada en lenguaje Dart y un motor portátil de C++ para conseguir un framework con una potente interfaz de usuario. Es un lenguaje compilado anticipadamente que permite que la app se comunique directamente con el núcleo del lenguaje nativo. Además los componentes del interfaz son propios.
Apps Multiplataforma
Apps Multiplataforma

Conclusión

Para terminar, y a modo de resumen, en la siguiente tabla de muestran las diferencias entre los diferentes entornos multiplataforma para Apps móviles. Personalmente, utilizar React Native en Apps multiplataforma, es la solución que ofrece más ventajas: rendimiento muy cercano a las Apps nativas y una comunidad enorme desarrollando componentes que nos facilitan enormemente el trabajo.

Comparte el artículo

Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Share on whatsapp
WhatsApp

Una nueva generación de servicios tecnológicos y productos para nuestros clientes