Hi Fiber!

Vamos a conocer que es lo que se viene en la próxima version de React. Qué es Fiber? Qué problemas son los que tiene hoy React, y cómo Fiber los intenta solucionar? Qué nuevas features permite? Cuándo va a estar disponible?

Transcript

1. ✋Hi Five Fiber! Lo que viene en React
2. Leonardo Garcia Crespo (Lenny) slack.meetupjs.com.ar leogcrespo leoasis
3. React hoy
4. Re-renderizar toda la app
5. class Message extends Component { render() { return <p>Hello {this.props.who}</p>; } } ReactDOM.render(<Message who="World" />, mountNode); ReactDOM.render(<Message who="Planet" />, mountNode);
6. React decide cómo re-renderizar
7. class Increment extends Component { state = { value: 0 }; handleIncrement() { this.setState({ value: this.state.value + 1 }); } render() { return ( <div> {this.state.value} <button onClick={this.handleIncrement.bind(this)}> +1 </button> </div> ); } }
8. React decide cuándo re-renderizar
9. Pero renderiza todo sincrónicamente
10. Problema para árboles de componentes grandes
11. Posibles optimizaciones
12. Priorizar actualizaciones
13. Qué actualización es más importante? • Llegada de datos por AJAX • Animaciones • Dispatch de Redux • Eventos causados por el usuario
14. Qué actualización es más importante? • Llegada de datos por AJAX • Animaciones • Dispatch de Redux • Eventos causados por el usuario
15. Ejecutar cuando sea más conveniente
16. • requestAnimationFrame • requestIdleCallback
17. Ejecutar en partes (chunks)
18. • Pausar actualización si hay otra más importante • Reanudar actualizaciones pausadas • Abortar actualizaciones que ya no tienen sentido • Reusar trabajo parcial anterior de otras actualizaciones
19. Fiber Aprovechando el modelo de React al mango
20. Qué es Fiber? O, cómo parte el trabajo React?
21. function work(arg1, arg2) { let i = 0; while (i < 1000) i++; //Hacemos algo // ... const fooRes = foo(arg1); const barRes = bar(arg2); return baz(fooRes, barRes); }
22. function Work(props) { let i = 0; while (i < 1000) i++; //Hacemos algo // ... const fooRes = <Foo arg1={props.arg1} />; const barRes = <Bar arg2={props.arg2} />; return <Baz>{fooRes}{barRes}</Baz>; }
23. function Work(props) { let i = 0; while (i < 1000) i++; //Hacemos algo // ... const fooRes = React.createElement(Foo, { arg1: props.arg1 }); const barRes = React.createElement(Bar, { arg2: props.arg2 }); return React.createElement(Baz, null, fooRes, barRes); }
24. Y si pudiéramos reimplementar el call stack?
25. Fiber, “virtual stack frame”
26. Stack frame Fiber (virtual stack frame) Función Componente Sub funciones children Dirección de retorno Componente Padre Parámetros props Valor de retorno Cambios en el DOM
27. • Unidad de concurrencia • “Virtual call stack” especializado para UIs • No interactuamos con Fibers a nivel API en React (detalle de implementacion)
28. React mañana
29. Mejor performance con scheduling y concurrencia
30. Misma API*
31. Cambios semánticos en el ciclo de vida
32. • componentWillMount, componentWillUpdate, componentWillReceiveProps NO deben tener side effects. • componentWillReceiveProps puede tener setState, pero solo sobre la misma instancia • componentDidMount, componentDidUpdate y componentWillUnmount son los UNICOS que permiten side effects
33. Nueva API para especificar prioridades (TBD)
34. Demo: Sierpinksy Triangle
35. Nuevos features
36. Render de strings y numbers
37. function Strings(props) { return `Hello, ${props.world}`; } class Double extends Component { render() { return this.props.number * 2; } }
38. Render de arrays
39. function Items() { return [ <li>Item 1</li>, <li>Item 2</li>, <li>Item 3</li>, ] }
40. Portals
41. class CreateThing extends Component { state = { showConfirmation: false }; render() { return ( <button onClick={() => this.setState({ showConfirmation: true }) }> Create Thing </button> <Modal isOpen={this.state.showConfirmation} title="Create Thing" content="Are you sure?" /> ) } }
42. const node = document.getElementById('modal'); function ModalContent(props) { return ( <div> <h1>{props.title}</h1> <p>{props.content}</p> </div> ); } function Modal(props) { return ReactDOM.unstable_createPortal( props.isOpen && ( <ModalContent title={props.title} content={props.content} /> ), node ); }
43. Error boundaries
44. try catch para componentes
45. try { renderChildren(); } catch(e) { handleError(e); renderChildren(); }
46. Demo
47. Co-routines
48. Intercomunicación entre padre e hijo
49. Demo de Co-routines
50. Cuándo?
51. Primero como reemplazo de implementación, sincrónico, manteniendo feature parity
52. Luego con modo “incremental” (Scheduling y concurrencia)
53. Links • React Design Principles • Fiber Principles: Contributing To Fiber • React Fiber Architecture • Andrew Clark: What's Next for React — ReactNext 2016
54. React pasado mañana
63. Nuevo lenguaje?
64. https://facebook.github.io/reason/ ReasonML?
65. Gracias.