Esta semana Facebook publicó la versión para Android de React Native, luego de crear la primera app con esta tecnología. La app en cuestión se llama Ads Manager y fue también la primera app creada para iOS, ambas versiones destacan por tener gran performance a diferencia de apps creadas con PhoneGap o Ionic que también utilizan tecnología web. De acuerdo a Facebook, se demoraron 6 meses en crear la versión de iOS y 3 meses la versión para Android. ¿Cómo fue que posible crear una aplicación multi-plataforma con ese performance y en tan poco tiempo? Vayamos de a poco explicando esta tecnología.

¿Qué es React?

A falta de una mejor analogía, muchas veces React es explicado como la vista (V) de un framework Web MVC y según Facebook resuelve un gran problema: crear aplicaciones de gran tamaño con Data que cambia durante el tiempo. La gran diferencia de React versus tecnologías similares es que mezcla HTML directamente con javascript, desafiando años de «buenas prácticas». Veamos el siguiente ejemplo:

var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hola ' + this.props.name}</div>;
  }
});
React.renderComponent(<HelloMessage name="Juan"></HelloNessage>, mountNode);

Genera los siguiente:

<div>Hola Juan</div>

Como se puede ver se creó un nuevo componente llamado «HelloMessage», lo interesante es que se puede componer con otros componentes, ya sean nativos de HTML o propios. De esta manera puedo crear el siguiente componente.

var Greeting = React.createClass({
  render: function() {
    return <div>
             <Avatar src={this.props.avatar_src} />
             <HelloMessage name={this.props.name} />
             <LastLogin last={this.props.last_login} />
           </div>;
  }
});

Como se puede apreciar creamos un nuevo componente de una manera declarativa, es muy fácil de leer y entender lo que se quiere lograr.

¿Por qué tiene gran performance?

React no modifica directamente el DOM, que es bastante lento, sino que cambia un DOM virtual luego revisa las diferencias con el DOM original y sólo publica las diferencias. Las personas que manejan Git pueden ver la analogía, solo se publican las diferencias y de ahí su gran velocidad.

¿Cómo evito que el código de mi aplicación se convierta en un spaghetti?

Los componentes son objetos de javascript y están diseñados para manejar lógica, de hecho se puede crear todo una aplicación compleja, incluyendo llamados al servidor, solo con componentes de React. Pero cómo pueden imaginar esto no es recomendado, para esto Facebook sugirió utilizar la arquitectura Flux, está arquitectura da para más de un post, pero a modo de resumen separa la aplicación en Actions -> Dispatcher -> Stores -> Views. Puse las flechas de manera intencional dado que la información solo tiene una dirección (es un flujo) y los componentes de React corresponden a las vistas.

¿Pero qué es React Native?

Al poco tiempo en Facebook se dieron cuenta de que el concepto de React se puede aplicar afuera de HTML. Es decir manejar componentes de manera declarativa y tener un modelo virtual publicando solo las diferencias, es algo que se puede que se puede abstraer a cualquier plataforma. Lo importante es crear ese modelo de manera nativa a la plataforma, de ahí viene el nombre React Native. Lo anterior implica que las aplicaciones creadas con esta tecnología no están en HTML, éstas son 100% nativas, a diferencia de aplicaciones de PhoneGap o Ionic. El costo de esto es que el código no es 100% compatible entre cada plataforma, sin embargo, existe gran re-utilización de código, puedes ver más sobre este en este post.

Aprende una vez y programa en cualquier plataforma

React es una nueva tecnología web, es decir javascript + html +css, hay que aprender un nuevo «framework» pero con los mismos lenguajes de siempre para un desarrollador web. Sin embargo, alguien que maneja el stack React/Flux está a un solo paso de convertirse en desarrollador mobile. Si otra vez por si no te quedó claro: alguien que maneja el stack React/Flux está a un solo paso de convertirse en desarrollador mobile. Las implicancias son enormes, ahora el mismo desarrollador (o grupo de desarrolladores) que implementó la versión web puede agarrar el código, modificar las vistas y crear la versión iOS, luego modificarlas nuevamente y crear la versión de Android. Todo esto con la misma tecnología y con el mismo conocimiento del negocio, ese fue el secreto para poder crear una app en solo 3 meses con los standards de Facebook.      

¿Cómo empiezo?

 Nuestra sugerencia es que empieces aprendiendo React en la versión web, existen varios tutoriales al respecto. Pero si quieres aprender de un profesor y acelerar la curva de aprendizaje hemos creado un curso especial para desarrolladores frontend. Puedes reservar tu cupo aqui!