React.JS & Flux

Presentación de React JS & Flux, para la Montevideo JS Meetup del 2014-12-04.

Transcript

1. ReactJS
2. Qué es React.JS?
3. A 1.000m • Una library desarrollada por Facebook. • Solo resuelve la parte de Vista de un MVC • Se puede integrar en otros frameworks • Propone dos ideas polémicas: 1. Markup dentro de JavaScript 2. No se dice qué hay que modificar cuando cambia el estado, simplemente se reconstruye la vista desde cero (like it was 1995!).
4. Markup dentro de JS JSX Javascript
5. Sin bindings render(): Se invoca cada vez que cambia el estado (o se renderiza por primer vez). this.props: Propiedades pasadas al crear el elemento ➝ inmutable. this.state: Estado del elemento ➝ mutable. Se invalida al llamar a this.setState.
6. Conclusión: un delirio? Pero: • La separación de responsabilidades es una decisión de diseño. ◦ Nada impide usar MVC (o Flux) con React. • Performance de operaciones en JavaScript >> operaciones sobre el DOM
7. Virtual DOM
8. Virtual DOM • El DOM virtual se reconstruye en cada actualización. • Calcula el número mínimo de cambios sobre el DOM real. • Los cambios se hacen en batch, evitando ciclos de relayout. “¡La abstracción atenta contra la performance!” Alquien que nunca uso un compilador.
9. Virtual DOM - Otras ventajas • Renderizar server side con node • Tests sin necesidad de un browser • Worker threads
10. Otras implementaciones • virtual-dom: https://github.com/Matt-Esch/virtual-dom ◦ MVC sobre virtual-dom ▪ mercury ▪ mithril ▪ De acuerdo a sus benchmarks, más rápidos que react. • React es el único con algo como JSX
11. Benchmarks publicados • Bastante favorables a React ◦ http://bit.ly/1jOXXpO • Algunos ridículamente ◦ x840 ;) http://bit.ly/1906Cnm (usando Om) • HTMLBars & mithril/mercury (ambos sobre virtual-dom), le dan pelea. • Las optimizaciones siempre se atacan por el mismo lado: componentShouldUpdate.
12. Flux “We noticed MVC does not scale well.” Tom Occhino, Engineering Manager, Facebook. https://www.youtube.com/watch?v=nYkdrAPrdcw MVC según Facebook: (YMMV) “¡Este código es inmantenible! ¡Hay que reescribirlo!” Cualquier programador con autocrítica
13. Objetivos de Flux • Flujos de datos unidireccional. ◦ “Mas predecible” • Una única acción a la vez. Sin efectos en cascada. • El estado cerca de la lógica que actualiza ese estado.
14. Flux... MVC Segun Wikipedia: ¿Cuál es?
15. Facebook chat message count “There’s no structure to the code” “The intention is not clear.” Jing Chen, Facebook.
16. Flujo de datos unidireccional Action Store View • La acción debe completarse antes de lanzar otra acción. ◦ Más fácil de debuggear y de comprender el flujo del programa. • Las stores son de solo lectura, la acción no modifica el store directamente.
17. Chat message count New message Messages Chat Tab View Message Threads Unseen Threads Message View Unseen Counter Mark Seen Mark Seen https://www.youtube.com/watch?v=nYkdrAPrdcw
18. Diagrama completo
19. + ReactJS • Consistencia de datos ◦ Las vistas se renderizan de cero, es simple mantener consistencia con el estado de los Stores. • Las vistas son independientes, no hay comunicación entre ellas.
20. Store Actions View Ejemplo
21. Múltiples Implementaciones • Flux • Fluxxor • Refluxjs • Fluxy
22. Ventajas de React y Flux • SPAs que pueden ser renderizadas en el server (aka apps isomórficas) ◦ Escribir codigo node-friendly, bundlear. ◦ SPA: no solo por experiencia de usuario. • Son conceptualmente muy simples ◦ La única magia es el algoritmo de diferencias, (leakea muy ligeramente, hasta ahora). • Cross-browser DOM + events manejados por React.
23. Desventajas • JSX: tooling • Virtual DOM: olvidarse de packs de controles, hay que re-escribirlos (ej. react- bootstrap). • Flux: Verbose, capaz demasiado desacoplado. • Poco ortodoxo / muy nuevo?
24. Recursos: https://github.com/enaqx/awesome-react