Embed Size (px)
Citation preview
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
❖ 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.
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).
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?
