🇨🇿 PragueJS 2024 #3

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. Ahoj, PragueJS! 👋 A DECADE: REACT’S RHAPSODY OF LIFE • MARCH 26, 2024.
2. MATHEUS ALBUQUERQUE • @ythecombinator A DECADE: REACT’S RHAPSODY OF LIFE
3. A DECADE: REACT’S RHAPSODY OF LIFE / Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ ⚛ PC @ React Su m m it NYC ↝ 🧑🏫 Mentor @ TechLabs
4. Preamble A DECADE: REACT’S RHAPSODY OF LIFE /
6. THIS TALK IS ABOUT… OUR STORY WITH REACT DIVERGING PATHS THE PAST MODERN REACT THE FUTURE EARLY YEARS TROUBLE IN PARADISE JSX VS. SEPARATION OF CONCERNS PERF GOLDEN YEARS
7. This talk is about… ↝ THE FUTURE ↝ THE PAST ↝ TROUBLE IN PARADISE ↝ CLOSING THOUGHTS
9. The Future A DECADE: REACT’S RHAPSODY OF LIFE /
10. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
11. THE FUTURE
12. REACT STRICT DOM A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
13. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT STRICT DOM
14. REACT STRICT DOM ↝ POWERED BY STYLEX. ↝ OPPOSITE APPROACH TO REACT NATIVE FOR WEB. ↝ UTILISES WEB APIS TO RENDER COMPONENTS. ↝ SMALL POLYFILLS RESPONSIBLE FOR TRANSLATING ITS APIS TO REACT-NATIVE AND REACT-DOM PRIMITIVES. ↝ LESS OVERHEAD WHEN RUNNING IN BROWSERS.
15. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT STRICT DOM
16. REACT STRICT DOM — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER
17. REACT STRICT DOM — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER
18. REACT STRICT DOM — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER
19. STATIC HERMES A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
20. 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.
21. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / STATIC HERMES
22. STATIC HERMES — STATIC HERMES (REACT NATIVE EU 2023 ANNOUNCEMENT) • TZVETAN MIKOV
23. CPU SUSPENSE A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE
24. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / CPU SUSPENSE
25. CPU SUSPENSE ↝ 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.
26. THE FUTURE PRESENT ↝ REACT FORGET COMPILER ↝ OFFSCREEN ACTIVITY COMPONENT ↝ OPTIMISTIC STATE UPDATES ↝ RESOURCE PRELOADING ↝ TRANSITION TRACING
27. THE FUTURE
30. The Past A DECADE: REACT’S RHAPSODY OF LIFE /
31. WHAT WERE YOU UP TO BEFORE REACT? A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
32. THE PAST
33. THE PAST
34. THE PAST
35. WHAT WERE YOU UP TO BEFORE REACT? A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
36. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
37. 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.
38. 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
39. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
40. THE PAST: FAXJS ↝ SOLVED THE SAME PROBLEMS IN A VERY DIFFERENT WAY. ↝ MUCH MORE FUNCTIONAL; WITH NO MVC ARCHITECTURE AND INTRODUCED THE CONCEPT OF RE-RENDERING WHEN SOMETHING IN THE UI HAS CHANGED. ↝ FUNDAMENTALS WERE BORN, INCLUDING PROPS, STATE, RE-EVALUATING LARGE PORTIONS OF THE TREE TO DIFF THE UI AND THE BASIC CONCEPT OF COMPONENTS.
41. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
42. AFTER REACT…
43. A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST
44. 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. No need to specify how to go from A to B: just describe what A looks like and what B looks like, in a discrete way.”
45. — WHY REACT ISN'T DYING • DOMINIK (@TKDODO)
46. Trouble in Paradise A DECADE: REACT’S RHAPSODY OF LIFE /
47. “YOU’RE MISSING THE POINT OF…” A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
48. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
49.  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.”
50.  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.”
51. CONCURRENT REACT
52. ECOSYSTEM FRICTION A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
53. STREAMING SERVER-SIDE RENDERING
54. CONCURRENT REACT
55. REACT SERVER COMPONENTS
56. “NEXT.JS IS EATING REACT” A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
57. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
58. “NEXT.JS IS EATING REACT”
59. “NEXT.JS IS EATING REACT”
60. GROWING RESENTMENT A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
61. JSX VS. SOC
62. JSX VS. SOC
63. REACTIVITY
64. HOOKS
65. HOOKS
66. HOOKS
67. CONCURRENT REACT
68. REACT SERVER COMPONENTS
69. REACT SERVER COMPONENTS
70. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
71. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
72. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
73. GROWING RESENTMENT — REACT IS BECOMING A BLACK BOX • JARED PALMER
74. GROWING RESENTMENT
75. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #0 of 5 SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES.
76. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
77. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE
78. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #0 of 5 SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES.
79. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #0 of 5 AND SO DO TROUBLE IN PARADISE MOMENTS. WHAT’S DIFFERENT NOW? THROUGH CYCLES.
80. TROUBLE IN PARADISE
81. TROUBLE IN PARADISE
82. Closing Thoughts A DECADE: REACT’S RHAPSODY OF LIFE /
85. A DECADE: REACT’S RHAPSODY OF LIFE / CLOSING THOUGHTS #1 of 5 REACT PUSHED US TO THE FUTURE.
86. REACT PUSHED US TO THE FUTURE
87. REACT PUSHED US TO THE FUTURE OTHER FRAMEWORKS JSX / VIRTUAL DOM / HMR + FAST REFRESH 📱 OTHER PLATFORMS FLUTTER / JETPACK COMPOSE / LITHO / COMPONENTKIT / SWIFTUI / YOGA LAYOUT / RESWIFT 🌐 OUR PLATFORM SCHEDULER API / EFFECT HANDLERS *
88. REACT PUSHED US TO THE FUTURE OTHER FRAMEWORKS JSX / VIRTUAL DOM / HMR + FAST REFRESH 📱 OTHER PLATFORMS FLUTTER / JETPACK COMPOSE / LITHO / COMPONENTKIT / SWIFTUI / YOGA LAYOUT / RESWIFT 🌐 OUR PLATFORM SCHEDULER API / EFFECT HANDLERS *
89. REACT PUSHED US TO THE FUTURE OTHER FRAMEWORKS JSX / VIRTUAL DOM / HMR + FAST REFRESH 📱 OTHER PLATFORMS FLUTTER / JETPACK COMPOSE / LITHO / COMPONENTKIT / SWIFTUI / YOGA LAYOUT / RESWIFT 🌐 OUR PLATFORM SCHEDULER API / EFFECT HANDLERS *
90. JQUERY ↝ MODERN APIS
91. COFFEESCRIPT ↝ ARROW FUNCTIONS
92. EMBER ↝ REACT ROUTER
93. Before cars, we had no car accidents.
94. A DECADE: REACT’S RHAPSODY OF LIFE / CLOSING THOUGHTS #2 of 5 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.
95. A DECADE: REACT’S RHAPSODY OF LIFE / CLOSING THOUGHTS #3 of 5 A DOESN'T NECESSARILY IMPLY B. THERE'S NO SILVER BULLET. IDENTIFY YOUR CORE METRICS.
96. A DECADE: REACT’S RHAPSODY OF LIFE / CLOSING THOUGHTS #4 of 5 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).
97. — DISCUSSION ON: IS VDOM STILL FASTER? • MIKE TALBOT
98. REACT IS STILL GOOD ENOUGH
99. REACT IS STILL GOOD ENOUGH
100. REACT IS STILL GOOD ENOUGH
101. 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.”
102.  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.”
103. A DECADE: REACT’S RHAPSODY OF LIFE / CLOSING THOUGHTS REPORTS OF A CERTAIN TOOL'S DEATH ARE MOSTLY EXAGGERATED. OUTRAGEOUS CLAIMS, ANECDOTAL REFERENCES, LACKING EVIDENCE AND JUSTIFICATIONS, AND MUCH MORE! #5 of 5
104. — REACT I LOVE YOU, BUT YOU'RE BRINGING ME DOWN • FRANÇOIS ZANINOTTO “REACT IS DYING”
105. “REACT IS DYING” — 2022 STATE OF JS
106. “REACT IS DYING” — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS
107. — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS “REACT IS DYING”
108. — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS “REACT IS DYING”
109. — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS “REACT IS DYING”
110. {SOMETHING} IS DYING — DISCUSSION ON: UNDERESTIMATED PHP • ALEXANDER DYRIAVIN
112. THAT’S ALL, FOLKS! THANKS! 👋 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS!