Vistazo a React (la librería JavaScript para UI), la arquitectura Flux y React Native. Se cuentan los fundamentos del "One Direction Data Flow": Como pensar como React y Flux y una introducción a React Native: la versión de React que permite crear aplicaciones Android y iOS usando JavaScript

1. React (Native)
Una nueva filosofía para crear
aplicaciones web… y móviles MADRID · NOV 27-28 · 2015

2. Eduard
Tomàs
@eiximenis
http://geeks.ms/blogs/etomas
etomas@gmail.com
Desarrollador en plain concepts
http://plainconcepts.com
Cervecero aficionado
https://untappd.com/user/eiximenis

3. MADRID · NOV 27-28 · 2015
React
React es una librería para
el desarrollo de
aplicaciones web
desarrollada por facebook
y que está usando en
producción.

4. MADRID · NOV 27-28 · 2015
Librería – no Framework
React es una librería no un framework como Angular o
Ember
Se encarga solamente de gestionar la UI. No da
soporte a arquitectura, ni a la creación de SPAs

5. MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
Unobtrusive JavaScript ha fracasado:
mantener estrictamente separados
HTML y JS genera apps más
complejas y difíciles de mantener
Angular, Ember... Apuestan por
integrar JS dentro del HTML

6. MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
React con JSX apuesta por integrar el HTML dentro de
JavaScript
La UI en React es código JavaScript, no se usan
plantillas HTML, no existe DOM previo.

7. MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
En lugar de:
var HelloMessage = React.createClass({
displayName: "HelloMessage",
render: function render() {
return React.createElement("div", null, "Hello ",this.props.name);
}
});
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }),
mountNode);

8. MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
Podemos usar:
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

9. MADRID · NOV 27-28 · 2015
React - Componentes
React se basa en componentes. Un componente tiene
unas propiedades (immutables) y un estado (mutable).
Función render: Devuelve los componentes hijos de
dicho componente. No interacciona con el DOM.

10. MADRID · NOV 27-28 · 2015
React - Componentes
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
Render() no dibuja nada,
devuelve componentes hijos
createClass crea un tipo de
componente nuevo

11. MADRID · NOV 27-28 · 2015
Componentes - Propiedades
Los componentes tienen propiedades. Las propiedades
son immutables, se establecen al crear el componente
y una vez creado no pueden modificarse.

12. MADRID · NOV 27-28 · 2015
Componentes - Estado
Los componentes pueden tener estado. El estado es
mutable (puede ser modificado una vez se ha creado el
componente).
Los componentes deben ser lo más stateless posible.
Lo ideal es que no tengan estado, solo propiedades.

13. MADRID · NOV 27-28 · 2015
Data flow
Cuando cambia el estado de un componente, éste y
todos sus hijos son destruídos.
Se ejecuta de nuevo el método render que recreará el
árbol de componente.
Los cambios fluyen de arriba hacia abajo

14. MADRID · NOV 27-28 · 2015
¿Y eso... Es rápido?
JavaScript (ya) no es de per se excesivamente lento
En web, lo que es lento es acceder al DOM
Recrear un componente es simplemente ejecutar
código JavaScript. No hay acceso al DOM...
... Cierto, al final el DOM se actualiza. Pero...

15. MADRID · NOV 27-28 · 2015
Virtual DOM
Una vez ejecutado el render, React crea desde cero un
DOM virtual con el contenido de dicho componente. Eso
es código JS puro (rápido)
Luego compara este DOM virtual con el DOM real del
navegador y crea una lista mínima de cambios a
realizar para que el DOM real termine siendo igual al
virtual

16. MADRID · NOV 27-28 · 2015
Virtual DOM
Finalmente ejecuta esa lista de cambios actualizando
el DOM real.
Resultado: El DOM real es actualizado lo mínimo
posible. React es una librería rápida.

17. MADRID · NOV 27-28 · 2015
Flux
Flux es una arquitectura diseñada en base al concepto
de data flow
En flux los datos viajan siempre en una sola dirección

18. MADRID · NOV 27-28 · 2015
Stores
Contienen los datos (en cliente) de la aplicación. P. Ej. Si
la aplicación está mostrando una lista de cervezas, la
información de estas está en una store
Una store puede verse como una colección de N
modelos.
Una app puede tener una o varias stores, dependiendo
de como se organiza el código.

