Bit - loader

React Native: Una nueva arquitectura para la generación de Apps


Netmind - React Native: Una nueva arquitectura para la generación de Apps    Artículo | React Native
Ricardo Ahumada | 31/07/18

Generar una aplicación móvil empresarial es una decisión estratégica hoy en día y por tanto, escoger la pila de tecnologías con las que nos casaremos es crítico.

En este artículo quiero introducir una visión más técnica sobre React Native y las razones estratégicas por las que es un framework tan interesante para crear aplicaciones empresariales, sobre todo aquellas enfocadas a la gestión de un dominio de datos.

 

React Native es un framework desarrollado por Facebook que permite construir aplicaciones móviles usando JavaScript. React Native permite que JavaScript se ejecute e interactúe con los sistemas IOS y Android de la misma manera que lo hace el código nativo.

Usa el mismo diseño de React, lo que permite componer una interfaz de usuario móvil bastante rica a partir de componentes declarativos (estándar Web Component). Esto permite a los desarrolladores reutilizar el código en la web, en dispositivos móviles y a través de diferentes sistemas operativos.

 

React Native se está volviendo muy popular en el desarrollo móvil en pequeñas empresas, startups y, ahora también, en empresas bien establecidas.

Por un lado, React ha demostrado ser tremendamente exitoso, tanto en nuestros propios proyectos, como con muchos otros en la web, incluidas grandes empresas como Netflix. Con React Native, el framework de Facebook ha llegado a los dispositivos móviles. React Native es una excelente opción para crear aplicaciones iOS y Android que se sientan como en casa en sus respectivas plataformas, y al mismo tiempo aprovechar cualquier experiencia previa de desarrollo web.

 

La razón de ser de esto es el planteamiento de la arquitectura de React Native (RN).

 

RN: Una arquitectura para ganar

Tal como lo hemos dejado caer en la introducción, la clave de React Native es que permite que JavaScript se ejecute e interactúe con sistema operativo IOS y Android de la misma manera que lo hace el código nativo.

Pete Heard hace una exploración bastante detallada en su blog sobre la arquitectura de react native y las diferencias frente a propuestas híbridas.

 

Cómo funciona una aplicación Javascript moderna:

En una SPA el navegador carga:

  • HTML: contine una referencia al javascript
<html>
<script src=/path/to/js/>
</html>
  • Javascript

La SPA (single page application) permite que nuestra aplicación se represente utilizando (HTML) y la interacción entre el navegador y el usuario se logra a través de JavaScript.

El resultado final es una página web renderizada con todas las opciones que esperamos (por ejemplo, controles de entrada, comportamiento dinámico, validación, etc.).

 

React Native: Una nueva arquitectura para la generación de Apps 0

 

JavaScript Runtime Environment Architecture (Bridging)

Veamos cómo se ejecuta Javascript realmente en un dispositivo móvil.

Debido a que JavaScript no es el lenguaje que se ejecuta de forma nativa en el teléfono, debemos usar una técnica llamada puenteo (bridging) para permitir que JavaScript se ejecute y se comunique con el procesador del teléfono.

 

Esto significa que el teléfono debe ejecutar algo llamado ‘núcleo de JavaScript’; que es básicamente un ‘entorno de runtime’.
Este entorno de tiempo de ejecución no es más que un código que se ejecuta sobre el sistema operativo y que permite la ejecución de JavaScript.
Lo hace cargando un código nativo que puede ejecutar JavaScript y luego cargando JavaScript en él (que se envía al teléfono en un proceso de compilación). Para obtener información específica al respecto, consulte la documentación de React Native.

 

Por tanto, tal como se muestra en el siguiente diagrama, además del respectivo sistema operativo de los móviles, tenemos nuestro entorno de runtime de JavaScript. Dentro de este entorno, se ejecuta el código React Native JavaScript.

 

React Native: Una nueva arquitectura para la generación de Apps 1

 

El diagrama muestra solo una línea azul (que representa un punto de bridging). En realidad, existen múltiples puntos de enlace que nuestro código JavaScript conecta con los controles nativos del teléfono, para que JavaScript ejecute una aplicación nativa, debe seguir usando el código nativo subyacente.

 

Hay más de una instancia de código nativo que cada aplicación necesitará usar. Por ejemplo, podemos necesitar una sola aplicación con muchos controles diferentes que son únicos para cada teléfono.
Esto se hace configurando cada control en el entorno de tiempo de ejecución de JavaScript y luego comunicándose a través del puente.

 

En realidad, tendremos una representación con algo como esto:

 

React Native: Una nueva arquitectura para la generación de Apps 2

Podemos ver que cada control React Native interactuará con un contraparte nativo.

 

Estamos ‘autorizados’ a escribir JavaScript porque React Native nos presenta un control que está escrito en JavaScript. Pero esto siempre se basa en la contraparte original de los teléfonos.

React Native simplemente permite que el puente se produzca la comunicación bidireccional.

 

Por lo tanto, el código nativo está funcionando en su propio hilo, lo que significa que si nuestro código React Nativo JavaScript tarda mucho tiempo, la IU no se bloqueará ni disminuirá. Simplemente hace una llamada a través del puente utilizando eventos.

Esto último es la advertencia más importante para desarrollar aplicaciones React Native, así que hay que tener cuidado de no bloquear procesos en nuestro código JavaScript.

 

Javascript Runtime Environment

De cierta manera el entorno Javascript Runtime recuerda lejanamente al entorno Java Runtime y de ahí que considero que la estrategia de la arquitectura por la que ha apostado React Native es una arquitectura ganadora.

Realmente esto permite unir lo mejor de los dos mundos, tanto del lado Javascript como del entorno nativo del teléfono, prácticamente sin panalizar el rendimiento.

