Pro Yearly is on sale from $80 to $50! »

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. ~Scratching React Fiber R A P H A M O

    R I M
  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.
  3. None
  4. talentos.globo.com

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

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

  7. 1# Fast Introduction

  8. 4 years ago 2013

  9. React.js appeared bringing... 2013

  10. Virtual-dom’s diff algorithm 2013

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

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

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

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

  15. Ended up shining eyes
 from various developers… 2015

  16. Ended up shining eyes
 from various developers…

  17. React Fiber public on July 2016

  18. But before we talk about it.

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

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

    JavaScript code *
  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.
  22. Which it is also known to be single thread

  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>
  24. abc

  25. Why it happens?

  26. busy Main thread

  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>
  28. ab

  29. Ok, but how It works in React?

  30. Code

  31. Code > React

  32. Code > React > Main Thread

  33. It'll be enough for now <3

  34. 2# Reconciliation

  35. ab

  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.
  37. 3# Fiber

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

  39. A fiber represents a unit of work.

  40. v = f(d)

  41. 4# Render Behavior

  42. React fits nicely to render data structures.

  43. eg. 
 DOM Structures, WebGL scene graph...

  44. However.

  45. However. 
 Not to animate anything at 40fps~60fps

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

    component only using the React lifecycle
  47. Visibly you will see that React will charge a performance

    cost per frame rotated
  48. To get higher levels of performance for animation: 
 


    Synchronize the DOM Skip layout render process whenever possible
  49. To get higher levels of performance for animation:
 
 Synchronize

    the DOM Skip layout render process whenever possible
  50. To get higher levels of performance for animation: 
 


    Synchronize the DOM Skip layout render process whenever possible
  51. React Fiber promises solve it.

  52. “ Incremental rendering ”

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

    multiple frames.
  54. Stack

  55. Stack

  56. Synchronous and recursive

  57. This makes it impossible to divide these processes into pieces.

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

    Besides having a heavy context to reproduce.
  59. Fiber

  60. Fiber

  61. Asynchronous reconciliation

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

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

    and stopping processes.
  64. Uses requestAnimationFrame and requestIdleCallback APIs.

  65. It is iterative, not recursive. 
 
 Soon it will

    not "drop" frames, since respect Layout and Paint processes.
  66. It is iterative, not recursive. 
 
 Soon it will

    not "drop" frames, since respect Layout and Paint processes.
  67. 3# Renderer

  68. ab

  69. ab

  70. isfiberreadyyet.com

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

  72. github.com/ raphamorim/
 react-conf-brasil

  73. HELP: react-tv

  74. Thank you! QUESTIONS: @RAPHAMUNDI