Hi Fiber!
-
Upload
leonardo-garcia-crespo -
Category
Software
-
view
126 -
download
0
Transcript of Hi Fiber!
![Page 1: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/1.jpg)
✋Hi Five Fiber!Lo que viene en React
![Page 2: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/2.jpg)
Leonardo Garcia Crespo
(Lenny)
slack.meetupjs.com.ar
leogcrespo
leoasis
![Page 3: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/3.jpg)
React hoy
![Page 4: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/4.jpg)
Re-renderizar toda la app
![Page 5: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/5.jpg)
class Message extends Component { render() { return <p>Hello {this.props.who}</p>; } }
ReactDOM.render(<Message who="World" />, mountNode); ReactDOM.render(<Message who="Planet" />, mountNode);
![Page 6: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/6.jpg)
React decide cómo re-renderizar
![Page 7: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/7.jpg)
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> ); } }
![Page 8: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/8.jpg)
React decide cuándo re-renderizar
![Page 9: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/9.jpg)
Pero renderiza todo sincrónicamente
![Page 10: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/10.jpg)
Problema para árboles de componentes grandes
![Page 11: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/11.jpg)
Posibles optimizaciones
![Page 12: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/12.jpg)
Priorizar actualizaciones
![Page 13: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/13.jpg)
Qué actualización es más importante?
• Llegada de datos por AJAX
• Animaciones
• Dispatch de Redux
• Eventos causados por el usuario
![Page 14: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/14.jpg)
Qué actualización es más importante?
• Llegada de datos por AJAX
• Animaciones
• Dispatch de Redux
• Eventos causados por el usuario
![Page 15: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/15.jpg)
Ejecutar cuando sea más conveniente
![Page 16: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/16.jpg)
• requestAnimationFrame
• requestIdleCallback
![Page 17: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/17.jpg)
Ejecutar en partes (chunks)
![Page 18: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/18.jpg)
• 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
![Page 19: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/19.jpg)
FiberAprovechando el modelo de React al mango
![Page 20: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/20.jpg)
Qué es Fiber?O, cómo parte el trabajo React?
![Page 21: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/21.jpg)
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); }
![Page 22: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/22.jpg)
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>; }
![Page 23: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/23.jpg)
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); }
![Page 24: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/24.jpg)
Y si pudiéramos reimplementar el call stack?
![Page 25: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/25.jpg)
Fiber, “virtual stack frame”
![Page 26: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/26.jpg)
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
![Page 27: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/27.jpg)
• Unidad de concurrencia
• “Virtual call stack” especializado para UIs
• No interactuamos con Fibers a nivel API en React (detalle de implementacion)
![Page 28: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/28.jpg)
React mañana
![Page 29: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/29.jpg)
Mejor performance con scheduling y concurrencia
![Page 30: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/30.jpg)
Misma API*
![Page 31: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/31.jpg)
Cambios semánticos en el ciclo de vida
![Page 32: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/32.jpg)
• 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
![Page 33: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/33.jpg)
Nueva API para especificar prioridades (TBD)
![Page 34: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/34.jpg)
Demo: Sierpinksy Triangle
![Page 35: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/35.jpg)
Nuevos features
![Page 36: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/36.jpg)
Render de strings y numbers
![Page 37: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/37.jpg)
function Strings(props) { return `Hello, ${props.world}`; }
class Double extends Component { render() { return this.props.number * 2; } }
![Page 38: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/38.jpg)
Render de arrays
![Page 39: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/39.jpg)
function Items() { return [ <li>Item 1</li>, <li>Item 2</li>, <li>Item 3</li>, ] }
![Page 40: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/40.jpg)
Portals
![Page 41: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/41.jpg)
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?" /> ) } }
![Page 42: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/42.jpg)
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 ); }
![Page 43: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/43.jpg)
Error boundaries
![Page 44: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/44.jpg)
try catch para componentes
![Page 45: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/45.jpg)
try { renderChildren(); } catch(e) { handleError(e); renderChildren(); }
![Page 46: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/46.jpg)
Demo
![Page 47: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/47.jpg)
Co-routines
![Page 48: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/48.jpg)
Intercomunicación entre padre e hijo
![Page 49: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/49.jpg)
Demo de Co-routines
![Page 50: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/50.jpg)
Cuándo?
![Page 51: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/51.jpg)
Primero como reemplazo de implementación, sincrónico, manteniendo feature parity
![Page 52: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/52.jpg)
Luego con modo “incremental” (Scheduling y concurrencia)
![Page 53: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/53.jpg)
Links
• React Design Principles
• Fiber Principles: Contributing To Fiber
• React Fiber Architecture
• Andrew Clark: What's Next for React — ReactNext 2016
![Page 54: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/54.jpg)
React pasado mañana
![Page 55: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/55.jpg)
![Page 56: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/56.jpg)
![Page 57: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/57.jpg)
![Page 58: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/58.jpg)
![Page 59: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/59.jpg)
![Page 60: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/60.jpg)
![Page 61: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/61.jpg)
![Page 62: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/62.jpg)
![Page 63: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/63.jpg)
Nuevo lenguaje?
![Page 64: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/64.jpg)
https://facebook.github.io/reason/
ReasonML?
![Page 65: Hi Fiber!](https://reader031.fdocuments.pl/reader031/viewer/2022030311/58ee92c31a28ab7b228b4589/html5/thumbnails/65.jpg)
Gracias.