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