Scratching React Fiber

React Fiber is a rewrite of the React core algorithm, being a future features of React, understand what changes and what benefits the new approach. A lecture will detail concepts of the React rendering steps. Fiber is a result of more than two years of core work by the Reaction team.

Transcript

1. ~Scratching
   React Fiber
   R A P
   H A M
   O R I M
   

   View Slide

2. Raphael
   Amorim
   This guy seems like a nice person, but
   he doesn’t. Seriously. He likes topics
   related to JavaScript, Python, Clojure,
   WebGL, Algorithms and sometimes force
   some git push.
   

   Working most part of his time in useless
   globo.com •
   js foundation/jQuery member •
   Mozillian •
   Metido a besta •
   @raphamundi
   This guy seems like a
   he doesn’t. Seriously.
   related to JavaScript,
   WebGL, Algorithms and
   some git push.
   

   Working most part of h
   open source projects.
   some git push.
   

   Working most part of his
   open source projects.
   

   View Slide

3. View Slide

4. talentos.globo.com
   

   View Slide

5. thumbor.org
   tsuru.io
   megadraft.io
   clappr.io
   

   View Slide

6. thumbor.org
   tsuru.io
   megadraft.io
   clappr.io
   opensource.globo.com
   

   View Slide

7. 1#
   Fast
   Introduction
   

   View Slide

8. 4 years ago
   2013
   

   View Slide

9. React.js
   appeared
   bringing...
   2013
   

   View Slide

10. Virtual-dom’s diff algorithm
    2013
    

    View Slide

11. Virtual-dom’s diff algorithm
    Jun 6, 2014
    

    View Slide

12. Isomorphic Applications
    &&
    SSR
    Virtual-dom’s diff algorithm
    Jun 6, 2014
    

    View Slide

13. Isomorphic Applications
    &&
    SSR
    Virtual-dom’s diff algorithm
    2015
    

    View Slide

14. Isomorphic Applications
    &&
    SSR
    Rise of React Native
    2015
    

    View Slide

15. Ended up shining eyes

    from various developers…
    2015
    

    View Slide

16. Ended up shining eyes

    from various developers…
    

    View Slide

17. React Fiber
    public on July 2016
    

    View Slide

18. But before we talk about it.
    

    View Slide

19. But before we talk about it.
    Let’s talk about JS engine behavior
    

    View Slide

20. A JavaScript engine is a program or interpreter which
    executes JavaScript code *
    

    View Slide

21. A JavaScript engine is a program or interpreter which
    executes JavaScript code *
    * A JavaScript engine may be a traditional interpreter, or it may
    utilize just-in-time compilation to bytecode in some manner.
    

    View Slide

22. Which it is also known to be single thread
    

    View Slide

23. 0
    
    <br/>setTimeout(() => {<br/>const animation1 = document.querySelector('.animation')<br/>for (var i = 0; i < 30000; i++) {<br/>animation1.innerHTML = i<br/>}<br/>}, 3000)<br/>
    

    View Slide

24. abc
    

    View Slide

25. Why it happens?
    

    View Slide

26. busy
    Main thread
    

    View Slide

27. 0
    alt="">
    <br/>setTimeout(() => {<br/>const animation1 = document.querySelector('.animation')<br/>let i = 0<br/>function stepByStep() {<br/>animation1.innerHTML = (i += 1)<br/>if (i < 30000) {<br/>requestAnimationFrame(stepByStep)<br/>}<br/>}<br/>stepByStep()<br/>}, 3000)<br/>
    

    View Slide

28. ab
    

    View Slide

29. Ok, but how It works
    in React?
    

    View Slide

30. Code
    

    View Slide

31. Code > React
    

    View Slide

32. Code > React > Main Thread
    

    View Slide

33. It'll be enough for now <3
    

    View Slide

34. 2#
    Reconciliation
    

    View Slide

35. ab
    

    View Slide

36. It's important to remember that the
    reconciliation algorithm is an
    implementation detail.
    React could rerender the whole app on every
    action, the end result would be the same.
    

    View Slide

37. 3#
    Fiber
    

    View Slide

38. Fiber is a fully rewritten based on
    this algorithm.
    

    View Slide

39. A fiber represents a unit of work.
    

    View Slide

40. v = f(d)
    

    View Slide

41. 4#
    Render Behavior
    

    View Slide

42. React fits nicely to render data
    structures.
    

    View Slide

43. eg. 

    DOM Structures, WebGL scene graph...
    

    View Slide

44. However.
    

    View Slide

45. However. 

    Not to animate anything at 40fps~60fps
    

    View Slide

46. Let’s try to animate a simple spin
    effect on a component only using the
    React lifecycle
    

    View Slide

47. Visibly you will see that React will
    charge a performance cost per frame
    rotated
    

    View Slide

48. To get higher levels of performance
    for animation: 

    

    Synchronize the DOM
    Skip layout render process whenever
    possible
    

    View Slide

49. To get higher levels of performance
    for animation:

    

    Synchronize the DOM
    Skip layout render process whenever
    possible
    

    View Slide

50. To get higher levels of performance
    for animation: 

    

    Synchronize the DOM
    Skip layout render process whenever
    possible
    

    View Slide

51. React Fiber promises solve it.
    

    View Slide

52. “
    Incremental
    rendering ”
    

    View Slide

53. Divides the rendering work into
    smaller pieces and distributes between
    multiple frames.
    

    View Slide

54. Stack
    

    View Slide

55. Stack
    

    View Slide

56. Synchronous and recursive
    

    View Slide

57. This makes it impossible to divide
    these processes into pieces.
    Besides having a heavy context to
    reproduce
    

    View Slide

58. This makes it impossible to divide
    these processes into pieces.
    Besides having a heavy context to
    reproduce.
    

    View Slide

59. Fiber
    

    View Slide

60. Fiber
    

    View Slide

61. Asynchronous reconciliation
    

    View Slide

62. Determining the priority of different
    types of processes.
    Allow pausing and stopping processes.
    

    View Slide

63. Determining the priority of different
    types of processes.
    Allow pausing and stopping processes.
    

    View Slide

64. Uses requestAnimationFrame and
    requestIdleCallback APIs.
    

    View Slide

65. It is iterative, not recursive. 

    

    Soon it will not "drop" frames, since
    respect Layout and Paint processes.
    

    View Slide

66. It is iterative, not recursive. 

    

    Soon it will not "drop" frames, since
    respect Layout and Paint processes.
    

    View Slide

67. 3#
    Renderer
    

    View Slide

68. ab
    

    View Slide

69. ab
    

    View Slide

70. isfiberreadyyet.com
    

    View Slide

71. code.facebook.com/posts/1716776591680069/
    react-16-a-look-inside-an-api-compatible-
    rewrite-of-our-frontend-ui-library/
    

    View Slide

72. github.com/
    raphamorim/

    react-conf-brasil
    

    View Slide

73. HELP: react-tv
    

    View Slide

74. Thank
    you!
    QUESTIONS: @RAPHAMUNDI
    

    View Slide