Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

🇺🇸 React Miami 2024

🇺🇸 React Miami 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!

Matheus Albuquerque

April 19, 2024
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. THE PAST: THE WEB — THE FORMATION OF FRAMEWORK WAVES

    FROM THE EPICENTER • SARAH DRASNER
  2. 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)
  3. 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)
  4. “With React you can build applications without even thinking about

    performance and the default state is fast.” Pete Hunt (2013)
  5. 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.”
  6.  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.”
  7.  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.”
  8. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

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

    #1 of 8 SOFTWARE DEVELOPMENT CONTINUALLY GOES THROUGH CYCLES.
  10. 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.
  11. A DECADE: REACT’S RHAPSODY OF LIFE / TROUBLE IN PARADISE

    REACT PUSHED US TO THE FUTURE. #2 of 8
  12. REACT PUSHED US TO THE FUTURE OTHER FRAMEWORKS JSX /

    VIRTUAL DOM / HMR + FAST REFRESH NAT
  13. REACT PUSHED US TO THE FUTURE OTHER PLATFORMS FLUTTER /

    JETPACK COMPOSE / LITHO / SWIFTUI / COMPONENTKIT / YOGA LAYOUT / RESWIFT *
  14. THE FUTURE PRESENT ↝ OFFSCREEN ACTIVITY COMPONENT ↝ REACT FORGET

    COMPILER ↝ OPTIMISTIC STATE UPDATES ↝ RESOURCE PRELOADING ↝ TRANSITION TRACING
  15. 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.
  16. 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.
  17. A DECADE: REACT’S RHAPSODY OF LIFE / THE FUTURE /

    REACT NATIVE / REACT STRICT DOM
  18. 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!
  19. 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.
  20. 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.
  21. 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).
  22. 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.”
  23.  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.”
  24. 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
  25. — REACT I LOVE YOU, BUT YOU'RE BRINGING ME DOWN

    • FRANÇOIS ZANINOTTO “REACT IS DYING”
  26. 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
  27. THIS IS ME, TEN YEARS AGO, SHOWCASING IONIC AT AN

    IOS DEVELOPERS MEETUP TELLING THEM THAT ANGULAR WOULD BE THE FUTURE OF MOBILE DEVELOPMENT.
  28. Matheus Albuquerque ↝ 𝕏 ythecombinator ↝ 👨💻 Sr. SWE @

    Medallia ↝ ⚡ Google Developer Expert ↝ ⚽ Soccer Fan, BTW