🇺🇸 React Miami 2024

Slide 1

Slide 1 text

Hello, Miami! 👋 🇺🇸 🌴 A DECADE: REACT’S RHAPSODY OF LIFE • APRIL 19, 2024.

Slide 2

Slide 2 text

MATHEUS ALBUQUERQUE • @ythecombinator A DECADE: REACT’S RHAPSODY OF LIFE

Slide 3

Slide 3 text

Preamble A DECADE: REACT’S RHAPSODY OF LIFE /

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

PAST FUTURE LESSONS LEARNED TROUBLE IN PARADISE

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

The Past A DECADE: REACT’S RHAPSODY OF LIFE /

Slide 8

Slide 8 text

WHAT WERE YOU UP TO BEFORE REACT? A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST

Slide 9

Slide 9 text

THE PAST: THE WEB — THE FORMATION OF FRAMEWORK WAVES FROM THE EPICENTER • SARAH DRASNER

Slide 10

Slide 10 text

THE PAST: THE WEB

Slide 11

Slide 11 text

THE PAST: THE WEB

Slide 12

Slide 12 text

WHAT WERE YOU UP TO BEFORE REACT? A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST

Slide 13

Slide 13 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST

Slide 14

Slide 14 text

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)

Slide 15

Slide 15 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

“With React you can build applications without even thinking about performance and the default state is fast.” Pete Hunt (2013)

Slide 20

Slide 20 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE PAST

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

— WHY REACT ISN'T DYING • DOMINIK (@TKDODO)

Slide 23

Slide 23 text

— REACT.JS: THE DOCUMENTARY • HONEYPOT

Slide 24

Slide 24 text

Trouble in Paradise A DECADE: REACT’S RHAPSODY OF LIFE /

Slide 25

Slide 25 text

“YOU’RE MISSING THE POINT OF…” A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 26

Slide 26 text

A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

CASE IN POINT: CONCURRENT REACT

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

ECOSYSTEM FRICTION A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 32

Slide 32 text

2016 — STREAMING SSR

Slide 33

Slide 33 text

2020/21 — CONCURRENT REACT

Slide 34

Slide 34 text

2022/23 — RSC

Slide 35

Slide 35 text

“NEXT.JS IS EATING REACT” A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 36

Slide 36 text

A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 37

Slide 37 text

“NEXT.JS IS EATING REACT”

Slide 38

Slide 38 text

“NEXT.JS IS EATING REACT”

Slide 39

Slide 39 text

GROWING RESENTMENT A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 40

Slide 40 text

JSX vs. SOC

Slide 41

Slide 41 text

JSX vs. SOC

Slide 42

Slide 42 text

REACTIVITY

Slide 43

Slide 43 text

HOOKS

Slide 44

Slide 44 text

HOOKS

Slide 45

Slide 45 text

HOOKS

Slide 46

Slide 46 text

CONCURRENT REACT

Slide 47

Slide 47 text

REACT SERVER COMPONENTS

Slide 48

Slide 48 text

REACT SERVER COMPONENTS

Slide 49

Slide 49 text

GROWING RESENTMENT

Slide 50

Slide 50 text

GROWING RESENTMENT — REACT IS BECOMING A BLACK BOX • JARED PALMER

Slide 51

Slide 51 text

GROWING RESENTMENT

Slide 52

Slide 52 text

A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #1 of 8 SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES.

Slide 53

Slide 53 text

A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 54

Slide 54 text

A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

Slide 55

Slide 55 text

A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE #1 of 8 SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES.

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

TROUBLE IN PARADISE

Slide 58

Slide 58 text

TROUBLE IN PARADISE

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE REACT PUSHED US TO THE FUTURE. #2 of 8

Slide 62

Slide 62 text

REACT PUSHED US TO THE FUTURE OTHER FRAMEWORKS JSX / VIRTUAL DOM / HMR + FAST REFRESH NAT

Slide 63

Slide 63 text

