React Native, una tecnología a tener en cuenta.

29 de Junio de 2018 por Xavier Senmartí

React Native, una tecnología a tener en cuenta.

29 de Junio de 2018 por Xavier Senmartí

Hoy hablaremos de React Native, una tecnología web basada en javascript destinada al desarrollo de apps nativas.

Como ya sabes, actualmente, las dos principales vías de desarrollo de apps para iOS y Android son:

  • Desarrollo nativo (Swift, Objective-C, Java, Kotlin, …)
  • Desarrollo de web-apps o apps híbridas (Ionic 2, PhoneGap, …)

El desarrollo nativo se basa en programar de forma independiente cada una de las apps para su correspondiente plataforma. En el caso de Android, significa desarrollar una app desde cero mediante el lenguaje de programación estándar, es decir, Java o Kotlin. En el caso de los dispositivos que corren iOS, significa desarrollar las apps utilizando Swift o Objective-C. En ambos casos conseguimos el resultado más optimo posible acorde a cada plataforma y el rendimiento de estas suele ser superior para tareas complejas como geolocalización avanzada, librerías nativas, etc.

El desarrollo de apps híbridas simplifica el tiempo de desarrollo, pero limita las funcionalidades avanzadas. Una app híbrida, como su nombre indica, puede correr en cualquier dispositivo, ya sea iOS o Android, con una fuente de código común. El resultado final puede no seguir al 100% las normas visuales de cada plataforma y puede ver comprometido el rendimiento en ciertos aspectos. Por último, los entornos de desarrollo y depuración no suelen estar tan cuidados y no suelen tener soporte por parte de Google (Android) o Apple (iOS).

¿Qué es React Native?

 

React Native, logo in blue

 

React Native nace de la mano de Facebook con el objetivo de desarrollar apps nativas utilizando tecnología web, Javascript. Prometen un resultado de un rendimiento similar a una app nativa, así como un aspecto idéntico con las ventajas de las apps híbridas.

Hace falta decir que React Native no es para todos los proyectos, hay que analizar y conceptualizar todos los proyectos antes de lanzarnos a por una tecnología concreta, ya sea nativa o híbrida.

A continuación, os damos una introducción a React Native con la ejecución de un proyecto ‘hello world’. Veremos que cualquier desarrollador familiarizado con Javascript o NodeJS puede ejecutar de forma satisfactoria su primera app con React Native.

 

Instalaremos todo lo necesario en nuestra máquina

Para poder empezar a desarrollar con React Native debemos dejar nuestra máquina lista con un entorno de desarrollo correcto. Empezaremos instalando NodeJS y React Native. Una vez verifiquemos que la instalación ha sido correcta, seguiremos con la creación de un proyecto React Native. 

Ya está todo listo, ¡empecemos!

Abrimos nuestro proyecto con WebStorm.

Abriremos el proyecto con WebStorm (o nuestro IDE favorito). Veremos que el proyecto se ha creado con algunos archivos y parte de código. El fichero que nos importa es App.js, el punto de partida de nuestra app en React Native. Abrimos el archivo y eliminaremos todo lo que haya. 

Empezaremos añadiendo los componentes para utilizarlos más adelante en nuestra app (nada diferente a cómo lo haríamos en React).

Construyendo nuestra app

Seguimos añadiendo los componentes de nuestra app, en este caso añadimos un campo de texto no editable, así como un botón qué mostrará una alerta por pantalla.

Si ya conocemos la sintaxis de React, vemos que la estructura es prácticamente idéntica.

Modificando los estilos

Por último, configuramos los estilos de los elementos de nuestra app.

A estas alturas, nuestro archivo App.js debería ser idéntico al siguiente código.

Ejecutando nuestra app en React Native

Ahora ya tenemos nuestra aplicación lista para ser ejecutada. Una vez tengamos nuestro proyecto listo (o simplemente queramos probarlo en un simulador), deberemos ejecutar nuestra app en el simulador de iOS o el emulador de Android.

Compilar nuestra app para iOS

Para compilar nuestra app en el simulador de iOS, necesitaremos tener instalado Xcode y todos los paquetes asociados a éste. Puedes descargártelo aquí.

Una vez tengas todos los componentes de Xcode instalados, podrás ejecutar (desde el directorio del proyecto HolaMundo) el siguiente comando en el terminal.

Después de unos segundos se abrirá el simulador de iOS con tu app ya lista para ser probada.

También puedes abrir el proyecto de Xcode de forma habitual y ejecutar tu proyecto desde él.

Compilar nuestra app para Android Para visualizar nuestra app en el emulador de Android, deberemos instalar Android Studio. Configuraremos la ruta de la instalación del Android SDK en nuestro ordenador para que React Native sepa encontrar la ruta de Android.

Una vez terminemos con la configuración, simplemente ejecutaremos el siguiente comando.

Si te de algún error al intentar abrir el emulador, prueba de ejecutar el emulador desde Android Studio y después ejecuta el siguiente comando.

Veremos que el resultado son dos apps nativas con los componentes propios de cada una de las plataformas. ReactNative en iOS y Android@2x

 

Puedes descargar el proyecto completo de nuestra cuenta de GitHub.

Si necesitas diseñar una app llámanos al 93 408 90 30 o ponte en contacto con nosotros.

 

Dribba, the mobile agency. Agencia de desarrollo de tecnologías mobile en Barcelona y Zurich. Desarrollamos apps nativas iOS y Android, para multinacionales y startups de todo el mundo. Consulta nuestros servicios tanto en desarrollo, diseño como consultoría mobile y tecnológica.

Notícias relacionadas

Esqueumorfismo vs. Flat Design

Durante los últimos años se han utilizado diversos métodos de diseño para interfaces mobile, hoy repasamos dos de ellas, esqueumorfismo y flat.