Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

tosFa

May 11, 2017
Tweet

More Decks by tosFa

Other Decks in Programming

Transcript

  1. WHO AM I ➤ Fatos Hoti ➤ Pula, Croatia ➤

    Berlin, Germany ➤ SW Engineer@Klara GmbH
  2. 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
  3. Next unit of work - List Time remaining > 0

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

    List 1 Button 2 3 HostRoot Current Work in Progress List div div div
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. HostRoot List 1 Button 2 3 HostRoot 1 2 3

    Current Pending Commit List div div div div div div Button
  13. HostRoot List 1 Button 2 3 HostRoot 1 2 3

    Outdated Current List div div div div div div Button
  14. 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
  15. Priorities Synchronous / stack reconciler Task / before next tick

    Animation / before next frame High / requestIdleCallback Low / requestIdleCallback Offscreen / requestIdleCallback
  16. 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