Apresentado na React Conf Brasil, em São Paulo, 7 de Outubro de 2017 #reactconfbr Entusiasta da open web e software livre. Software Developer na globo.com e membro da JS foundation. Já trabalhou como desenvolvedor em empresas como Videolog e Petrobras. Em 2015, foi um dos desenvolvedores de software mais notáveis no GitHub, tendo feito contribuições significativas para projetos de código aberto por 500 dias seguidos. Orador em mais de vinte conferências dando palestras sobre tecnologias web como JavaScript / ES6, Web Performance, React e Canvas / WebGL. http://raphamorim.io @raphamundi - Patrocínio: Pipefy, Globo.com, Meteor, Apollo, Taller, Fullcircle, Quanto, Udacity, Cubos, Segware, Entria - Apoio: Concrete, Rung, LuizaLabs, Movile, Rivendel, GreenMile, STQ, Hi Platform - Promoção: InfoQ, DevNaEstrada, CodamosClub, JS Ladies, NodeBR, Training Center, BrazilJS, Tableless, GeekHunter - Afterparty: An English Thing

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