React: 5 Years Later - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

When I came here ﬁve years ago... React was new and radically diﬀerent 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."

Slide 3

Slide 3 text

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 inﬂuenced by React in fundamental ways.

Slide 4

Slide 4 text

I'm Simon I’m a software engineer, a founder, dad, consultant and trainer. I help companies build cool stuﬀ 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 stuﬀ. /sstur_

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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 💯

Slide 7

Slide 7 text

Let's take a look at how far we’ve come in the past few years ...but ﬁrst, come with me on this journey back to May, 2015.

Slide 8

Slide 8 text

● The Apple Watch has just been released; Airpods don’t exist yet ● The ﬁrst 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

Slide 9

Slide 9 text

But in development world...

Slide 10

Slide 10 text

● 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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Remember “JavaScript Fatigue”?

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

The ecosystem got kinda messy for a while.

Slide 16

Slide 16 text

Really though, React was in its infancy.

Slide 17

Slide 17 text

Let’s talk about interesting stuﬀ that's happened in React world since then.

Slide 18

Slide 18 text

Redux came and went

Slide 19

Slide 19 text

Flow came and went

Slide 20

Slide 20 text

Higher Order Components was a thing

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Do you remember Thunks and Redux-Saga?

Slide 23

Slide 23 text

create-react-app!

Slide 24

Slide 24 text

React kicked oﬀ the "CSS in JS" revolution

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

How 'bout that async/await stuﬀ!

Slide 32

Slide 32 text

Oh yea… and Hooks!

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Naturally, we rewrote everything...

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

React on other Platforms

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

React Native: ● Probably the most inﬂuential 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

Slide 41

Slide 41 text

Expo

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Expo Web

Slide 44

Slide 44 text

Expo Web also supports Electron for Mac and Windows applications

Slide 45

Slide 45 text

And on top of that...

Slide 46

Slide 46 text

Microsoft has announced real React Native support for Windows and Mac

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

React: Looking forward...

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

The future of React Native ● Re-architecture of RN including new render engine (Fabric) ● Hermes JS engine for fast perf on low-powered devices