Se puede encontrar más detalle sobre el Javascript Runtime Enviromente en este artículo.

Al usar React Native, el código se puede ejecutar en dos entornos:

  • En el caso de producción, React Native usará JavaScriptCore, el motor de JavaScript que impulsa Safari. Hay que tener en cuenta que en iOS, JavaScriptCore no utiliza JIT debido a la ausencia de memoria ejecutable grabable en las aplicaciones de iOS.
  • Al hacer debugging con Chrome, todo el código JavaScript se ejecuta dentro de Chrome, comunicándose con el código nativo a través de WebSockets. Chrome usa V8 como su motor de JavaScript.

 

Diferencias entre Ionic, Cordova, Phonegap y React Native

Ionic, Cordova y PhoneGap son aplicaciones híbridas.

  • Cordova es un framework que ejecuta una aplicación de JavaScript en una WebView que tiene extensiones nativas adicionales, que es la definición de una aplicación híbrida. .
  • Ionic se basa en Cordova y viene con Angular. Tiene un conjunto de controles estándar que imitan los controles nativos.
  • PhoneGap es una distribución de Cordova con algunos paquetes personalizados y ajustes.

En esencia, son sitios web integrados en una aplicación móvil a través de lo que llamamos un WebView.

 

En cambio las aplicaciones creadas con React Native no son aplicaciones web, aplicaciones HTML5 o aplicaciones híbridas.

 

Están escritas en JavaScript pero son renderizadas usando componentes nativos, lo que significa que la experiencia de usuario generalmente estará más cerca a las aplicaciones nativas, ya que se ajustarán a los estándares impuestos por el sistema operativo.

 

React Native tiene en general un mejor rendimiento y animaciones mucho más suaves.

“Al usar React, podemos crear aplicaciones móviles reales, indistinguibles de las aplicaciones creadas con Objective-C (aplicaciones iOS nativas) o Java (aplicaciones nativas de Android).”

 

Riesgos relacionados con usar Ionic, Cordova o PhoneGap

El mayor problema con las aplicaciones híbridas es su rendimiento. La web se construyó originalmente para páginas web, no para aplicaciones complejas, y hoy en día las apps front lo son. Las aplicaciones híbridas funcionarán perfectamente en teléfonos de gama alta, pero aún así no tan bien como se desearía. En teléfonos de gama baja tendremos problemas debido al rendimiento.

 

“La mayoría de usuario de smartphones pasan la mayor parte de su tiempo usando solo algunas aplicaciones, y esperan que cualquier aplicación nueva que prueben deben ser tan refinadas como Facebook, YouTube o Uber. “

 

Con estas expectativas tan altas de los usuarios, a las aplicaciones híbridas lees resulta complejo o imposible cumplir con estas referencias. Normalmente ofrecen una experiencia de usuario pobre con animaciones lentas, falta de reconocimiento de gestos específico de la plataforma y mal comportamiento del teclado.

Otro problema es que al construir una aplicación híbrida, heredamos automáticamente todos los problemas que tiene la web. Esto significa errores que solo aparecen en uno o más navegadores o estilos que funcionan de manera diferente en diferentes navegadores.

 

Otro aspecto es que la popularidad de las aplicaciones híbridas está en declive. Los casos de muestra, tanto de PhoneGap como de Ionic muestran una deficiencia notable en las aplicaciones de primer nivel.
Por el contrario, la lista de aplicaciones que han migrado de híbrido/nativo a React Native es amplio y en crecimiento.

Sería bastante raro encontrar un producto de alta gama que se ha movido de nativa a híbrida.

 

Beneficios

React Native permite transferir la base del código entre diferentes plataformas móviles. Tras escribir una aplicación para dispositivos iOS, se puede compilar en Android en poco tiempo (y viceversa).
Se habla de ahorros de más de un 30% de tiempo respecto a desarrollos nativos IOS y Android.
Esta es una de las principales razones por las que muchas empresas optan por el desarrollo de aplicaciones Con React Native. Además de esta:

  • Ahorro adicional al tener una aplicación web React y un React Aplicación móvil nativa: ya que muchas empresas necesitan una versión web y móvil de sus aplicaciones.
  • Equipo más pequeño: Respecto a desarrollo en apps nativas, tal como deja ver Tal Kol, en el ReactNext 2016
  • Soporte de Facebook
  • Prueba social (Skype, AirBnB e Instagram ya lo usan)
  • Rendimiento de las aplicaciones: cercano a las nativas. De hecho si no se logra el rendimiento deseado, siempre se puede transferir dicha parte a nativa y usarlo desde RN. Sobre esto hablaremos en un próximo post.
  • Interfaz de usuario simplificada: tiene una base sólida en el desarrollo de UI y es mucho más fácil detectar errores en las rutas.

 

9 Big players que usan React Native

  • Facebook
  • Skype
  • Facebook Ads
  • Instagram
  • Walmart
  • Airbnb
  • SoundCloud Pulse
  • Yeti Smart Home
  • Uber Eats

 

Reflexiones finales

Tal como hemos revisado en esta pequeña reseña, React Native es un framework muy interesante como candidato para ser elegido como parte de las tecnologías estratégicas de la empresa.

Su planteamiento de arquitectura permite “diseñar una vez y correr en distintas plataformas” usando los componentes nativos de cada plataforma, lo que permite que su rendimiento se acerque, y mucho, a las opciones nativas. Esto lo hace, desde mi punto de visto, una arquitectura ganadora.

Hemos visto asimismo, que nos aporta una serie de beneficios, que son suscritos por los grandes jugadores que han adoptado el framework como base para sus propias aplicaciones.

En próximos post veremos cómo desarrollar una aplicación simple y revisaremos los aspectos de performance comparadas con aplicaciones nativas.


Ricardo Ahumada


Entradas relacionadas
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad.