La librería react.js y su ecosistema

React.js Joaquin Salvachuajoaquin.salvachua@upm.es

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

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

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

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.

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.

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.

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.

http://jsfiddle.net/uctrnnbk/

Herramientas❖ React Developer tools.

❖ Extensión de chrome para inspeccionar los componentes de React durante la ejecución.

Gulp

❖ Sustituye a GRUNT

❖ Utiliza el concepto unix de tuberias para hacer las transformaciones de datos.

❖ Más limpio y eficiente que GRUNT.

Browserify

React IDE : Nuclide

❖ Ongoing

❖ Basado en atom

❖ (escrito usando

❖ react.js).

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

Patrones de USO: FLUX

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.

FLUX Patrón de uso que sustituye el MVC

FLUX Patrón de uso que sustituye el MVC

https://facebook.github.io/flux/

Lo importante es el flujo unidireccional de los datos.

Flux y React Ya hay modificaciones (ReFLUX y otras)

MVC

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

Aplicaciones nativas o html5

React NativeLearn Once, Written everywhere.

(no existe lenguaje universal)

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

Ecosistema

¿Preguntas?