🇨🇿 PragueJS 2024 #3

Slide 1

Slide 1 text

Ahoj, PragueJS! 👋 A DECADE: REACT’S RHAPSODY OF LIFE • MARCH 26, 2024.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Preamble A DECADE: REACT’S RHAPSODY OF LIFE /

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

This talk is about… ↝ THE FUTURE ↝ THE PAST ↝ TROUBLE IN PARADISE ↝ CLOSING THOUGHTS

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

THE FUTURE

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

REACT STRICT DOM — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER

Slide 17

Slide 17 text

REACT STRICT DOM — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER

Slide 18

Slide 18 text

REACT STRICT DOM — RFC: REACT DOM FOR NATIVE (REDUCE API FRAGMENTATION) #496 • NICOLAS GALLAGHER

Slide 19

Slide 19 text

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

Slide 20

Slide 20 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 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

THE FUTURE

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

THE PAST

Slide 33

Slide 33 text

THE PAST

Slide 34

Slide 34 text

THE PAST

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

AFTER REACT…

Slide 43

Slide 43 text

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

Slide 44

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 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 50

Slide 50 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 51

Slide 51 text

CONCURRENT REACT

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

STREAMING SERVER-SIDE RENDERING

Slide 54

Slide 54 text

CONCURRENT REACT

Slide 55

Slide 55 text

REACT SERVER COMPONENTS

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

“NEXT.JS IS EATING REACT”

Slide 59

Slide 59 text

“NEXT.JS IS EATING REACT”

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

JSX VS. SOC

Slide 62

Slide 62 text

JSX VS. SOC

Slide 63

Slide 63 text

REACTIVITY

Slide 64

Slide 64 text

HOOKS

Slide 65

Slide 65 text

HOOKS

Slide 66

Slide 66 text

HOOKS

Slide 67

Slide 67 text

CONCURRENT REACT

Slide 68

Slide 68 text

REACT SERVER COMPONENTS

Slide 69

Slide 69 text

REACT SERVER COMPONENTS

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

GROWING RESENTMENT

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

TROUBLE IN PARADISE

Slide 81

Slide 81 text

TROUBLE IN PARADISE

Slide 82

Slide 82 text

Closing Thoughts A DECADE: REACT’S RHAPSODY OF LIFE /

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

A DECADE: REACT’S RHAPSODY OF LIFE / CLOSING THOUGHTS #1 of 5 REACT PUSHED US TO THE FUTURE.

Slide 86

Slide 86 text

REACT PUSHED US TO THE FUTURE

Slide 87

Slide 87 text

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 *

Slide 88

Slide 88 text

Slide 89

Slide 89 text

Slide 90

Slide 90 text

JQUERY ↝ MODERN APIS

Slide 91

Slide 91 text

COFFEESCRIPT ↝ ARROW FUNCTIONS

Slide 92

Slide 92 text

EMBER ↝ REACT ROUTER

Slide 93

Slide 93 text

Before cars, we had no car accidents.

Slide 94

Slide 94 text

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.

Slide 95

Slide 95 text

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.

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

REACT IS STILL GOOD ENOUGH

Slide 99

Slide 99 text

REACT IS STILL GOOD ENOUGH

Slide 100

Slide 100 text

REACT IS STILL GOOD ENOUGH

Slide 101

Slide 101 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 102

Slide 102 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 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

“REACT IS DYING” — 2022 STATE OF JS

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

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