De JavaScript al desarrollo de aplicaciones móviles con React Native

En una entrada anterior de este blog sobre plataformas de desarrollo cruzado, analizábamos las ventajas de las plataformas de desarrollo cruzado nativo sobre las de desarrollo cruzado híbrido y destacábamos tres ejemplos de las primeras: Xamarin, Flutter y React Native.

En aquella ocasión destacábamos el caso de Xamarin por su mayor implantación y versatilidad, pero hoy queremos detenernos en uno de sus competidores mejor posicionado de cara al futuro próximo, gracias sobre todo a la gran publicidad que le da su uso en aplicaciones tan representativas como Instagram, Skype o Pinterest, además de en la de sus propios creadores, Facebook.

React.JS: un paso previo

En el origen de React Native está React.JS, una librería JavaScript desarrollada por el equipo de Facebook en 2011 siguiendo los paradigmas de programación reactiva y orientada al desarrollo de interfaces de usuario.

React.JS se basa en la creación de componentes de UI responsivos y el renderizado de los mismos a través de un DOM virtual que permite que sólo aquellos componentes del DOM que cambien en cada momento sean actualizados.

Las dos características anteriores aportan las principales ventajas que le han reportado la popularidad con la que cuenta actualmente:

• Una drástica mejora en el rendimiento al no requerir la actualización del DOM al completo
• Una mayor facilidad para el crecimiento y modularidad de los proyectos gracias al uso de componentes con funcionalidades independientes y sus propios estados (states) y propiedades (props)
• Contar con todas las ventajas asociadas a la programación reactiva

React Native: el paso al desarrollo móvil

Unos años más tarde, en 2015, Facebook lanza la primera versión de su framework open-source React Native para facilitar el desarrollo de aplicaciones móviles a partir del conocimiento de JavaScript y React.JS.

React Native sigue los mismos principios basados en el uso de componentes, con la diferencia de que estos componentes no serán renderizados a través del DOM virtual del que hace uso React.JS sino a través de las propias APIs nativas del dispositivo.

• El desarrollador tiene a sus disposición un conjunto de componentes React.JS predefinidos, cada uno de los cuales tiene su equivalente en views y componentes nativos de cada plataforma.
• El código JavaScript no se convierte en compilación en código nativo, sino que se ejecuta directamente en el dispositivo en paralelo a la ejecución del código nativo correspondiente a los componentes del interfaz o a otras librerías integradas en el desarrollo.
• De la ejecución del código JavaScript se encarga la máquina virtual JavaScriptCore, disponible por defecto en los dispositivos iOS y que va incluída dentro del apk en el caso de Android.
• El mapeo entre componentes y la comunicación entre las ejecuciones del código JavaScript y el código nativo se realiza a través del bridge que incorpora React Native. Es de la optimización de esta comunicación de la que dependerá en buena medida la performance de la aplicación resultante.

¿Por qué elegir React Native?

Volviendo al inicio de este post, lo primero que debemos tener presente es que React Native parte con todas las ventajas de los frameworks de desarrollo cruzado nativo respecto a otros de desarrollo cruzado híbrido como Cordova, PhoneGap o Ionic. Pero cuenta además con algunas ventajas adicionales respecto a otros de sus competidores directos:

• El paso a React Native desde tecnologías tan extendidas e implantadas como JavaScript y React.JS tiene una curva de aprendizaje mínima.
• Aunque el framework permite añadir a las aplicaciones código nativo para aquellas optimizaciones y funcionalidades que lo requieran (característica intrínseca del desarrollo cruzado nativo), es posible desarrollar aplicaciones completamente funcionales a partir únicamente de código JavaScript.
• Como en el caso anterior, si no se precisa codificación nativa adicional el desarrollador no tendrá que lidiar con los entornos de desarrollo de cada plataforma (XCode para iOS y Android Studio para Android), gracias a herramientas como Expo, que facilitan las pruebas en simuladores y dispositivos y los procesos de distribución de las aplicaciones.
• La ejecución directa en el dispositivo de código JavaScript permite hot reloading con Chrome, facilitando así la depuración de las aplicaciones en un primer nivel. Para ello, Chrome ejecuta este código en lugar de JavaScriptCore, comunicando con los módulos nativos a través de websockets.
• El renderizado a partir de componentes nativos repercute positivamente en la velocidad de carga y en la experiencia de navegación de la aplicación, equiparable en muchos casos al desarrollo puramente nativo.
• Gracias a los múltiples kits con templates y componentes predefinidos disponibles (React Native Starter, Gala, Argon RN…), el desarrollo de una aplicación puede simplificarse y acelerarse notablemente.

A todo lo anterior se suma la rápida evolución de framework, con importantes mejoras incluidas y previstas en las últimas y próximas versiones, como un nuevo motor JavaScript para mejorar la velocidad y consumo de memoria de las aplicaciones Android, nuevas funcionalidades de depuración y mejoras en la arquitectura del framework.

Por contra, las principales desventajas que presenta React Native vendrían dadas por ser una tecnología relativamente reciente, y por tanto con mucho camino aún por recorrer para cubrir las necesidades de aplicaciones complejas, y por que la depuración de la parte estrictamente nativa de las aplicaciones puede resultar más complicada por ser menos accesible.

Conclusión

En Izertis somos especialistas en el uso de React.JS para desarrollo web y en React Native entre otros frameworks de desarrollo cruzado nativo, entre los que seleccionamos, en función de sus características, el más adecuado a la hora de abordar el desarrollo de nuestros proyectos de movilidad.