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
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”?
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
28. ESLint. Prettier! ...the state of excellent tooling
30. Server-side rendering and static site generators (Gatsby, Next)
31. How 'bout that async/await stuff!
32. Oh yea… and Hooks!
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...
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
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!