React, Flux y React native

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

Transcript of React, Flux y React native

Page 1: React, Flux y React native

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

Page 2: React, Flux y React native

Eduard Tomàs@eiximenishttp://geeks.ms/blogs/[email protected] en plain conceptshttp://plainconcepts.com Cervecero aficionadohttps://untappd.com/user/eiximenis

Page 3: React, Flux y React native

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.

Page 4: React, Flux y React native

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

Page 5: React, Flux y React native

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

Page 6: React, Flux y React native

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.

Page 7: React, Flux y React native

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);

Page 8: React, Flux y React native

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);

Page 9: React, Flux y React native

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.

Page 10: React, Flux y React native

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

Page 11: React, Flux y React native

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.

Page 12: React, Flux y React native

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.

Page 13: React, Flux y React native

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

Page 14: React, Flux y React native

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

Page 15: React, Flux y React native

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

Page 16: React, Flux y React native

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.

Page 17: React, Flux y React native

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

Page 18: React, Flux y React native

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.

Page 19: React, Flux y React native

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

Page 20: React, Flux y React native

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

Page 21: React, Flux y React native

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

Page 22: React, Flux y React native

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

Page 23: React, Flux y React native

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

Page 24: React, Flux y React native

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.

Page 25: React, Flux y React native

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.

Page 26: React, Flux y React native

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

Page 27: React, Flux y React native

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

Page 28: React, Flux y React native

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

Page 29: React, Flux y React native

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

Page 30: React, Flux y React native

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.

Page 31: React, Flux y React native

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?

Page 32: React, Flux y React native

MADRID · NOV 27-28 · 2015

React Native

Page 33: React, Flux y 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

Page 34: React, Flux y React native

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

Page 36: React, Flux y React native

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

Page 37: React, Flux y React native

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>

Page 38: React, Flux y React native

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> ); },});

Page 39: React, Flux y React native

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

Page 40: React, Flux y React native

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.

Page 41: React, Flux y 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

Page 42: React, Flux y React native

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" }});

Page 43: React, Flux y React native

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

Page 44: React, Flux y React native

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

Page 45: React, Flux y React native

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/

Page 46: React, Flux y React native

Gracias!!! :D

@eiximenishttp://geeks.ms/blogs/[email protected] en plain conceptshttp://plainconcepts.com