REACT PUSHED US TO THE FUTURE OUR PLATFORM NATIVE SCHEDULER API / EFFECT HANDLERS* RESH COMPON

Slide 64

Slide 64 text

REACT PUSHED US TO THE FUTURE * COMPON

Slide 65

Slide 65 text

REACT PUSHED US TO THE FUTURE OTHER PLATFORMS FLUTTER / JETPACK COMPOSE / LITHO / SWIFTUI / COMPONENTKIT / YOGA LAYOUT / RESWIFT *

Slide 66

Slide 66 text

Before cars, we had no car accidents.

Slide 67

Slide 67 text

COFFEESCRIPT ↝ ARROW FUNCTIONS

Slide 68

Slide 68 text

EMBER ↝ REACT ROUTER

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

The Future A DECADE: REACT’S RHAPSODY OF LIFE /

Slide 72

Slide 72 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE

Slide 73

Slide 73 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / FAST JSX

Slide 74

Slide 74 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / CPU SUSPENSE

Slide 75

Slide 75 text

THE FUTURE PRESENT ↝ OFFSCREEN ACTIVITY COMPONENT ↝ REACT FORGET COMPILER ↝ OPTIMISTIC STATE UPDATES ↝ RESOURCE PRELOADING ↝ TRANSITION TRACING

Slide 76

Slide 76 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE REACT NATIVE

Slide 77

Slide 77 text

STATIC HERMES A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE

Slide 78

Slide 78 text

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.

Slide 79

Slide 79 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE / STATIC HERMES

Slide 80

Slide 80 text

STATIC HERMES — STATIC HERMES (REACT NATIVE EU 2023 ANNOUNCEMENT) • TZVETAN MIKOV

Slide 81

Slide 81 text

REACT STRICT DOM A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE

Slide 82

Slide 82 text

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.

Slide 83

Slide 83 text

A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE / REACT NATIVE / REACT STRICT DOM

Slide 84

Slide 84 text

THE FUTURE

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Lessons Learned A DECADE: REACT’S RHAPSODY OF LIFE /

Slide 87

Slide 87 text

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!

Slide 88

Slide 88 text

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.

Slide 89

Slide 89 text

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.

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

REACT IS STILL GOOD ENOUGH — DISCUSSION ON: IS VDOM STILL FASTER? • MIKE TALBOT

Slide 92

Slide 92 text

REACT IS STILL GOOD ENOUGH — SSR-BENCHMARK • EKIN KOC

Slide 93

Slide 93 text

REACT IS STILL GOOD ENOUGH

Slide 94

Slide 94 text

REACT IS STILL GOOD ENOUGH

Slide 95

Slide 95 text

REACT IS STILL GOOD ENOUGH

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

“[…] composition, unidirectional data fl ow, explicit mutation and static mental model.” — Do we still have these?

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

— REACT I LOVE YOU, BUT YOU'RE BRINGING ME DOWN • FRANÇOIS ZANINOTTO “REACT IS DYING”

Slide 101

Slide 101 text

“REACT IS DYING” — 2022 STATE OF JS

Slide 102

Slide 102 text

“REACT IS DYING” — NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS

Slide 103

Slide 103 text

— NOTES ON THE NETLIFY WEB DEVELOPER SURVEY • LAURIE VOSS “REACT IS DYING”

Slide 104

Slide 104 text

{SOMETHING} IS DYING — DISCUSSION ON: UNDERESTIMATED PHP • ALEXANDER DYRIAVIN

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

THIS IS ME, TEN YEARS AGO, SHOWCASING IONIC AT AN IOS DEVELOPERS MEETUP TELLING THEM THAT ANGULAR WOULD BE THE FUTURE OF MOBILE DEVELOPMENT.

Slide 107

Slide 107 text

Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @ Medallia ↝ ⚡ Google Developer Expert ↝ ⚽ Soccer Fan, BTW

Slide 108

Slide 108 text

THAT’S ALL, FOLKS! THANKS! 👋 🇺🇸 🌴 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator ↑ ALL THE LINKS!