Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React: 5 Years Later

React: 5 Years Later

This is a talk I gave for Santa Cruz JS on May 14th, 2020. It was titled this way because it was 5 years after I delivered my first talk on React at the same meetup.

A01b931867096ec8874202e233279212?s=128

Simon Sturmer
PRO

May 14, 2020
Tweet

More Decks by Simon Sturmer

Other Decks in Programming

Transcript

  1. React: 5 Years Later Santa Cruz JS 14th May 2020

  2. When I came here five years ago... React was new

    and radically different from other frameworks of the time. I tried to convince you that React is a game changer.. "it will not just change the way you build user interfaces, but change the way you think about UI."
  3. Since then, React has become the de-facto standard in frontend

    development and has impacted the career of almost every JavaScript developer. Even the people in this room who are not using React today are likely using a framework that has been influenced by React in fundamental ways.
  4. I'm Simon I’m a software engineer, a founder, dad, consultant

    and trainer. I help companies build cool stuff with React. I worked at Facebook, I’ve been at Google/YouTube, I’ve hired and trained engineers and founded a consultancy and I’ve built a whole lot of React stuff. /sstur_
  5. What I’d like you to take away from this talk

    today.
  6. Takeaways: • What's the journey been like so far •

    What have we learned • Why is React still #1 • What is new and exciting in React world 💯
  7. Let's take a look at how far we’ve come in

    the past few years ...but first, come with me on this journey back to May, 2015.
  8. • The Apple Watch has just been released; Airpods don’t

    exist yet • The first Macbook with USB-C just announced • Windows 10 not yet released • IE is the #2 browser w/ 10-20% market share; Edge does not exist yet • Barack Obama is president • InstaStories doesn’t exist yet (you have to use Snapchat) • Periscope and Meerkat just started the live-streaming trend • California is totally in a drought • Human contact is still a thing
  9. But in development world...

  10. • ES6 still called "Harmony” • We’re mostly using Gulp

    and Browserify (Webpack is just getting popular) • AngularJS is the most popular web framework by huge margin • CSS in JS is not really a thing • The Node.js community is split in two: io.js / original Node • GraphQL just announced • React is starting to gain popularity • React Native has just been open sourced (iOS only) • Flux is hot! Redux doesn’t exist • Rust 1.0 just got announced
  11. Now that I think about it.. 2015 was a HUGE

    year for developers!
  12. Remember “JavaScript Fatigue”?

  13. None
  14. Remember Meteor and Ember. Remember Firefox OS? Remember Aurelia? (me

    neither)
  15. The ecosystem got kinda messy for a while.

  16. Really though, React was in its infancy.

  17. Let’s talk about interesting stuff that's happened in React world

    since then.
  18. Redux came and went

  19. Flow came and went

  20. Higher Order Components was a thing

  21. Render props kinda replaced HoC (for a bit...)

  22. Do you remember Thunks and Redux-Saga?

  23. create-react-app!

  24. React kicked off the "CSS in JS" revolution

  25. The rise of TypeScript! ...and it's subsequent world domination

  26. None
  27. None
  28. ESLint. Prettier! ...the state of excellent tooling

  29. None
  30. Server-side rendering and static site generators (Gatsby, Next)

  31. How 'bout that async/await stuff!

  32. Oh yea… and Hooks!

  33. None
  34. None
  35. Hooks: • Cleaner code; less code • No classes or

    `this` • Composable! • Excellent set of built-in hooks • No more HoC mess • Strongly typed
  36. Naturally, we rewrote everything...

  37. None
  38. React on other Platforms

  39. One of the most exciting things to happen in the

    React ecosystem since we last talked is React Native.
  40. React Native: • Probably the most influential x-plat mobile solution

    to date. • Any web developer can jump into being a mobile dev • Fully immersive native experiences • Incredible ecosystem of packages • World-class companies are pushing this forward
  41. Expo

  42. It's like the missing tooling for React Native • Tooling,

    libraries, SDK • Online playground • Build pipeline • Automation tools
  43. Expo Web

  44. Expo Web also supports Electron for Mac and Windows applications

  45. And on top of that...

  46. Microsoft has announced real React Native support for Windows and

    Mac
  47. None
  48. React: Looking forward...

  49. Hooks paved the way for “Fast refresh” a hot reloading

    reboot
  50. React as been completely rewritten as part of the “React

    Fibers” initiative
  51. That rewrite unlocks two important future features: • Concurrent Mode

    - 3 years in the making! • Suspense
  52. Concurrent Mode: • Huge shift in the way React internals

    work (demo) • React.lazy for granular control over code splitting • Enables Suspense for more granular control over loading states
  53. The future of React Native • Re-architecture of RN including

    new render engine (Fabric) • Hermes JS engine for fast perf on low-powered devices
  54. This is exciting stuff. Why is React still innovative after

    all these years?
  55. That's my talk! @sstur_ Thanks for listening. Ask me questions!

  56. None