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.

Transcript

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

   View Slide

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

   View Slide

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.
   

   View Slide

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_
   

   View Slide

5. What I’d like you to take away
   from this talk today.
   

   View Slide

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
   💯
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

9. But in development world...
   

   View Slide

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
    

    View Slide

11. Now that I think about it..
    2015 was a HUGE year for
    developers!
    

    View Slide

12. Remember “JavaScript Fatigue”?
    

    View Slide

13. View Slide

14. Remember Meteor and
    Ember.
    Remember Firefox OS?
    Remember Aurelia?
    (me neither)
    

    View Slide

15. The ecosystem got kinda messy for a while.
    

    View Slide

16. Really though, React was in its infancy.
    

    View Slide

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

    View Slide

18. Redux came and went
    

    View Slide

19. Flow came and went
    

    View Slide

20. Higher Order Components was a thing
    

    View Slide

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

    View Slide

22. Do you remember Thunks and Redux-Saga?
    

    View Slide

23. create-react-app!
    

    View Slide

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

    View Slide

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

    View Slide

26. View Slide

27. View Slide

28. ESLint. Prettier!
    ...the state of excellent tooling
    

    View Slide

29. View Slide

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

    View Slide

31. How 'bout that async/await stuff!
    

    View Slide

32. Oh yea… and
    Hooks!
    

    View Slide

33. View Slide

34. View Slide

35. Hooks:
    ● Cleaner code; less code
    ● No classes or `this`
    ● Composable!
    ● Excellent set of built-in hooks
    ● No more HoC mess
    ● Strongly typed
    

    View Slide

36. Naturally, we rewrote
    everything...
    

    View Slide

37. View Slide

38. React on other
    Platforms
    

    View Slide

39. One of the most exciting things to happen in the React
    ecosystem since we last talked is React Native.
    

    View Slide

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
    

    View Slide

41. Expo
    

    View Slide

42. It's like the missing tooling for
    React Native
    ● Tooling, libraries, SDK
    ● Online playground
    ● Build pipeline
    ● Automation tools
    

    View Slide

43. Expo Web
    

    View Slide

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

    View Slide

45. And on top of that...
    

    View Slide

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

    View Slide

47. View Slide

48. React: Looking forward...
    

    View Slide

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

    View Slide

50. React as been completely rewritten as part
    of the “React Fibers” initiative
    

    View Slide

51. That rewrite unlocks two important future features:
    ● Concurrent Mode - 3 years in the making!
    ● Suspense
    

    View Slide

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
    

    View Slide

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
    

    View Slide

54. This is exciting stuff.
    Why is React still innovative after all these years?
    

    View Slide

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

    View Slide

56. View Slide