React (Native)
Una nueva filosofía para crear
aplicaciones web… y móviles MADRID · NOV 27-28 · 2015
Eduard
Tomàs
@eiximenis
http://geeks.ms/blogs/etomas
etomas@gmail.com
Desarrollador en plain concepts
http://plainconcepts...
MADRID · NOV 27-28 · 2015
React
React es una librería para
el desarrollo de
aplicaciones web
desarrollada por facebook
y q...
MADRID · NOV 27-28 · 2015
Librería – no Framework
React es una librería no un framework como Angular o
Ember
Se encarga so...
MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
Unobtrusive JavaScript ha fracasado:
mantener estrictamente sepa...
MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
React con JSX apuesta por integrar el HTML dentro de
JavaScript
...
MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
En lugar de:
var HelloMessage = React.createClass({
displayName:...
MADRID · NOV 27-28 · 2015
JSX – La otra cara de la moneda
Podemos usar:
var HelloMessage = React.createClass({
render: fun...
MADRID · NOV 27-28 · 2015
React - Componentes
React se basa en componentes. Un componente tiene
unas propiedades (immutabl...
MADRID · NOV 27-28 · 2015
React - Componentes
var HelloMessage = React.createClass({
render: function() {
return <div>Hell...
MADRID · NOV 27-28 · 2015
Componentes - Propiedades
Los componentes tienen propiedades. Las propiedades
son immutables, se...
MADRID · NOV 27-28 · 2015
Componentes - Estado
Los componentes pueden tener estado. El estado es
mutable (puede ser modifi...
MADRID · NOV 27-28 · 2015
Data flow
Cuando cambia el estado de un componente, éste y
todos sus hijos son destruídos.
Se ej...
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...
MADRID · NOV 27-28 · 2015
Virtual DOM
Una vez ejecutado el render, React crea desde cero un
DOM virtual con el contenido d...
MADRID · NOV 27-28 · 2015
Virtual DOM
Finalmente ejecuta esa lista de cambios actualizando
el DOM real.
Resultado: El DOM ...
MADRID · NOV 27-28 · 2015
Flux
Flux es una arquitectura diseñada en base al concepto
de data flow
En flux los datos viajan...
MADRID · NOV 27-28 · 2015
Stores
Contienen los datos (en cliente) de la aplicación. P. Ej. Si
la aplicación está mostrando...
MADRID · NOV 27-28 · 2015
View
Vista que muestra sus datos (componente React)
Actualiza su información (en React, estado) ...
MADRID · NOV 27-28 · 2015
Dispatcher
El dispatcher es un sistema de mensajería (similar a un
publish and subscribe). Suele...
MADRID · NOV 27-28 · 2015
Action
Una acción modela una notificación que debe llegar (a
través del dispatcher) a una o vari...
MADRID · NOV 27-28 · 2015
Action creators
Todo el mundo, ya sea una vista, una store o un
componente externo puede lanzar ...
MADRID · NOV 27-28 · 2015
Action creator
Un action creator realiza cierta tarea (p. ej. Acceder a
una API REST externa) y ...
MADRID · NOV 27-28 · 2015
Relaciones de “conocimiento” en Flux
Las vistas conocen a las stores puesto que se suscriben
a s...
MADRID · NOV 27-28 · 2015
Relaciones de “conocimiento” en Flux
Los action creators sólo conocen al dispatcher puesto
que p...
MADRID · NOV 27-28 · 2015
Ejemplo flujo
Una aplicación está mostrando una lista de cervezas.
El usuario pulsa el botón eli...
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...
MADRID · NOV 27-28 · 2015
Ejemplo flujo (iii)
6. El action creator lanza una peticion asíncrona a la API
REST para borrar ...
MADRID · NOV 27-28 · 2015
React y Flux
React encaja con Flux debido al hecho de que la propia
React gestiona las diferenci...
MADRID · NOV 27-28 · 2015
React y Flux (ii)
En su lugar la store expone un método para obtener “la
lista de cervezas actua...
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...
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 aplica...
MADRID · NOV 27-28 · 2015
Estado actual
Soporte para MacOSX es total
Windows y Linux funcionan aunque con algunas
friccion...
MADRID · NOV 27-28 · 2015
Componentes
React Native viene con componentes built-in que se
corresponden a distintas vistas n...
MADRID · NOV 27-28 · 2015
React native - JavaScriptCore
En emuladores o dispositivos ya sean iOS o Android,
React native u...
MADRID · NOV 27-28 · 2015
Ejemplo: Botón en Android
Componente TouchableNativeFeedback envuelve un
componente hijo y añade...
MADRID · NOV 27-28 · 2015
Ejemplo: ListView con n elementos (Android)
<ListView dataSource={this.state.dataSource}
renderR...
MADRID · NOV 27-28 · 2015
Navegación
Componente Navigator devuelve la escena
(componente React) a mostrar en función de id...
MADRID · NOV 27-28 · 2015
Módulos nativos
Es posible usar módulos nativos en React Native.
Es decir se puede llamar a códi...
MADRID · NOV 27-28 · 2015
APIs nativas
React provee varias APIs ya hechas que interaccionan
con sistemas nativos ofreciend...
MADRID · NOV 27-28 · 2015
React native CSS
Implementación propia de parte del estándard CSS
Permite definir el estilo de l...
MADRID · NOV 27-28 · 2015
React Native vs Cordova
Ambos permiten aprovechar conocimientos y técnicas
del desarrollo web al...
MADRID · NOV 27-28 · 2015
Resumen
React: Libreria para crear Uis de aplicaciones web
basandose en la filosofía data flow
F...
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 co...
Gracias!!! :D
@eiximenis
http://geeks.ms/blogs/etomas
etomas@gmail.com
Desarrollador en plain
concepts
http://plainconcept...
Próxima SlideShare
Cargando en…5
×

React, Flux y React native

1.671 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
4 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.671
En SlideShare
0
De insertados
0
Número de insertados
60
Acciones
Compartido
0
Descargas
60
Comentarios
0
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

React, Flux y React native

  1. 1. React (Native) Una nueva filosofía para crear aplicaciones web… y móviles MADRID · NOV 27-28 · 2015
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. MADRID · NOV 27-28 · 2015 React Native
  33. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 46. Gracias!!! :D @eiximenis http://geeks.ms/blogs/etomas etomas@gmail.com Desarrollador en plain concepts http://plainconcepts.com

×