Introducción a el ecosistema de react.js

1. La librería react.js y su ecosistema
React.js Joaquin Salvachua
joaquin.salvachua@upm.es

2. Un poco de historia
❖ “just the UI”. Ataca la V del MVC.
❖ Desarrollado en Facebook para solventar sus problemas
internos.
❖ Liberada y usada por multiples proyectos-Compañias-
StartUPs.
http://conf.reactjs.com/schedule.html

4. Usado actualmente en …
❖ No en experimentos, sino en despliegue
final.
❖ Facebook e Instagram.
❖ Yahoo mail.
❖ Netflix.
❖ Airbn.
❖ Khan Academy
❖ Flipboard
❖ Github Atom ide
❖ Taobao
❖ Muchisismos más ….

5. Enfoque “funcional”
❖ Si al construir el interfaz todo es aceptable :
❖ ¿Por que complicarlo al recibir modificaciones de
diversas partes de la página?
❖ Regenerarlo todo de cero.
❖ ¿No va entonces muy lento?
❖ (( Conceptualmente funcional))

6. DOM virtual
❖ Puede que realicemos más
cambios en el DOM.
❖ Para no penalizar la velocidad
se hacen en un DOM virtual.
❖ Una vez acabados todos los
cambios se comparan las
diferencias con el DOM actual.
❖ Se actualiza el DOM
❖ Sorprendentemente es rápido.

7. Aplicaciones isomorfas
❖ El mismo código puede
ejecutarse en el cliente y en
navegador.
❖ Podemos modificar el arbol
DOM (navegador) ó enviar
html como “string” con los
cambios.
❖ Flexibilidad y menor coste
computacional.

8. Encapsulación
❖ Los componentes no son
mutables. Son autocontenidos.
❖ El estado está solo en los datos.
❖ No tenemos cambio de estado
(se regeneran desde cero).
❖ Ventajas:
❖ Reutilizables.
❖ Componibles.
❖ Unit Testing
❖ Velocidad.
❖ Flipboard app utilizando el
canvas. (60 fps)
❖ Netflix modificando Gibbon.js
❖ Copiado por ember 2.0 y
angular 2.0.

9. JSX
❖ Puesto que es orientado a vistas tengo un lenguaje de
renderizado.
❖ JSX mezcla javascript y html (menos raro de lo que
parece).
❖ traducible a JavaScript Puro (online - offline).
❖ No altera la semantica de JavaScript.

10. http://jsfiddle.net/uctrnnbk/

11. Herramientas
❖ React Developer tools.
❖ Extensión de chrome para inspeccionar los
componentes de React durante la ejecución.

12. Gulp
❖ Sustituye a GRUNT
❖ Utiliza el concepto unix de
tuberias para hacer las
transformaciones de datos.
❖ Más limpio y eficiente que
GRUNT.

13. Browserify

14. React IDE : Nuclide
❖ Ongoing
❖ Basado en atom
❖ (escrito usando
❖ react.js).

15. https://github.com/mikechau/
react-primer-draft

16. Patrones de USO: FLUX

17. En este libro los ejemplos están en smaltalk y
C++
MVC
El patrón MVC se usa en multiples
niveles.
A veces se abusa de él.
Complica a veces cuando evolucionamos
y modificamos desde múltiples sitios.

18. FLUX Patrón de uso que sustituye el
MVC

19. FLUX Patrón de uso que sustituye el
MVC
https://facebook.github.io/flux/

20. Lo importante es el flujo unidireccional de los datos.
Flux y React Ya hay modificaciones
(ReFLUX y otras)

21. MVC
http://fluxxor.com/what-is-flux.html

22. Aplicaciones nativas o html5
React Native
Learn Once,
Written everywhere.
(no existe lenguaje universal)

23. Otras Mezclas
❖ React se une, naturalemente,
con Bootstrap.
❖ Puede unirse con, entre otros :
❖ Backbone.js
❖ Angular.js
❖ Meteor.js
❖ la más afín
conceptualmente.
https://github.com/reactjs/react-meteor

24. Ecosistema

25. ¿Preguntas?