Tweet
Tweet

Slide 1

Slide 1 text

WHAT THE HELL IS FIBER AND WHY SHOULD I CARE? Fatos Hoti / @hotifatos

Slide 2

Slide 2 text

WHO AM I ➤ Fatos Hoti ➤ Pula, Croatia ➤ Berlin, Germany ➤ SW Engineer@Klara GmbH

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WHAT THE HELL IS FIBER AND WHY SHOULD I CARE?

Slide 5

Slide 5 text

REACT V.16

Slide 6

Slide 6 text

NEW REACT RECONCILIATION ALGORITHM

Slide 7

Slide 7 text

A NEW VERSION OF REACT WHERE INTERNALLY EVERYTHING CHANGES, BUT THE API STILL REMAINS THE SAME

Slide 8

Slide 8 text

{ stateNode, child, return, sibling, …rest }

Slide 9

Slide 9 text

WHAT THE HELL IS FIBER AND WHY SHOULD I CARE?

Slide 10

Slide 10 text

HOW DOES CURRENT RECONCILIATION WORK?

Slide 11

Slide 11 text

LET'S TAKE A STEP BACK ➤ No need to explain how to get from A to B, just tell me what is B ➤ “Virtual DOM” && “Diffing" ➤ v.14 -> react && react-dom ➤ react-native, react-vr, react-aframe, react-hardware… ➤ reconciler && renderer

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

HostRoot List 1 2 3 Button Wrapper HostRoot div div div div button div

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Fiber splits work into units of work (tree/subtree chunks) computes the changes and schedules their execution

Slide 18

Slide 18 text

requestIdleCallback do the work when you have time requestAnimationFrame do the work before the next frame

Slide 19

Slide 19 text

phase1 - renderer/reconciler interruptable phase2 - commit non-interruptable

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

HostRoot List 1 2 3 Button child return sibling Initial render div div div

Slide 22

Slide 22 text

{ stateNode, child, return, sibling, …rest }

Slide 23

Slide 23 text

WORK LOOP next unit of work time remaining

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Next unit of work - List Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot Current Work in Progress div div div

Slide 26

Slide 26 text

List has an update queue Time Remaining > 0 HostRoot List 1 Button 2 3 HostRoot Current Work in Progress List div div div

Slide 27

Slide 27 text

this.setState((state, props) => {}); render();

Slide 28

Slide 28 text

HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List Next unit of work - 1 Time remaining > 0 div div div div div div

Slide 29

Slide 29 text

Next unit of work - div Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div

Slide 30

Slide 30 text

Next unit of work - 2 Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div

Slide 31

Slide 31 text

1 div

Slide 32

Slide 32 text

Next unit of work - 2 Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div

Slide 33

Slide 33 text

Next unit of work - 3 Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div

Slide 34

Slide 34 text

Next unit of work - div Time remaining > 0 HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div

Slide 35

Slide 35 text

div 1 div 3

Slide 36

Slide 36 text

div 1 div 3 List

Slide 37

Slide 37 text

HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div Button Next unit of work - Button Time remaining > 0

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Pending Commit List div div div div div div Button

Slide 40

Slide 40 text

componentDidUpdate handleErrors div 1 div 3 List

Slide 41

Slide 41 text

HostRoot List 1 Button 2 3 HostRoot 1 2 3 Outdated Current List div div div div div div Button

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Next unit of work - 2 Time remaining > 0 Someone pressed the “Super-hyper-turbo urgent update” HostRoot List 1 Button 2 3 HostRoot 1 2 3 Current Work in Progress List div div div div div div

Slide 44

Slide 44 text

Priorities Synchronous / stack reconciler Task / before next tick Animation / before next frame High / requestIdleCallback Low / requestIdleCallback Offscreen / requestIdleCallback

Slide 45

Slide 45 text

phase1 - renderer/reconciler componentWillMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate phase2 - commit componentDidMount, componentDidUpdate, componentWillUnmount

Slide 46

Slide 46 text

OH MY GOD, THIS IS SO COOL, I WANT TO KNOW MORE ➤ https://www.youtube.com/watch?v=aV1271hd9ew ➤ https://www.youtube.com/watch?v=ZCuYPiUIONs ➤ https://www.youtube.com/watch?v=_MAD4Oly9yg ➤ https://facebook.github.io/react/blog/2015/12/18/react- components-elements-and-instances.html ➤ https://facebook.github.io/react/contributing/ implementation-notes.html ➤ https://facebook.github.io/react/docs/reconciliation.html ➤ https://github.com/acdlite/react-fiber-architecture

Slide 47

Slide 47 text

yarn add react@next react-dom@next npm i react@next react-dom@next

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

GRAZIE 1K Fatos Hoti / @hotifatos https://joind.in/talk/b6223