🇮🇹 reactjsday 2024

A Decade: React’s Rhapsody of Life

Join me in celebrating the decade-long journey of React—a framework that has revolutionized front-end development.

Despite all the initial skepticism around aspects like JSX, it became one of our favorite tools. We'll explore this and other "trouble in paradise” moments!

Looking ahead, we'll discuss ongoing efforts like the Activity component, optimistic state updates, and more advanced stuff, like the optimization compiler and the recent improvements to React Native's JS engine.

Let's embrace a decade of React and the endless possibilities it holds!

Transcript

1. Ciao, Verona! 👋 🇮🇹 A DECADE: REACT’S RHAPSODY OF LIFE • OCTOBER 25, 2024.
2. MATHEUS ALBUQUERQUE • @ythecombinator A DECADE: REACT’S RHAPSODY OF LIFE
3. Preamble A DECADE: REACT’S RHAPSODY OF LIFE /
4. THIS TALK IS ABOUT… OUR STORY WITH REACT DIVERGING PATHS BEFORE REACT MODERN REACT THE FUTURE EARLY YEARS TROUBLE IN PARADISE SOC PERFORMANCE GOLDEN YEARS JSX
6. PAST FUTURE LESSONS LEARNED TROUBLE IN PARADISE
8. The Past A DECADE: REACT’S RHAPSODY OF LIFE /
9. WHAT WERE YOU UP TO BEFORE REACT? A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
10. THE PAST: THE WEB — THE FORMATION OF FRAMEWORK WAVES FROM THE EPICENTER • SARAH DRASNER
11. 2007 - 2009 2009 - 2012 THE PAST: THE WEB
12. 2007 - 2009 THE PAST: THE WEB 2009 - 2012
13. THE PAST: THE WEB
14. WHAT WERE YOU UP TO BEFORE REACT? A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
15. THE PAST: THE WEB
16. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
17. THE PAST: BOLTJS var CarView = require('javelin/core').createClass({ name: 'CarView', extend: require('container').Container, properties: { wheels: 4, }, declare: function() { return { childViews: [ { content: 'I have ' }, { ref: 'wheelView' }, { content: ' wheels' } ] }; }, setWheels: function(wheels) { this.findRef('wheelView').setContent(wheels); }, getWheels: function() { return this.findRef('wheelView').getContent(); }, }); var car = new CarView(); car.setWheels(3); car.placeIn(document.body); — OUR FIRST 50,000 STARS • CHRISTOPHER CHEDEAU
18. THE PAST: BOLTJS ↝ CLIENT-SIDE MVC FRAMEWORK. ↝ COMBINED EXISTING TOOLS TO HANDLE THE COMPLEX INTERACTIVITY OF PRIMITIVE FACEBOOK TIMELINES, CHAT, NEWS FEEDS, AND OTHER ADVANCED APPLICATIONS. ↝ INTRODUCED SOME APIS AND FEATURES THAT WOULD EVENTUALLY MAKE THEIR WAY INTO REACT INCLUDING render, createClass, AND refs. — OUR FIRST 50,000 STARS • CHRISTOPHER CHEDEAU (@VJEUX)
19. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
20. THE PAST: FAXJS ↝ SOLVED THE SAME PROBLEMS IN A VERY DIFFERENT WAY. ↝ MUCH MORE FUNCTIONAL; WITH NO MVC ARCHITECTURE. ↝ INTRODUCED THE CONCEPT OF RE-RENDERING WHEN SOMETHING IN THE UI HAS CHANGED. ↝ FUNDAMENTALS WERE BORN: PROPS, STATE AND THE BASIC CONCEPT OF COMPONENTS. — OUR FIRST 50,000 STARS • CHRISTOPHER CHEDEAU (@VJEUX)
21. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
22. THE PAST: XHP function :example:hello(attrib, children) { return ( <div class="special"> <h1>Hello, World!</h1> {children} </div> ); } function jsx_example_hello(attrib, children) { return ( S.create("div", {"class": "special"}, [ S.create("h1", {}, ["Hello, World!"]), children ] ); } ↝
24. AFTER REACT DECLARATIVE VIEWS STATEFUL RENDERING CLASSES MVC MVVM COMPONENT DRIVEN JSX PREDICTABLE* RENDERING SO MUCH BETTER THAN THE GIVEN ALTERNATIVES ↝
25. “With React you can build applications without even thinking about performance and the default state is fast.” Pete Hunt (2013)
26. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
27. Guillermo Rauch (2015) “With this model in place, the programmer is thus relieved from the burden of specifying the transition between states (or transformation) of the UI over time.”
28. — WHY REACT ISN'T DYING • DOMINIK (@TKDODO)
29. — REACT.JS: THE DOCUMENTARY • HONEYPOT
30. Trouble in Paradise A DECADE: REACT’S RHAPSODY OF LIFE /
31. “YOU’RE MISSING THE POINT OF…” A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
32. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
33.  Dan Abramov (2015) “I’ve seen React misunderstood by smart people more often than any other JavaScript library. React is packed with ideas that were radical at the time of its introduction. This created an air of controversy that still hasn’t quite dissolved.”
34. CASE IN POINT: CONCURRENT REACT
35.  Dan Abramov (2015) “After a year of using React and observing people learning it, I can say that the best parts of React are not the ones that made it famous. They’re not virtual DOM, custom event system, server rendering or JSX. Rather, they are a few boring, old and powerful ideas.”
37. ECOSYSTEM FRICTION A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
38. 2016 — STREAMING SSR
39. 2020/21 — CONCURRENT REACT
40. 2022/23 — RSC
41. “NEXT.JS IS EATING REACT” A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
42. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
43. “NEXT.JS IS EATING REACT”
44. “NEXT.JS IS EATING REACT”
45. GROWING RESENTMENT A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
46. JSX vs. SOC
47. JSX vs. SOC
48. REACTIVITY
49. HOOKS
50. HOOKS
51. HOOKS
52. CONCURRENT REACT
53. REACT SERVER COMPONENTS
54. REACT SERVER COMPONENTS
55. GROWING RESENTMENT
56. GROWING RESENTMENT — REACT IS BECOMING A BLACK BOX • JARED PALMER
57. GROWING RESENTMENT
58. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #1 of 8 SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES.
59. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
60. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
61. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
62. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #1 of 8 SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES.
63. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #1 of 8 AND SO DO TROUBLE IN PARADISE MOMENTS. WHAT’S DIFFERENT NOW? THROUGH CYCLES.
64. TROUBLE IN PARADISE
65. TROUBLE IN PARADISE
68. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE REACT PUSHED US TO THE FUTURE. #2 of 8
69. REACT PUSHED US TO THE FUTURE OTHER FRAMEWORKS JSX / VIRTUAL DOM / HMR + FAST REFRESH NAT
70. REACT PUSHED US TO THE FUTURE OUR PLATFORM NATIVE SCHEDULER API / EFFECT HANDLERS* RESH COMPON
71. REACT PUSHED US TO THE FUTURE * COMPON
72. REACT PUSHED US TO THE FUTURE OTHER PLATFORMS FLUTTER / JETPACK COMPOSE / LITHO / SWIFTUI / COMPONENTKIT / YOGA LAYOUT / RESWIFT *
73. REACT PUSHED US TO THE FUTURE
74. Before cars, we had no car accidents.
75. COFFEESCRIPT ↝ ARROW FUNCTIONS
76. EMBER ↝ REACT ROUTER
79. The Future A DECADE: REACT’S RHAPSODY OF LIFE /
80. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
81. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / FAST JSX
82. REACT SERVER COMPONENTS A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
85. — DEVTOOLS FOR REACT SERVER COMPONENTS BY ALVAR LAGERLÖF RSC: TOOLING
86. RSC: HAPPY CASES
87. RSC: NOT SO HAPPY CASES
88. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT SERVER COMPONENTS
89. RSC: OTHER ECOSYSTEMS
90. REACT FORGET COMPILER A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
91. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT COMPILER
92. REACT FORGET COMPILER ↝ IMPROVE THE RENDERING PERFORMANCE BY AUTOMATICALLY GENERATING THE EQUIVALENT OF useMemo, useCallback, AND memo CALLS. ↝ MINIMIZE THE COST OF RE-RENDERING WHILE RETAINING REACT’S PROGRAMMING MODEL. ↝ AUTOMATIC REACTIVITY COMPILER.
93. REACT COMPILER: IN-DEPTH
94. REACT COMPILER: TOOLING
95. REACT COMPILER: TOOLING
96. REACT COMPILER: CASE STUDIES
97. OFFSCREEN ACTIVITY A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
98. OFFSCREEN ACTIVITY ↝ RENDERING IN THE BACKGROUND WITH NO ADDITIONAL PERFORMANCE OVERHEAD. ↝ IT DOESN'T MOUNT UNTIL THE COMPONENT BECOMES VISIBLE AND ITS EFFECTS ARE NOT FIRED. ↝ TOGGLE THE VISIBILITY WITHOUT LOSING THE STATE. ↝ INTEGRATED INTO ROUTERS AND OTHER UI LIBRARIES.
99. OFFSCREEN ACTIVITY ↝ ROUTERS CAN PRE-RENDER SCREENS IN THE BACKGROUND SO THAT THEY’RE INSTANTLY AVAILABLE. ↝ TAB SWITCHING CAN PRESERVE THE STATE OF HIDDEN TABS, SO THE USER CAN SWITCH BETWEEN THEM WITHOUT LOSING THEIR PROGRESS. ↝ A VIRTUALIZED LIST CAN PRERENDER ADDITIONAL ROWS ABOVE AND BELOW THE VISIBLE WINDOW.
100. OFFSCREEN ACTIVITY
101. OFFSCREEN ACTIVITY
102. SUSPENSE FOR CPU-BOUND TREES A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
103. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / SUSPENSE FOR CPU-BOUND TREES
104. SUSPENSE FOR CPU-BOUND TREES
105. SUSPENSE FOR CPU-BOUND TREES ↝ FORCES A FALLBACK ON THE INITIAL RENDER REGARDLESS OF WHETHER SOMETHING IS SUSPENDED. ↝ DURING THE INITIAL MOUNT, REACT WILL SKIP OVER EXPENSIVE TREES BY RENDERING A PLACEHOLDER. ↝ IT HELPS UNBLOCK THE INITIAL SKELETON FOR THE NEW SCREEN.
106. OPTIMISTIC STATE UPDATES A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
107. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / OPTIMISTIC STATE UPDATES
108. OPTIMISTIC STATE UPDATES const [A, B] = useOptimistic<T>(C, D)
109. OPTIMISTIC STATE UPDATES const [optimisticState, setOptimisticLikes] = useOptimistic( { likes, isLiked }, (state, action: "LIKE" | "DISLIKE") = > { if (action === "LIKE") { return { likes: state.likes + 1, isLiked: true }; } else { return { likes: state.likes - 1, isLiked: false }; } }, );
110. RESOURCE PRELOADING A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
111. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / RESOURCE PRELOADING
112. RESOURCE PRELOADING
113. TRANSITION TRACING A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
114. TRANSITION TRACING ↝ USE THE PROFILER API AND DEVTOOLS PROFILER/ TIMELINE TO WATCH FOR PERFORMANCE REGRESSIONS FOR SPECIFIC TRANSITIONS. ↝ DETECT WHEN TRANSITIONS BECOME SLOWER AND INVESTIGATE WHY THEY MAY BE SLOW. ↝ A NEW VERSION OF THE INTERACTION TRACING API.
115. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / TRANSITION TRACING
116. TRANSITION TRACING function App() { const user = getViewingUser(); const [pageName, setPageName] = useState("homefeed"); const onNavigate = (pageName) = > { startTransition(() = > setPageName(pageName), { name: pageName }); }; return ( <> <NavBar onNavigate={onNavigate} /> <Page name={pageName} id={user.id} /> </> ); } — TRANSITION TRACING API RFC
117. TRANSITION TRACING const onTransitionStart = (transitionName, startTime) = > . . . ; const onTransitionComplete = (transitionName, startTime, endTime) = > . . . ; const onTransitionProgress = (transitionName, startTime, currentTime, pendingSuspenseBoundaries) = > . . . ; const root = React.createRoot(container, { transitionCallbacks: { onTransitionStart, onTransitionComplete, onTransitionProgress, }, }); — TRANSITION TRACING API RFC
118. TRANSITION TRACING function Profile({ id }) { return ( <TracingMarker name="profile"> <Suspense fallback={<LoadingSpinner />}> <ProfileHeader id={id} /> <TracingMarker name="profile:photo-feed"> <div>Photos</div> <Suspense fallback={<LoadingFeed />}> <PhotoFeed /> </Suspense> </TracingMarker> <TracingMarker name="profile:profile-feed"> <div>Profile Feed</div> <Suspense fallback={<LoadingFeed />}> <ProfileFeed /> </Suspense> </TracingMarker> </Suspense> </TracingMarker> ); } — TRANSITION TRACING API RFC
119. THE FUTURE PRESENT ↝ OPTIMISTIC STATE UPDATES ↝ RESOURCE PRELOADING ↝ TRANSITION TRACING
120. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE REACT NATIVE
121. STATIC HERMES A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE
122. STATIC HERMES ↝ MODIFIES SOME JS SEMANTICS TO ALLOW EFFICIENT SOUND TYPING. ↝ BRIDGES PREDICTABLE C PERFORMANCE WITH JS USABILITY VIA NATIVE AOT COMPILATION. ↝ MIX AND MATCH BYTE-CODE AND NATIVE CODE BASED ON YOUR NEEDS.
123. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE / STATIC HERMES
124. STATIC HERMES — STATIC HERMES (REACT NATIVE EU 2023 ANNOUNCEMENT) • TZVETAN MIKOV
125. REACT STRICT DOM A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE
126. REACT STRICT DOM ↝ OPPOSITE APPROACH TO react-native-web. ↝ SMALL POLYFILLS RESPONSIBLE FOR TRANSLATING ITS APIS TO REACT-NATIVE AND REACT-DOM PRIMITIVES. ↝ LESS OVERHEAD WHEN RUNNING IN BROWSERS. ↝ POWERED BY STYLEX.
127. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE / REACT STRICT DOM
128. REACT STRICT DOM: BEFORE — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER
129. REACT STRICT DOM: BEFORE — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER
130. REACT STRICT DOM: AFTER — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER
131. THE FUTURE
132. THE FUTURE
134. Lessons Learned A DECADE: REACT’S RHAPSODY OF LIFE /
135. A DECADE: REACT’S RHAPSODY OF LIFE / LESSONS LEARNED #3 of 8 REACT IS A DEMOCRATIC AGENT FOR CS KNOWLEDGE IN OUR REALM. DSLs, COMPILERS, CONCURRENCY, FIBERS, EFFECT HANDLERS, IMMUTABILITY… OH MY!
136. A DECADE: REACT’S RHAPSODY OF LIFE / LESSONS LEARNED #4 of 8 A DOESN'T NECESSARILY IMPLY B. THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS.
137. A DECADE: REACT’S RHAPSODY OF LIFE / LESSONS LEARNED #5 of 8 JSX CREATED A SIMILAR FEELING AMONG DEVELOPERS WORLDWIDE. …IT WAS GOING AGAINST SO MANY BEST PRACTICES THAT IT COULDN'T BE CONSIDERED A GOOD IDEA.
138. A DECADE: REACT’S RHAPSODY OF LIFE / LESSONS LEARNED #6 of 8 REACT IS STILL GOOD ENOUGH FOR MOST OF US. NOTHING IS INHERENTLY BROKEN ABOUT IT. ALSO, IT WILL NEED SOMETHING A LOT BETTER THAN REACT TO REPLACE IT. AND WE’RE NOT THERE (YET).
139. REACT IS STILL GOOD ENOUGH — DISCUSSION ON: IS VDOM STILL FASTER? • MIKE TALBOT
140. REACT IS STILL GOOD ENOUGH — SSR-BENCHMARK • EKIN KOC
141. REACT IS STILL GOOD ENOUGH
142. REACT IS STILL GOOD ENOUGH
143. REACT IS STILL GOOD ENOUGH
144. Guillermo Rauch (2015) “In general, comparing libraries or frameworks in terms of features seems inferior to examining the model it imposes on the programmer. The latter will inform you about how well the code will fare over time as the product matures and the team grows, but the former won’t. It will also empower you to foresee what the evolutionary path of the technology looks like.”
145.  Dan Abramov (2015) “Now that we’re not surprised by virtual DOM anymore and it is being adopted by other frameworks and libraries, we can focus on examining React’s true strengths: composition, unidirectional data fl ow, freedom from DSLs, explicit mutation and static mental model.”
146. “[…] composition, unidirectional data fl ow, explicit mutation and static mental model.” — Do we still have these?
147. A DECADE: REACT’S RHAPSODY OF LIFE / LESSONS LEARNED REPORTS OF A CERTAIN TOOL'S DEATH ARE MOSTLY EXAGGERATED. OUTRAGEOUS CLAIMS, LACK OF EVIDENCE AND JUSTIFICATIONS, AND MORE! #7 of 8
148. — REACT I LOVE YOU, BUT YOU'RE BRINGING ME DOWN • FRANÇOIS ZANINOTTO “REACT IS DYING”
149. “REACT IS DYING” — 2022 STATE OF JS
150. “REACT IS DYING” — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS
151. — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS “REACT IS DYING”
152. — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS “REACT IS DYING”
153. — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS “REACT IS DYING”
154. {SOMETHING} IS DYING — DISCUSSION ON: UNDERESTIMATED PHP • ALEXANDER DYRIAVIN
155. A DECADE: REACT’S RHAPSODY OF LIFE / LESSONS LEARNED DON'T ALWAYS TRUST SPECULATIONS AND PREDICTIONS! AGAIN… REPORTS OF A CERTAIN TOOL'S DEATH ARE MOSTLY EXAGGERATED. #8 of 8
156. THIS IS ME, TEN YEARS AGO, SHOWCASING IONIC AT AN IOS DEVELOPERS MEETUP TELLING THEM THAT ANGULAR WOULD BE THE FUTURE OF MOBILE DEVELOPMENT.
157. Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Staff SWE @ Medallia ↝ ⚡ Google Developer Expert
158. ↑ FEEDBACK WELCOME! Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Staff SWE @ Medallia ↝ ⚡ Google Developer Expert
159. THAT’S ALL, FOLKS! GRAZIE MILLE! 👋 🇮🇹 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS!