Slide 1

Slide 1 text

THE BEST IS YET TO COME: THE FUTURE OF REACT Matheus Albuquerque – Software Engineer, Front-End @ STRV lightning

Slide 2

Slide 2 text

2 01 GOALS

Slide 3

Slide 3 text

3 Guillermo Rauch, CEO @ZEIT “React is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications.“

Slide 4

Slide 4 text

01 PRESENT A FEW THOUGHTS ON DOM, SCHEDULING AND CONTROL FLOW 4 4 GOALS

Slide 5

Slide 5 text

02 PROVE THREE THEORIES I HAVE REGARDING THE WEB PLATFORM AND REACT.JS 5 5 GOALS

Slide 6

Slide 6 text

02 PROVE THREE THEORIES I HAVE REGARDING THE WEB PLATFORM AND REACT.JS 6 6 GOALS no spoilers here, sorry

Slide 7

Slide 7 text

7 03 DOM

Slide 8

Slide 8 text

REACT FIRE 8

Slide 9

Slide 9 text

9 Consists of… • An effort to modernize React DOM • Focused on making React better aligned with how the DOM works • It also aims to make React smaller and faster It brings… • Attach events at the React root rather than the document • Migrate from onChange to onInput and don’t polyfill it for uncontrolled components • className → class • React Flare • … DOM • REACT FIRE

Slide 10

Slide 10 text

REACT FLARE 10

Slide 11

Slide 11 text

11 • Experimental React Events API (react-events) • Necolas is the creator of react-native-web and cares a lot about cross-platform consistency • The Event System umbrella under React Fire DOM • REACT FLARE

Slide 12

Slide 12 text

12 • Make it easy to build UIs that feel great on desktop and mobile, with mouse and touch, and that are accessible • It includes declarative APIs for managing interactions • Unlike with the current React event system, the Flare design doesn't inflate the bundle for events you don't use • It should allow to cut down the amount of code in UI libraries that deal with mouse and touch events DOM • REACT FLARE

Slide 13

Slide 13 text

13 • The Flare event system ended up being a too-high-level-abstraction • As parts of the event system considered unnecessary or outdated were removed, they discovered many edge cases where it was being very helpful and prevented bugs • Reducing library code to re-add it several times in the application code was not the best tradeoff • Even basic things like buttons feel very different with mouse and touch when you use events like onClick DOM • REACT FLARE

Slide 14

Slide 14 text

14 DOM • REACT FLARE

Slide 15

Slide 15 text

15 DOM • REACT FLARE

Slide 16

Slide 16 text

16 04 SCHEDULING

Slide 17

Slide 17 text

OVERVIEW 17

Slide 18

Slide 18 text

18 • Users expect immediate feedback • Events can happen at any time • We can’t look into the future SCHEDULING • OVERVIEW

Slide 19

Slide 19 text

19 SCHEDULING • OVERVIEW

Slide 20

Slide 20 text

20 SCHEDULING • OVERVIEW

Slide 21

Slide 21 text

21 • Provides a scalable solution to performance • Lets us coordinate CPU and network-bound updates • Improves perceived performance • Low/Idle priority work • It doesn’t solve React.js problems; it solves UI problems SCHEDULING • OVERVIEW

Slide 22

Slide 22 text

REACT 22

Slide 23

Slide 23 text

23 SCHEDULING • REACT Concurrent React • Allows rendering work to be paused and resumed later • Makes tasks smaller Scheduler • A way to schedule work in the browser • Unstable! API will change

Slide 24

Slide 24 text

24 SCHEDULING • REACT

Slide 25

Slide 25 text

25 http://bit.ly/fiber-in-depth SCHEDULING • REACT

Slide 26

Slide 26 text

26 SCHEDULING • REACT Immediate User Blocking Normal Low Idle "Do it now" Now! "Do it now" 250ms "Do it soon" 5s "Do it eventually” 10s "Do it if you can” No timeout

Slide 27

Slide 27 text

27 SCHEDULING • REACT Immediate User Blocking Normal Low Idle "Do it now" Now! "Do it now" 250ms "Do it soon" 5s "Do it eventually” 10s "Do it if you can” No timeout first one is really sync

Slide 28

Slide 28 text

28 SCHEDULING • REACT

Slide 29

Slide 29 text

29 SCHEDULING • REACT • DEMO

Slide 30

Slide 30 text

30 SCHEDULING • REACT • DEMO

Slide 31

Slide 31 text

31 ReactDOM.render( CONCURRENT_AND_SCHEDULED ? ( ) : ( ), rootElement ); SCHEDULING • REACT • DEMO

