Home » Análisis » React Native, análisis del framework de creación de apps nativas de Facebook en javascript
React Native iOS Javascript

React Native, análisis del framework de creación de apps nativas de Facebook en javascript

Además de la red social que todos conocemos, Facebook es una de las más importantes empresas de desarrollo a nivel mundial, que aporta muchas de sus soluciones e innovaciones a la comunidad de desarrolladores, con el fin de ampliar y mejorar el ecosistema de desarrollo. Uno de sus soluciones más prolíficas es React, un framework basado en javascript cuyo objetivo principal es hacer apps de página simple para web (como la propia Facebook) que permitan una interfaz que reaccione (de ahí el nombre) y cambie en función de la interacción del usuario sin necesidad de recargar.

Pero en enero de este año, Facebook dio un paso más allá y presentó para un selecto grupo de desarrolladores, React Native, una versión especial de su librería capaz de generar apps nativas para dispositivos móviles iOS y Android, programadas en javascript y con la capacidad de servir de puente entre los componentes nativos de cada sistema.

La programación, no obstante, no es 100% cross-platform y el mismo código no servirá para cada sistema (aunque sí en gran parte), pues la base de React Native es que permite trabajar a nivel de programación funcional en la construcción de interfaces y que estos reaccionen dinámicamente a través del framework. Vamos a hacer un pequeño análisis de cómo funciona en iOS.

Primeros pasos

Lo primero que hemos de hacer es bajar el framework de GitHub desde este enlace. Si tenemos instalado Homebrew, hemos de instalar Node.js para que todo funcione correctamente. Si no, instalar Homebrew es tan simple como copiar y pegar el comando que hay más abajo en el terminal de OS X.

Una vez bajado e instalado (no olvidéis el paso del último comando brew doctor), tendremos acceso a la instalación de multitud de frameworks y librerías de desarrollo que nos pueden ser muy útiles en muchos casos. En este caso vamos a instalar Node.js sobre el que funciona React Native.

Ahora hemos de ir con el terminal a la carpeta donde hemos descargado el framework React Node y ejecutar:

Una vez instalado, arrancamos y dejamos la ventana del terminal abierta mientras desarrollamos, ya que es necesario que el servidor de React Node esté ejecutándose en segundo plano para que podamos trabajar con él.

Infraestructura

A partir de aquí, podemos empezar a probar. Abrimos Xcode, pulsamos en Open Another Project o File -> Open y navegamos hasta la carpeta donde tenemos nuestra descarga de React Native. En ella buscamos Examples y en allí tenemos varios: un par de juegos (el 2048 y el TicTacToe), Movies, UIExplorer y una SampleApp.

Para abrirlos solo hemos de elegir navegar hasta la carpeta y una vez seleccionada la carpeta pero sin entrar en ella, pulsamos Open. Este permitirá a Xcode abrir el proyecto y los ficheros dentro de esta (también podemos abrir el .xcodeproj, pero la carpeta resulta más cómodo).

Hemos de entender que el proyecto no es más que un puente hacia la verdadera funcionalidad, que en este caso no está en Xcode. Vamos a abrir el proyecto SampleApp y lo primero que hemos de hacer es ir al AppDelegate.m y revisar la información pues es aquí donde está el corazón de cómo React Native funciona.

En estas líneas es donde está el funcionamiento. No estamos hablando de crear una WebView que use el motor de Safari como si quisiéramos abrir una página web desde nuestra app. Lo que tenemos aquí es un motor que ejecuta javascript en un servidor (el proceso que tenemos en el terminal oyendo en el puerto 8081) y lo que vemos es una traducción en tiempo real desde nuestro código hacia los componentes nativos de UIKit en iOS.

El truco está en ese componente RTCRootView, que crea una vista raíz que integra toda la funcionalidad de React Native a partir de la URL que apunta al javaScript index.ios.bundle, que también nos permite crear una navegación entre ficheros javascript al más puro estilo storyboard en iOS, pero de manera programada (como podemos ver en el ejemplo Movies, por ejemplo). Vamos a probar a ejecutar y veremos que aparece una ventana con dos tipos de letras y un mensaje de bienvenida.

Vamos a abrir el archivo index.ios.bundle con cualquier editor para modificar y ampliar el código. Yo personalmente uso Atom, que además es el editor base del IDE recién anunciado Nuclide que Facebook desarrolla específicamente para React Native.

Entendiendo el código

Entendamos primero cómo está organizado y qué significa cada cosa.

