Introducción al ecosistema de React.js
-
Upload
joaquin-salvachua -
Category
Software
-
view
221 -
download
0
Transcript of Introducción al ecosistema de React.js
![Page 2: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/2.jpg)
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
![Page 3: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/3.jpg)
![Page 4: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/4.jpg)
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 ….
![Page 5: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/5.jpg)
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))
![Page 6: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/6.jpg)
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.
![Page 7: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/7.jpg)
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.
![Page 8: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/8.jpg)
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.
![Page 9: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/9.jpg)
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.
![Page 11: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/11.jpg)
Herramientas❖ React Developer tools.
❖ Extensión de chrome para inspeccionar los componentes de React durante la ejecución.
![Page 12: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/12.jpg)
Gulp
❖ Sustituye a GRUNT
❖ Utiliza el concepto unix de tuberias para hacer las transformaciones de datos.
❖ Más limpio y eficiente que GRUNT.
![Page 13: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/13.jpg)
Browserify
![Page 14: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/14.jpg)
React IDE : Nuclide
❖ Ongoing
❖ Basado en atom
❖ (escrito usando
❖ react.js).
![Page 16: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/16.jpg)
Patrones de USO: FLUX
![Page 17: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/17.jpg)
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.
![Page 18: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/18.jpg)
FLUX Patrón de uso que sustituye el MVC
![Page 19: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/19.jpg)
FLUX Patrón de uso que sustituye el MVC
https://facebook.github.io/flux/
![Page 20: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/20.jpg)
Lo importante es el flujo unidireccional de los datos.
Flux y React Ya hay modificaciones (ReFLUX y otras)
![Page 21: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/21.jpg)
MVC
http://fluxxor.com/what-is-flux.html
![Page 22: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/22.jpg)
Aplicaciones nativas o html5
React NativeLearn Once, Written everywhere.
(no existe lenguaje universal)
![Page 23: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/23.jpg)
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
![Page 24: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/24.jpg)
Ecosistema
![Page 25: Introducción al ecosistema de React.js](https://reader034.fdocuments.mx/reader034/viewer/2022051414/55b478b5bb61ebf56e8b4831/html5/thumbnails/25.jpg)
¿Preguntas?