What the hell is Fiber and why should I care

What the hell is Fiber and why should I care

React Fiber is an ongoing reimplementation of React's core algorithm. For more join the talk :)
Until then isfiberreadyyet.com.

7f9479e57752da1ec55f9e59b7434791?s=128

tosFa

May 11, 2017
Tweet

Transcript

  1. WHAT THE HELL IS FIBER AND WHY SHOULD I CARE?

    Fatos Hoti / @hotifatos
  2. WHO AM I ➤ Fatos Hoti ➤ Pula, Croatia ➤

    Berlin, Germany ➤ SW Engineer@Klara GmbH
  3. None
  4. WHAT THE HELL IS FIBER AND WHY SHOULD I CARE?

  5. REACT V.16

  6. NEW REACT RECONCILIATION ALGORITHM

  7. A NEW VERSION OF REACT WHERE INTERNALLY EVERYTHING CHANGES, BUT

    THE API STILL REMAINS THE SAME
  8. { stateNode, child, return, sibling, …rest }

  9. WHAT THE HELL IS FIBER AND WHY SHOULD I CARE?

  10. HOW DOES CURRENT RECONCILIATION WORK?

  11. LET'S TAKE A STEP BACK ➤ No need to explain

    how to get from A to B, just tell me what is B ➤ “Virtual DOM” && “Diffing" ➤ v.14 -> react && react-dom ➤ react-native, react-vr, react-aframe, react-hardware… ➤ reconciler && renderer
  12. None
  13. None
  14. HostRoot List 1 2 3 Button Wrapper HostRoot div div

    div div button div
  15. None
  16. None
  17. Fiber splits work into units of work (tree/subtree chunks) computes

    the changes and schedules their execution
  18. requestIdleCallback do the work when you have time requestAnimationFrame do

    the work before the next frame
  19. phase1 - renderer/reconciler interruptable phase2 - commit non-interruptable

  20. None
  21. HostRoot List 1 2 3 Button child return sibling Initial

    render div div div
  22. { stateNode, child, return, sibling, …rest }

  23. WORK LOOP next unit of work time remaining

  24. None
  25. Next unit of work - List Time remaining > 0

    HostRoot List 1 Button 2 3 HostRoot Current Work in Progress div div div
  26. List has an update queue Time Remaining > 0 HostRoot

    List 1 Button 2 3 HostRoot Current Work in Progress List div div div
  27. this.setState((state, props) => {}); render();

  28. HostRoot List 1 Button 2 3 HostRoot 1 2 3

    Current Work in Progress List Next unit of work - 1 Time remaining > 0 div div div div div div
  29. Next unit of work - div Time remaining > 0

    HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
  30. Next unit of work - 2 Time remaining > 0

    HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
  31. 1 div

  32. Next unit of work - 2 Time remaining > 0

    HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
  33. Next unit of work - 3 Time remaining > 0

    HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
  34. Next unit of work - div Time remaining > 0

    HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
  35. div 1 div 3

  36. div 1 div 3 List

  37. HostRoot List 1 Button 2 3 HostRoot 1 2 3

    Current Work in Progress List div div div div div div Button Next unit of work - Button Time remaining > 0
  38. None
  39. HostRoot List 1 Button 2 3 HostRoot 1 2 3

    Current Pending Commit List div div div div div div Button
  40. componentDidUpdate handleErrors div 1 div 3 List

  41. HostRoot List 1 Button 2 3 HostRoot 1 2 3

    Outdated Current List div div div div div div Button
  42. None
  43. Next unit of work - 2 Time remaining > 0

    Someone pressed the “Super-hyper-turbo urgent update” HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div
  44. Priorities Synchronous / stack reconciler Task / before next tick

    Animation / before next frame High / requestIdleCallback Low / requestIdleCallback Offscreen / requestIdleCallback
  45. phase1 - renderer/reconciler componentWillMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate phase2 - commit

    componentDidMount, componentDidUpdate, componentWillUnmount
  46. OH MY GOD, THIS IS SO COOL, I WANT TO

    KNOW MORE ➤ https://www.youtube.com/watch?v=aV1271hd9ew ➤ https://www.youtube.com/watch?v=ZCuYPiUIONs ➤ https://www.youtube.com/watch?v=_MAD4Oly9yg ➤ https://facebook.github.io/react/blog/2015/12/18/react- components-elements-and-instances.html ➤ https://facebook.github.io/react/contributing/ implementation-notes.html ➤ https://facebook.github.io/react/docs/reconciliation.html ➤ https://github.com/acdlite/react-fiber-architecture
  47. yarn add react@next react-dom@next npm i react@next react-dom@next

  48. None
  49. GRAZIE 1K Fatos Hoti / @hotifatos https://joind.in/talk/b6223