En esta entrada vamos a mostrar dos tecnologías que están irrumpiendo con fuerza en el panorama del desarrollo software, como son ReactJS y React Native. Vamos a ver a lo largo de este entrada que aunque a priori caigamos en comparar React JS con React Native, en realidad, esta comparación no tiene tanto sentido como sería el comparar React Native con otros mobile frameworks.

React JS

ReactJS es una librería JavaScript, desarrollada y mantenida por Facebook, enfocada a la visualización. Como React se encarga sólo de la vista de la aplicación dentro de un paradigma Modelo-Vista-Controlador, desde Facebook recomiendan encarecidamente el uso de ReactJS con Flux, que es grosso modo, un patrón de diseño software. Por este motivo, muchas veces vemos en combinación a React JS y Redux, que es una librería que implementa este patrón de diseño Flux y que ocupa apenas 2Kb.

ReactJS está fuertemente basado en componentes. Estos componentes son los elementos que constituyen la interfaz del usuario (un botón, un buscador, etc).

Reaccionan (de ahí viene su nombre) tanto a los eventos producidos por el usuario como a los del servidor. Finalmente, estos se repintan a sí mismos cuando ocurre un cambio de estado.

Con cada alteración se modifica un DOM virtual. Este hecho hace que el DOM real solo cambie en las partes que han experimentado alteraciones. Esto se traduce en una mejora del consumo de memoria y el rendimiento con respecto a otros frameworks.

React Native

Antes de entrar en más detalle sobre React Native, hay que tener muy presente la diferencia entre dos tipos de tecnologías de cara al desarrollo de aplicaciones móviles: Cross-platform (o híbridas) y Nativa.

  • Las apps híbridas se desarollan usando HTML5, CSS y JavaScript. Es decir, utilizan el mismo código independientemente de la plataforma en que se ejecutan. Se incrustan dentro de una webview o una Web App.
  • Las apps nativas se desarrollan usando el lenguaje requerido por la plataforma de destino en concreto: Objective-C y Swift para iOS, Java y Kotlin para Android, etc.

Estos dos enfoques  han imperado durante mucho tiempo en el desarrollo mobile. Pero con la irrupción de React Native este enfoque está cambiando. React Native es un mobile framework JavaScript que usa los componentes de ReactJS para construir aplicaciones “nativas” para móviles. Es decir, su desarrollo no es 100% cross-platform. Y es aquí donde radica su importancia frente a otros frameworks mobile y el porqué está revolucionando el desarrollo móvil.

Las vistas las crea de forma nativa. Esto significa que tiene un intérprete que a medida que la app se va ejecutando. Lo lee el HTML de estas vistas y va colocando cada uno de los componentes nativos en su posición.

Por ejemplo, el caso en el que la vista expresa que hay que poner un botón en la pantalla Home.

Cuando la app llegue a esta pantalla React Native creará un botón nativo y lo colocará en su posición correspondiente. Esto le dará una clara ventaja de que todo el frontend. Es decir, todas las interacciones con el usuario serán nativas.

¿Y cómo surge React Native?

Con el paradigma existente antes de la llegada de este framework, cada enfoque tenía sus ventajas e inconvenientes:

  • Las apps nativas tienen un aspecto profesional y su rendimiento es considerable. Sin embargo, es necesario conocer cada plataforma a fondo. Son propensas a tener una infinidad de bugs si no se controla el código con exhaustividad. Otro aspecto a tener en cuenta es que al desarrollar en nativo, se tiene la sensación de estar repitiendo el trabajo una y otra vez en cada plataforma.
  • El desarrollo en web App simplifica la programación al utilizar una misma plataforma común, pero en muchas ocasiones su aspecto y rendimiento no son tan finos como cabría esperar. También hay que tener en cuenta que estas apps tendrán un acceso muy limitado al hardware y a los APIs nativos[1] (GPS, notificaciones push…). Además, estos sistemas suelen tener entornos de desarrollo y depuración bastante pobres en comparación con los nativos (XCode y Android Studio por ejemplo).

Así pues, React Native nace tras la pregunta que muchísimos desarrolladores se hacen, ¿No sería posible desarrollar una app con el rendimiento nativo pero con los beneficios del desarrollo web? La respuesta rápida es sí, con React Native y su enfoque híbrido: Un rápido desarrollo y una experiencia de usuario nativa.

Conclusiones

En nuestra opinión, React y React Native tienen un futuro bastante prometedor. Gracias a su base construida en JavaScript, poseen una amplia comunidad y podemos encontrarnos muchas librerías que nos simplificarán nuestros desarrollos. Su fuerte respaldo de una gran compañía como es Facebook y el gran rendimiento que ofrecen gracias a su arquitectura, las hace herramientas muy poderosas a tener en cuenta en el desarrollo software.

En el caso particular de React Native,  aunque Ionic sigue en constante crecimiento y cada vez está mejorando más sus prestaciones, el nuevo enfoque que ha aportado React Native al paradigma del desarrollo mobile, ha hecho que le surja un excelente competidor.

Ante la obligada pregunta que el lector seguramente se esté haciendo sobre qué opciones de las presentadas elegir a la hora de desarrollar un proyecto mobile, sentimos que el sentido de la respuesta sea tan amplio: depende del proyecto.  Por poner un ejemplo, si estamos ante un proyecto en el que se deba usar el hardware del dispositivo de forma muy concreta y con poca tolerancia a fallos, entonces deberemos elegir el desarrollo nativo. Pero si hemos de elegir un desarrollo híbrido, y aún no tenemos muy claro de qué framework debemos elegir para nuestro desarrollo, hay que tener en cuenta la dificultad de desarrollar y la curva de aprendizaje que tiene React Native frente a otros frameworks como pueden ser Ionic.

Fuentes

ReactJS

React Native

Diferencias

 

[1]  Aunque en este sentido, Ionic está haciendo verdaderos esfuerzos en paliarlo gracias a la introducción de Ionic Native, un plugin que trabaja con las APIs nativas de cada plataforma.