19. MADRID · NOV 27-28 · 2015
View
Vista que muestra sus datos (componente React)
Actualiza su información (en React, estado) cuando una
store le informa que ha habido cambios en los datos que
maneja
Las stores informan de esos cambios a las vistas a
través de eventos

20. MADRID · NOV 27-28 · 2015
Dispatcher
El dispatcher es un sistema de mensajería (similar a un
publish and subscribe). Suele ser único en toda una app
Las stores reciben notificaciones de cualquier tipo a
través de él.
Estas notificaciones son modeladas como acciones

21. MADRID · NOV 27-28 · 2015
Action
Una acción modela una notificación que debe llegar (a
través del dispatcher) a una o varias stores. Las acciones
contienen datos.
Las stores reciben las acciones y actúan en
consecuencia
Si una acción provoca que una store cambie sus datos,
ésta última lanzará un evento para informar a las vistas

22. MADRID · NOV 27-28 · 2015
Action creators
Todo el mundo, ya sea una vista, una store o un
componente externo puede lanzar una acción para
informar de lo que sea
El lanzamiento de acciones suele modelarse a través de
action creators

23. MADRID · NOV 27-28 · 2015
Action creator
Un action creator realiza cierta tarea (p. ej. Acceder a
una API REST externa) y luego usa el dispatcher para
publicar una acción.
Esa acción llega a la store lo que puede desencadenar
un cambio en sus datos, que hará que ésta lance un
evento
Dicho evento actualizará una o varias vistas

24. MADRID · NOV 27-28 · 2015
Relaciones de “conocimiento” en Flux
Las vistas conocen a las stores puesto que se suscriben
a sus eventos y llaman a métodos suyos. Las stores no
conocen a las vistas
Solo las que tienen estado necesitan conocer a las
stores (y recuerda: deberían ser las mínimas).
Las stores conocen al dispatcher puesto que se
suscriben a sus notificaciones. El dispatcher no conoce a
nadie.

25. MADRID · NOV 27-28 · 2015
Relaciones de “conocimiento” en Flux
Los action creators sólo conocen al dispatcher puesto
que publican acciones en él.
Todo el mundo puede conocer a los action creators que
suelen modelarse como una API tipo singleton, dado
que no necesitan tener estado alguno.

26. MADRID · NOV 27-28 · 2015
Ejemplo flujo
Una aplicación está mostrando una lista de cervezas.
El usuario pulsa el botón eliminar...
1. La vista (componente React) recoje el evento de
pulsación del botón
2. Llama a un action creator para que borre en el
servidor dicha cerveza

27. MADRID · NOV 27-28 · 2015
Ejemplo flujo (ii)
3. El action creator publica una acción de “voy a borrar”
4. Esa acción llega a la store de cervezas que marca la
cerveza como “pendiente de ser borrada”. Y lanza un
evento
5. El evento llega a la vista que actualiza la info de la
cerveza (poniéndola en un color distinto p.ej.)

28. MADRID · NOV 27-28 · 2015
Ejemplo flujo (iii)
6. El action creator lanza una peticion asíncrona a la API
REST para borrar la cerveza
7. Cuando recibe el resultado publica la acción de
“cerveza borrada”
8. La acción llega a la store de cervezas que elimina
dicha cerveza de sus datos locales y publica evento
9. El evento llega a la vista de cervezas que se actualiza

29. MADRID · NOV 27-28 · 2015
React y Flux
React encaja con Flux debido al hecho de que la propia
React gestiona las diferencias de estado de las vistas.
Cuando la store de cervezas lanza un evento de cambio
no necesita pasar ninguna info indicando qué
cerveza ha sido borrada.
En la vista tampoco se requiere código especial para
detectar que cerveza es y eliminarla...

30. MADRID · NOV 27-28 · 2015
React y Flux (ii)
En su lugar la store expone un método para obtener “la
lista de cervezas actual”.
Cuando la vista recibe el evento de cambio,
simplemente establece que su nuevo estado es “la
lista de cervezas actual” llamando a dicho método de
la store
React gestionará las diferencias entre el estado actual y
el nuevo de forma automática.

31. MADRID · NOV 27-28 · 2015
Más allá de la web
El DOM Virtual tiene una implicación vital: El core de
React es independiente del DOM.
Solo la parte que toca el DOM (React.DOM) depende del
DOM. JSX también es independiente del DOM
Sería posible crear una versión de React que en lugar
de generar el DOM... ¿Generase otra UI?

