$30 off During Our Annual Pro Sale. View Details »

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. WHAT THE HELL IS FIBER
    AND WHY SHOULD I
    CARE?
    Fatos Hoti / @hotifatos

    View Slide

  2. WHO AM I
    ➤ Fatos Hoti
    ➤ Pula, Croatia
    ➤ Berlin, Germany
    ➤ SW Engineer@Klara GmbH

    View Slide

  3. View Slide

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

    View Slide

  5. REACT V.16

    View Slide

  6. NEW REACT
    RECONCILIATION
    ALGORITHM

    View Slide

  7. A NEW VERSION OF REACT
    WHERE INTERNALLY
    EVERYTHING CHANGES, BUT THE
    API STILL REMAINS THE SAME

    View Slide

  8. {
    stateNode,
    child,
    return,
    sibling,
    …rest
    }

    View Slide

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

    View Slide

  10. HOW DOES CURRENT
    RECONCILIATION WORK?

    View Slide

  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

    View Slide

  12. View Slide

  13. View Slide

  14. HostRoot
    List
    1
    2
    3
    Button
    Wrapper
    HostRoot
    div
    div
    div
    div
    button
    div

    View Slide

  15. View Slide

  16. View Slide

  17. Fiber splits work into units of work
    (tree/subtree chunks) computes the
    changes and schedules their
    execution

    View Slide

  18. requestIdleCallback
    do the work when you have time
    requestAnimationFrame
    do the work before the next frame

    View Slide

  19. phase1 - renderer/reconciler
    interruptable
    phase2 - commit
    non-interruptable

    View Slide

  20. View Slide

  21. HostRoot
    List
    1 2 3
    Button
    child return
    sibling
    Initial render
    div div div

    View Slide

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

    View Slide

  23. WORK LOOP
    next unit of work
    time remaining

    View Slide

  24. View Slide

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

    View Slide

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

    View Slide

  27. this.setState((state, props) => {});
    render();

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  31. 1
    div

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  35. div
    1
    div 3

    View Slide

  36. div
    1
    div 3 List

    View Slide

  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

    View Slide

  38. View Slide

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

    View Slide

  40. componentDidUpdate
    handleErrors
    div
    1
    div 3 List

    View Slide

  41. HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Outdated Current
    List
    div div div div div div
    Button

    View Slide

  42. View Slide

  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

    View Slide

  44. Priorities
    Synchronous / stack reconciler
    Task / before next tick
    Animation / before next frame
    High / requestIdleCallback
    Low / requestIdleCallback
    Offscreen / requestIdleCallback

    View Slide

  45. phase1 - renderer/reconciler
    componentWillMount, componentWillReceiveProps, shouldComponentUpdate,
    componentWillUpdate
    phase2 - commit
    componentDidMount, componentDidUpdate, componentWillUnmount

    View Slide

  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

    View Slide

  47. yarn add react@next react-dom@next
    npm i react@next react-dom@next

    View Slide

  48. View Slide

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

    View Slide