Scratching React Fiber

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.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

October 07, 2017
Tweet

Transcript

  1. 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.
  2. 3.
  3. 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.
  4. 23.

    <div class="animation">0</div> <img src="http://media.giphy.com/media/jkSvCVEXWlOla/giphy.gif"> <script> setTimeout(() => { const animation1

    = document.querySelector('.animation') for (var i = 0; i < 30000; i++) { animation1.innerHTML = i } }, 3000) </script>
  5. 24.

    abc

  6. 27.

    <div class="animation">0</div> <img src="http://media.giphy.com/media/jkSvCVEXWlOla/giphy.gif" alt=""> <script> setTimeout(() => { const

    animation1 = document.querySelector('.animation') let i = 0 function stepByStep() { animation1.innerHTML = (i += 1) if (i < 30000) { requestAnimationFrame(stepByStep) } } stepByStep() }, 3000) </script>
  7. 28.

    ab

  8. 30.
  9. 35.

    ab

  10. 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.
  11. 37.
  12. 40.
  13. 44.
  14. 46.

    Let’s try to animate a simple spin effect on a

    component only using the React lifecycle
  15. 48.

    To get higher levels of performance for animation: 
 


    Synchronize the DOM Skip layout render process whenever possible
  16. 49.

    To get higher levels of performance for animation:
 
 Synchronize

    the DOM Skip layout render process whenever possible
  17. 50.

    To get higher levels of performance for animation: 
 


    Synchronize the DOM Skip layout render process whenever possible
  18. 54.
  19. 55.
  20. 57.

    This makes it impossible to divide these processes into pieces.

    Besides having a heavy context to reproduce
  21. 58.

    This makes it impossible to divide these processes into pieces.

    Besides having a heavy context to reproduce.
  22. 59.
  23. 60.
  24. 65.

    It is iterative, not recursive. 
 
 Soon it will

    not "drop" frames, since respect Layout and Paint processes.
  25. 66.

    It is iterative, not recursive. 
 
 Soon it will

    not "drop" frames, since respect Layout and Paint processes.
  26. 68.

    ab

  27. 69.

    ab