32. MADRID · NOV 27-28 · 2015
React Native

33. MADRID · NOV 27-28 · 2015
React Native
Permite usar React para generar aplicaciones nativas
para iOS y Android.
Son aplicaciones nativas pero con código JS.
La UI es nativa, pero el código es JS... Y tanto iOS como
Android no tienen JS como lenguaje nativo

34. MADRID · NOV 27-28 · 2015
Estado actual
Soporte para MacOSX es total
Windows y Linux funcionan aunque con algunas
fricciones
React iOS más madura que React Android

35. MADRID · NOV 27-28 · 2015
Componentes
React Native viene con componentes built-in que se
corresponden a distintas vistas nativas
https://facebook.github.io/react-native/docs/native-
components-android.html#content
https://facebook.github.io/react-native/docs/native-
components-ios.html#content

36. MADRID · NOV 27-28 · 2015
React native - JavaScriptCore
En emuladores o dispositivos ya sean iOS o Android,
React native usa JavaScriptCore para ejecutar el código
JS (JavaScriptCore es el motor de JS incluído en webkit).
Si se usa Chrome para depurar, React Native usa el
propio Chrome (V8) para ejecutar el código JS y usa
websockets para comunicarse con el código nativo

37. MADRID · NOV 27-28 · 2015
Ejemplo: Botón en Android
Componente TouchableNativeFeedback envuelve un
componente hijo y añade soporte para el click:
<TouchableNativeFeedback onPress={this._onPress}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={{width: 150, height: 100, backgroundColor: 'red'}}>
</View>
</TouchableNativeFeedback>

38. MADRID · NOV 27-28 · 2015
Ejemplo: ListView con n elementos (Android)
<ListView dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView} />
renderMovie: function(movie) {
return (
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
);
},
});

39. MADRID · NOV 27-28 · 2015
Navegación
Componente Navigator devuelve la escena
(componente React) a mostrar en función de id de ruta.
Métodos push/pop permiten navegar a otra escena
(añaden/quitan id de ruta en la pila de rutas)
Ejemplo: https://github.com/h87kg/NavigatorDemo
Alternativa: router tipo flux -
https://github.com/aksonov/react-native-router-flux

40. MADRID · NOV 27-28 · 2015
Módulos nativos
Es posible usar módulos nativos en React Native.
Es decir se puede llamar a código nativo realizado en
ObjC (iOS) o en Java (Android) para extender las
capacidades de React Native.

41. MADRID · NOV 27-28 · 2015
APIs nativas
React provee varias APIs ya hechas que interaccionan
con sistemas nativos ofreciendo acceso al carrete de la
cámara, alertas, almacenamiento persistente, toasts,
notificaciones push...
No hay built-in soporte para mostrar la cámara pero...
https://github.com/lwansbrough/react-native-camera

42. MADRID · NOV 27-28 · 2015
React native CSS
Implementación propia de parte del estándard CSS
Permite definir el estilo de la app en “idioma web”
var styles = StyleSheet.create({
button: {
backgroundColor: "#009DDD",
padding: 10,
margin: 10,
},
buttonText: {
color: "#fff"
}
});

43. MADRID · NOV 27-28 · 2015
React Native vs Cordova
Ambos permiten aprovechar conocimientos y técnicas
del desarrollo web al desarrollo móvil
React Native genera aplicaciones con UI nativas y que
se ejecutan “near full speed”
React Native requiere código de UI específico para
Android y iOS (dos proyectos).

44. MADRID · NOV 27-28 · 2015
Resumen
React: Libreria para crear Uis de aplicaciones web
basandose en la filosofía data flow
Flux: Arquitectura para aplicaciones basada en la
filosofía data flow
React native: Versión de react que en lugar de DOM
genera UI nativa para iOS o Android

45. MADRID · NOV 27-28 · 2015
¿Por donde continúo?
Mañana (sábado 28) en el Track D a las 17:30
Creando aplicaciones de iOS con React Native
@sammleach
https://facebook.github.io/react/
https://facebook.github.io/react-native/
https://github.com/facebook/react-native/tree/master/Examples
https://facebook.github.io/flux/

46. Gracias!!! :D
@eiximenis
http://geeks.ms/blogs/etomas
etomas@gmail.com
Desarrollador en plain
concepts
http://plainconcepts.com