Download - React, Flux y React native
React (Native)Una nueva filosofía para crear aplicaciones web… y móviles MADRID · NOV 27-28 · 2015
Eduard Tomàs@eiximenishttp://geeks.ms/blogs/[email protected] en plain conceptshttp://plainconcepts.com Cervecero aficionadohttps://untappd.com/user/eiximenis
MADRID · NOV 27-28 · 2015
ReactReact es una librería para el desarrollo de aplicaciones web desarrollada por facebook y que está usando en producción.
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
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
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.
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);
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);
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.
MADRID · NOV 27-28 · 2015
React - Componentesvar 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
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.
MADRID · NOV 27-28 · 2015
Componentes - EstadoLos 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.
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
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...
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
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.
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
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.
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
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
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
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
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
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.
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.
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
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.)
MADRID · NOV 27-28 · 2015
Ejemplo flujo (iii)6. El action creator lanza una peticion asíncrona a
la API REST para borrar la cerveza7. 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
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...
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.
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?
MADRID · NOV 27-28 · 2015
React Native
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
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
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
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
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>
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> ); },});
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
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.
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
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" }});
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).
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
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/Exampleshttps://facebook.github.io/flux/
Gracias!!! :D
@eiximenishttp://geeks.ms/blogs/[email protected] en plain conceptshttp://plainconcepts.com