¿Qué es React Native?

React Native es una de las tecnologías más de moda en este momento, y nadie puede negar que está revolucionando el desarrollo móvil. En este post vamos a resumir cuáles son sus características principales y sus ventajas sobre los competidores actuales.

Hasta hace bien poco, había dos enfoques muy diferentes para desarrollar apps y poder publicarlas en las tiendas oficiales:
Desarrollos en plataformas nativas (Android-Java, Ios-ObjectiveC/Swift)
Desarrollos en plataforma web incrustada dentro una webview, o Web App (Cordova, Ionic, …)

Cada enfoque tiene sus ventajas e inconvenientes, y dependiendo del proyecto, podría ser más beneficioso utilizar uno u otro.

Las apps nativas tienen un aspecto profesional y su rendimiento es considerable, pero es necesario conocer cada plataforma a fondo y son propensas a tener una infinidad de bugs (y sus inevitables retrasos en la entrega). 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.

«Al desarrollar una app en React Native, […] el código que escribimos es el mismo para las versiones de Android e IOS.Sólo nos tenemos que preocupar de la lógica de negocio y de maquetar una única vez.»

Daniel Almería, Desarrollador Sr en Cloud District.

 

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 (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).

Alguien podría preguntarse ¿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.
Los desarrolladores de Facebook están apostando muy fuerte estos últimos años por sus tecnologías ReactJS  y React Native . React funciona con Node y NPM, es decir, la base de la plataforma es puro JavaScript. Puedes aplicar tus conocimientos de JavaScript y React para crear una app de iOS y Android reutilizando el mismo código (LEARN ONCE, WRITE ANYWHERE ), manteniendo los componentes nativos para cada plataforma. Esto nos da la ventaja de tener a nuestro alcance todo el ecosistema JavaScript, que está en constante crecimiento y ahorra a los programadores mucho trabajo ya que podemos encontrar un paquete para casi cualquier funcionalidad que nos podamos imaginar .

React se adapta a la perfección al estándar actual de JavaScript ECMAScript 6, aunque es compatible con el ES5. Este nuevo estándar trae grandes novedades (template strings, importación de módulos, clases, arrow functions, etc.).

Al desarrollar una app en React Native, la mayor parte del código que escribimos (en muchas ocasiones todo) es el mismo para las versiones de Android e IOS. Sólo nos tenemos que preocupar de la lógica de negocio y de maquetar una única vez.

Otra de las maravillas que ofrece esta plataforma es el Hot Reload. Tradicionalmente en los desarrollos nativos hay que compilar una y otra vez para ver los cambios, por muy pequeños que sean. Esto hace el desarrollo nativo lento y tedioso (sobre todo al maquetar). Con React Native compilas una vez y a trabajar. Puedes ir viendo cómo afectan los cambios según los vas haciendo (LiveReload). Android Studio dispone de una herramienta similar, pero no termina de funcionar del todo bien.

Para depurar nuestro código tenemos a nuestra disposición un entorno de desarrollo muy completo: las herramientas React Developer Tools  y las Redux dev tools, que se integran a la perfección con la consola de desarrollo de Chrome.
El API de React Native nos ofrece acceso a un gran número de funcionalidades nativas, y en Facebook están trabajando muy duro para ampliar cada vez más este abanico de posibilidades, pero puede darse el caso de que necesites añadir código nativo a tu desarrollo que todavía no esté accesible (o incluir alguna librería de terceros por ejemplo). Puedes comunicar tu código javascript con código nativo mediante ‘envoltorios’, teniendo acceso total al hardware y a los APIs nativos.
Como hemos comentado, la principal ventaja que tiene React Native frente a sus competidores Web App es la experiencia de usuario nativa. Esta experiencia nativa se consigue principalmente utilizando componentes visuales nativos y mediante las animaciones. A continuación os dejo ejemplos de apps que hemos desarrollado con React Native y que utilizan el API de animaciones.

«React Native tiene un futuro muy prometedor, una excelente comunidad y sobre todo el respaldo de una gran compañía como Facebook.»

Daniel Almería, Desarrollador Sr en Cloud District.

La maquetación de nuestras vistas se añade mediante código JSX. Puede parecer que estamos mezclando HTML y Javascript (una muy mala práctica), pero realmente el código JSX se transforma en código Javascript. En tiempo de ejecución este código es a su vez transformado a vistas nativas que son indistinguibles de las que se crean en un desarrollo nativo (a diferencia de las Web App que son una web dentro de un componente webview). Para añadir estilos a nuestros componentes se utiliza una versión simplificada de css y Flexbox.


 React.createElement(
     View,
     null,
     React.createElement(
       Text,
       null,
       "Hola mundo!!!"
     )
 )
 


class DemoFlexbox extends Component {
    return(
    <View style={{flex:1}}>
    <View style={{flex:1, alignItems:'center', 
      justifyContent:'center', 
      backgroundColor:'yellow'}}>
          <Text>
              Cuadro 1
          </Text>
    </View>
 }

 

React es una librería que se encarga exclusivamente de mostrar las vistas en pantalla, dejando la lógica de negocio a un lado. Ahí es donde entra Redux. Redux es patrón de desarrollo que ayuda a escribir aplicaciones que se comportan de manera consistente, y por lo tanto son más fáciles de probar y mantener. Permite manejar el estado de la aplicación de forma predecible siguiendo el patrón de desarrollo Flux. Aunque no es una librería exclusiva de React, se integra a la perfección y ambas funcionan como un todo. Esta librería provee una gran experiencia de desarrollo, gracias sobre todo a la edición en vivo combinada con un depurador sobre una línea de tiempo (Redux DevTools ).

Los tests automatizados deberían formar parte de cualquier desarrollo, ya que además aportar múltiples beneficios, nos permiten dormir más tranquilos. En el caso de React se recomienda utilizar Jest . La integración es muy sencilla ya que viene pre configurado con React. Su ejecución es muy rápida (se puede configurar para que sólo se ejecuten los test asociados al código que ha cambiado) y tiene la posibilidad de añadir pruebas a la UI.

Por ejemplo, si tenemos una función que devuelve la suma de 2 números, su test asociado sería:

function sum(a, b) {
 return a + b;
 }
 test('adds 1 + 2 to equal 3', () => {
 expect(sum(1, 2)).toBe(3);
 });

 

En conclusión React native nos ofrece un entorno de programación avanzado, un desarrollo ágil y una experiencia de usuario nativa. Si vienes del mundo de la web, verás que es sencillo crear una app totalmente nativa y si vienes del mundo nativo, te sorprenderás de los últimos avances del desarrollo web: desarrollos rápidos multiplataforma, hot reloading, ES6 y reglas de estilo similares a CSS, etc. En cualquier caso, React Native tiene un futuro muy prometedor, una excelente comunidad y sobre todo el respaldo de una gran compañía como Facebook.

Daniel Almería es desarrollador senior del  Departamento de Mobile en Cloud District.


 

INFORMACIÓN IMPORTANTE SOBRE COOKIES

Este sitio web utiliza cookies propias y de analítica para mejorar tu experiencia. Algunas de estas cookies son imprescindibles para que el site funcione correctamente.
Puedes ver más información sobre las cookies en nuestra Política de privacidad.

Aceptar