La primera instrucción activa el modo estricto de javascript que proporciona una mejor de gestión de errores y obliga a ser más estricto en el uso del lenguaje.

Esta instrucción es algo así como hacer un import de la librería principal, en este caso, la que da servicio a React Native, indicando que es requerida para poder ejecutar el código.

Con esta instrucción, estamos asociando las variables que indicamos al dominio React. Sin ella, cuando hiciéramos uso de cualquiera de las propiedades de la librería de React Native como Text o View, tendríamos que indicar React.Text o React.View. Con esta instrucción, no tendremos que anteceder el React.

Aquí es donde está la app. Creamos una variable SampleApp y le asignamos la creación de una clase javascript que creamos con React.createClass. Dentro de ella, invocamos a render, que es el motor que construirá la interfaz, le pasamos una función vacía y devolvemos los parámetros que construyen nuestra interfaz: un vista contenedora y dos textos dentro de ella. La vista tendrá el estilo container y los textos el primero el estilo welcome y el segundo el estilo instruccions. Dentro de la etiqueta correspondiente, el contenido.

Aquí tenemos los estilos: creamos una variable styles que genera la creación de una hoja de estilo con 3 estilos a usar: container, welcome e instructions, los cuales ya hemos visto que usamos en el cuerpo del código.

Por último, la línea que asigna nuestra variable SampleApp que contiene la clase que hemos creado a la ejecución:

De esta forma se crea el punto de entrada y el contenido de la raíz del programa.

Retocando

Vamos a incorporar una imagen, por ejemplo, la nave de SpriteKit. La forma de hacerlo es incluir los recursos de imagen locales dentro de un asset en Xcode, más concretamente en el ya existente Images.xcassets. Si cogemos la imagen y la arrastramos aquí, ya formará parte de nuestro proyecto.

Para asegurarnos que coja bien los enlaces, vamos a la ventana de terminal, pulsamos CTRL+C para cerrar el proceso de React Native y volvemos a arrancarlo. Suele ser necesario cada vez que incorporemos un nuevo fichero, al menos por ahora.

Una vez hecho esto vamos a modificar nuestro código. Lo primero, incluimos dentro de nuestra lista de variables con el dominio React incluido el tipo Image.

Debajo del último campo de texto incluimos la imagen:

Spaceship es el nombre e image! hace referencia al asset de imágenes en Xcode. Usamos el estilo image que aun tenemos que crear así que lo incluimos al final de los estilos.

Hecho esto, grabamos y ejecutamos. El resultado, si todo ha ido bien, salta a la vista.

Conclusiones

App de Ejemplo React NativeEl gran problema que tiene el desarrollo cruzado de plataformas con sistemas como PhoneGap, es que lo que ganamos en eficiencia en cuanto a un único desarrollo, lo perdemos en funcionalidad y código eficiente. Además, estas soluciones se caracterizan por construir unas interfaces tremendamente horribles.

React Native es una muy buena solución por parte de Facebook (de código abierto, por supuesto) para crear un paso intermedio que sí permiten crear apps que se aprovechen de las características de construcción de interfaces de cada dispositivo y que a su vez creen experiencias de usuario más óptimas.

Por supuesto, solo hemos visto la pequeña punta de lanza de todas las posibilidades que podemos conseguir. Os invitamos a probar el resto de aplicaciones de ejemplo y cómo están hechas, mezclando elementos cargados desde web, elementos locales, capturando los gestos del dispositivo, creando componentes como selectores de valores, botones… Próximamente veremos como montar una pequeña app desde 0 y lo fácil que resulta una vez entendemos cómo se estructura y se forman.

Hasta entonces, probad, una y mil veces, sin miedo y temor y nos vemos en la próxima. Good Apple Coding.

Acerca de Julio César Fernández

Analista, consultor y periodista tecnológico, desarrollador, empresario, productor audiovisual, actor de doblaje e ingeniero de vídeo y audio.

Otras recomendaciones

Swift 3.1

Swift 3.1 ha llegado, análisis de todos sus cambios

Swift 3.1 ha llegado de la mano de la hornada de actualizaciones lanzadas por Apple. Analizamos sus cambios más importantes e incorporaciones más destacadas. Nuevas formas de convertir closures que no escapan en los que sí lo hace, conversiones seguras de números, genéricos más eficientes... descubre en nuestros análisis con ejemplos concretos todos los cambios y descúbrelos por ti mismo.