Slide 32

Slide 32 text

32 ReactDOM.render( CONCURRENT_AND_SCHEDULED ? ( ) : ( ), rootElement ); SCHEDULING • REACT • DEMO Enabling the unstable Concurrent Mode

Slide 33

Slide 33 text

33 const handleChange = useCallback(event => { const value = event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO

Slide 34

Slide 34 text

34 const handleChange = useCallback(event => { const value = event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO Queue a task with a lower priority than the default priority of interaction callbacks.

Slide 35

Slide 35 text

35 const handleChange = useCallback(event => { const value = event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO

Slide 36

Slide 36 text

36 const handleChange = useCallback(event => { const value = event.target.value; if (CONCURRENT_AND_SCHEDULED) { setInputValue(value); unstable_next(function() { onChange(value); }); sendDeferredPing(value); } else { setInputValue(value); onChange(value); sendPing(value); } }); SCHEDULING • REACT • DEMO

Slide 37

Slide 37 text

37 const sendPing = value => { performance.mark("analytics-start"); someRandomOperation(25); performance.mark("analytics-end"); performance.measure( "Analytics: " + value, "analytics-start", "analytics-end" ); }; const sendDeferredPing = value => { unstable_scheduleCallback(unstable_LowPriority, function() { sendPing(value); }); }; SCHEDULING • REACT • DEMO

Slide 38

Slide 38 text

38 const sendPing = value => { performance.mark("analytics-start"); someRandomOperation(25); performance.mark("analytics-end"); performance.measure( "Analytics: " + value, "analytics-start", "analytics-end" ); }; const sendDeferredPing = value => { unstable_scheduleCallback(unstable_LowPriority, function() { sendPing(value); }); }; SCHEDULING • REACT • DEMO We can schedule a callback with an even lower priority.

Slide 39

Slide 39 text

39 SCHEDULING • REACT • DEMO

Slide 40

Slide 40 text

40 SCHEDULING • REACT • DEMO

Slide 41

Slide 41 text

41 SCHEDULING • REACT • DEMO Demo recap • Concurrent React can break long running tasks into chunks • The scheduler allows us to prioritize important updates

Slide 42

Slide 42 text

THE WEB 42

Slide 43

Slide 43 text

43 SCHEDULING • THE WEB • Everyone should use the same scheduler • Having more than one scheduler causes resource fighting • Interleaving tasks with browser work (rendering, GC)

Slide 44

Slide 44 text

44 SCHEDULING • THE WEB We have a few scheduling primitives: • setTimeout • requestAnimationFrame • requestIdleCallback • postMessage

Slide 45

Slide 45 text

WE NEED SCHEDULING PRIMITIVES 45 45 SCHEDULING • THE WEB

Slide 46

Slide 46 text

46 SCHEDULING • THE WEB

Slide 47

Slide 47 text

47 SCHEDULING • THE WEB https://github.com/WICG/main-thread-scheduling

Slide 48

Slide 48 text

48 SCHEDULING • THE WEB • Developed in cooperation with React, Polymer, Ember, Google Maps, and the Web Standards Community • Aligned with the work of the React Core Team • Integrated directly into the event loop

Slide 49

Slide 49 text

49 SCHEDULING • THE WEB

Slide 50

Slide 50 text

50 SCHEDULING • THE WEB https://engineering.fb.com/developer-tools/isinputpending-api/

Slide 51

Slide 51 text

51 SCHEDULING • THE WEB

Slide 52

Slide 52 text

52 SCHEDULING • THE WEB https://wicg.github.io/is-input-pending

Slide 53

Slide 53 text

53 while (workQueue.length > 0) { if (navigator.scheduling.isInputPending()) { // Stop doing work if we have to handle an input event. break; } let job = workQueue.shift(); job.execute(); } SCHEDULING • THE WEB

Slide 54

Slide 54 text

54 while (workQueue.length > 0) { if (navigator.scheduling.isInputPending(['mousedown', 'keydown'])) { // Stop doing work if we think we'll start receiving a mouse or key event. break; } let job = workQueue.shift(); job.execute(); } SCHEDULING • THE WEB

Slide 55

Slide 55 text

RECAP 55

Slide 56

Slide 56 text

56 SCHEDULING • RECAP • Scheduling is necessary for responsive user interfaces • We can solve a lot at the framework level with Concurrent React and the Scheduler • A Web Standards proposal is in making that brins a scheduler API to the browser

Slide 57

Slide 57 text

57 05 CONTROL FLOW

Slide 58

Slide 58 text

EFFECT HANDLERS 58

Slide 59

Slide 59 text

59 ### CONTROL FLOW • EFFECT HANDLERS

Slide 60

Slide 60 text

60 CONTROL FLOW • EFFECT HANDLERS

Slide 61

Slide 61 text

61 CONTROL FLOW • EFFECT HANDLERS https://overreacted.io/algebraic-effects-for-the-rest-of-us

Slide 62

Slide 62 text

62 CONTROL FLOW • EFFECT HANDLERS function getName(user) { let name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } }

Slide 63

Slide 63 text

63 CONTROL FLOW • EFFECT HANDLERS function getName(user) { let name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } } throw ↝ perform catch ↝ handle lets us jump back to where we performed the effect

Slide 64

Slide 64 text

64 CONTROL FLOW • EFFECT HANDLERS

Slide 65

Slide 65 text

65 CONTROL FLOW • EFFECT HANDLERS https://github.com/macabeus/js-proposal-algebraic-effects

Slide 66

Slide 66 text

REACT 66

Slide 67

Slide 67 text

67 CONTROL FLOW • REACT

Slide 68

Slide 68 text

68 CONTROL FLOW • REACT

Slide 69

Slide 69 text

69 https://esdiscuss.org/topic/one-shot-delimited-continuations-with-effect-handlers CONTROL FLOW • REACT

Slide 70

Slide 70 text

70 ### CONTROL FLOW • REACT

Slide 71

Slide 71 text

71 CONTROL FLOW • REACT

Slide 72

Slide 72 text

72 CONTROL FLOW • REACT A component is able to suspend the fiber it is running in by throwing a promise, which is caught and handled by the framework.

Slide 73

Slide 73 text

73 CONTROL FLOW • REACT A component is able to suspend the fiber it is running in by throwing a promise, which is caught and handled by the framework. throw-handle-resume pattern

Slide 74

Slide 74 text

74 06 TLDR

Slide 75

Slide 75 text

75 ### TLDR • THEORIES

Slide 76

Slide 76 text

76 TLDR • THEORIES

Slide 77

Slide 77 text

77 TLDR • THEORIES

Slide 78

Slide 78 text

78 TLDR • THEORIES

Slide 79

Slide 79 text

01 REACT.JS HAS BEEN PUSHING OTHER ECOSYSTEMS TO THE FUTURE 79 79 TLDR • CONCLUSIONS e.g. Swift UI and other declarative-UIs efforts

Slide 80

Slide 80 text

02 REACT.JS HAS BEEN PUSHING WEB APIs TO THE FUTURE 80 80 TLDR • CONCLUSIONS e.g. Scheduler API and Effect Handlers

Slide 81

Slide 81 text

REACT.JS HAS BEEN PUSHED BY WEB APIs TO THE FUTURE 81 81 TLDR • CONCLUSIONS e.g. React Fire & React Flare, effort on Hooks 03

Slide 82

Slide 82 text

82 Guillermo Rauch, CEO @ZEIT “React is such a good idea that we will spend the rest of the decade continuing to explore its implications and applications.“

Slide 83

Slide 83 text

THE BEST IS YET TO COME THE FUTURE OF REACT Matheus Albuquerque – Software Engineer, Front-End @ STRV

Slide 84

Slide 84 text

THE BEST IS YET TO COME THE FUTURE OF REACT Matheus Albuquerque – Software Engineer, Front-End @ STRV IS

Slide 85

Slide 85 text

ONE MORE THING 85 85

Slide 86

Slide 86 text

86 86

Slide 87

Slide 87 text

87 87 This is me giving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future.

Slide 88

Slide 88 text

88 88 This is me giving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future.

Slide 89

Slide 89 text

89 89 This is me giving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future.

Slide 90

Slide 90 text

90 90 This is me giving a talk about Ionic on an iOS developers meetup five years ago telling them that Angular would be the future.

Slide 91

Slide 91 text

04 DON’T TRUST MY FUTURE PREDICTIONS 91 91 TLDR • CONCLUSIONS

Slide 92

Slide 92 text

92 07 THIS TALK

Slide 93

Slide 93 text

93 MATHEUS ALBUQUERQUE @ythecombinator www.ythecombinator.space [email protected]

Slide 94

Slide 94 text

THIS TALK • KEYNOTE 94

Slide 95

Slide 95 text

THIS TALK • KEYNOTE 95 https://speakerdeck.com/ythecombinator

Slide 96

Slide 96 text

Matheus Albuquerque – Software Engineer, Front-End @ STRV THANK YOU!

Slide 97

Slide 97 text

Matheus Albuquerque – Software Engineer, Front-End @ STRV FORTE ABRAÇO