Slide 1

Slide 1 text

Building Modern React Applications @glnnrys

Slide 2

Slide 2 text

Glenn Reyes @glnnrys

Slide 3

Slide 3 text

Why do we love building applications? @glnnrys

Slide 4

Slide 4 text

Why do we love building modern applications? @glnnrys

Slide 5

Slide 5 text

It's exciting

Slide 6

Slide 6 text

✨ It's new @glnnrys

Slide 7

Slide 7 text

✨ It's new for a reason @glnnrys

Slide 8

Slide 8 text

Modern apps lets us step out of the comfort zone @glnnrys

Slide 9

Slide 9 text

Modern apps lets us keep moving forward @glnnrys

Slide 10

Slide 10 text

Modern apps lets us be creative @glnnrys

Slide 11

Slide 11 text

Modern apps lets us building great things. @glnnrys

Slide 12

Slide 12 text

Vincent van Gogh “Great things are done by a series of small things brought together.” @glnnrys

Slide 13

Slide 13 text

What is modern?

Slide 14

Slide 14 text

Darrin Alfred In its simplest form, the term modern implies the up-to-date, a current development, or a spirit in step with its own time. @glnnrys

Slide 15

Slide 15 text

Bleeding edge @glnnrys

Slide 16

Slide 16 text

On the web ... @glnnrys

Slide 17

Slide 17 text

On the web there's new libraries every day @glnnrys

Slide 18

Slide 18 text

Anything that came out yesterday is not modern anymore @glnnrys

Slide 19

Slide 19 text

React @glnnrys

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Google Trends

Slide 22

Slide 22 text

State of JS 2018

Slide 23

Slide 23 text

@glnnrys

Slide 24

Slide 24 text

Don't reinvent the wheel No need to set up and configure from scratch @glnnrys

Slide 25

Slide 25 text

CRA Gatsby @glnnrys

Slide 26

Slide 26 text

Others are fine too! Use what works best for you @glnnrys

Slide 27

Slide 27 text

Why? @glnnrys

Slide 28

Slide 28 text

Community Support ❤ @glnnrys

Slide 29

Slide 29 text

Powerful @glnnrys

Slide 30

Slide 30 text

@glnnrys

Slide 31

Slide 31 text

People love solving problems @glnnrys

Slide 32

Slide 32 text

NO PROBLEMS === NO

Slide 33

Slide 33 text

How are problems solved in React today? @glnnrys

Slide 34

Slide 34 text

State management @glnnrys

Slide 35

Slide 35 text

State management @glnnrys

Slide 36

Slide 36 text

@glnnrys

Slide 37

Slide 37 text

@glnnrys Context

Slide 38

Slide 38 text

Kent C. Dodds React is a state management library. @glnnrys

Slide 39

Slide 39 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (

); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); }

Slide 40

Slide 40 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (

); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); } const ThemeContext = React.createContext('light');

Slide 41

Slide 41 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (

); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); } const App = () => ( );

Slide 42

Slide 42 text

const ThemeContext = React.createContext('light'); const App = () => ( ); const Header = () => (

); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); } const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( ); }

Slide 43

Slide 43 text

... ... ... ... ... @glnnrys

Slide 44

Slide 44 text

... ... ... ... ... @glnnrys

Slide 45

Slide 45 text

Context state doesn't need to be globally accessible @glnnrys

Slide 46

Slide 46 text

What's happening? Tweet @glnnrys

Slide 47

Slide 47 text

What's happening? Tweet App @glnnrys

Slide 48

Slide 48 text

What's happening? Tweet FeedContext App @glnnrys

Slide 49

Slide 49 text

What's happening? Tweet UserContext App FeedContext @glnnrys

Slide 50

Slide 50 text

What's happening? Tweet UserContext App FeedContext @glnnrys

Slide 51

Slide 51 text

Put Context state as close as needed @glnnrys

Slide 52

Slide 52 text

What's new in React @glnnrys

Slide 53

Slide 53 text

@glnnrys Hooks

Slide 54

Slide 54 text

import React from 'react'; function Example() { const [count, setCount] = React.useState(0); return (

You clicked {count} times

setCount(count + 1)}> Click me

); }

Slide 55

Slide 55 text

Function components No more stateless components @glnnrys

Slide 56

Slide 56 text

Class components No more stateful components @glnnrys

Slide 57

Slide 57 text

Class components still a thing? @glnnrys

Slide 58

Slide 58 text

Use hooks for new components If the team is fine with it @glnnrys

Slide 59

Slide 59 text

Use hooks for new components If the team is fine with it Keep existing class components Rewrite them into hooks if it makes life easier @glnnrys

Slide 60

Slide 60 text

Experimental Concurrent Mode @glnnrys

Slide 61

Slide 61 text

React Docs Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed. @glnnrys

Slide 62

Slide 62 text

@glnnrys Suspense

Slide 63

Slide 63 text

Suspense lets components wait for something before rendering @glnnrys

Slide 64

Slide 64 text

Suspend the render until new data is loaded from external sources @glnnrys

Slide 65

Slide 65 text

const HeavyComponent = React.lazy(() => import('./HeavyComponent')); const App = () => ( }>

);

Slide 66

Slide 66 text

Other new React features Fragments Error Boundaries React.memo() React.createPortal() DevTools Profiler API @glnnrys

Slide 67

Slide 67 text

Patterns @glnnrys

Slide 68

Slide 68 text

const EnhancedComponent = higherOrderComponent(WrappedComponent); Higher Order Component @glnnrys

Slide 69

Slide 69 text

(

Hello {data.target}

)}/> Render Props @glnnrys

Slide 70

Slide 70 text

import React from 'react'; function Example() { const [count, setCount] = React.useState(0); return (

You clicked {count} times

setCount(count + 1)}> Click me

); } Hooks @glnnrys

Slide 71

Slide 71 text

How do we fetch data in React? @glnnrys

Slide 72

Slide 72 text

Fetch-On-Render @glnnrys

Slide 73

Slide 73 text

// Class component componentDidMount() { fetchData() .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); } Fetch-On-Render @glnnrys

Slide 74

Slide 74 text

// Class component componentDidMount() { fetchUser() .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); } // Function component useEffect(() => { fetchData() .then(data => setState({ data, loading: false })) .catch(error => setState({ error, loading: false })); }, []); Fetch-On-Render @glnnrys

Slide 75

Slide 75 text

Fetch-On-Render @glnnrys Download Code

Slide 76

Slide 76 text

What's happening? Tweet Fetch-On-Render @glnnrys Download Code Fetch User Data Render Loading

Slide 77

Slide 77 text

What's happening? Tweet Fetch-On-Render @glnnrys Download Code Fetch User Data Render Loading Fetch Feed Data Render Loading Render User Data

Slide 78

Slide 78 text

What's happening? Tweet Fetch-On-Render @glnnrys Download Code Fetch User Data Render Loading Fetch Feed Data Render Loading Render User Data Render Feed Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!  Hint: we are using @gatsbyjs Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undeﬁned` is encountered!

Slide 79

Slide 79 text

Fetch-Then-Render @glnnrys

Slide 80

Slide 80 text

// Function component useEffect(() => { Promise.all([ fetchUser(), fetchFeed(), ]) .then(data => this.setState({ data, loading: false })) .catch(error => this.setState({ error, loading: false })); }, []); Fetch-Then-Render @glnnrys

Slide 81

Slide 81 text

Fetch-Then-Render @glnnrys Download Code

Slide 82

Slide 82 text

Fetch-Then-Render @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data What's happening? Tweet

Slide 83

Slide 83 text

Fetch-Then-Render @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data What's happening? Tweet

Slide 84

Slide 84 text

What's happening? Tweet Fetch-Then-Render @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data Render Feed Data Render User Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!  Hint: we are using @gatsbyjs Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undeﬁned` is encountered!

Slide 85

Slide 85 text

Render-As-You-Fetch @glnnrys

Slide 86

Slide 86 text

Render-As-You-Fetch @glnnrys Download Code

Slide 87

Slide 87 text

Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Fetch User Data Render

Slide 88

Slide 88 text

Render-As-You-Fetch Render Render @glnnrys Download Code Fetch Feed Data Fetch User Data What's happening? Tweet Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!  Hint: we are using @gatsbyjs Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undeﬁned` is encountered! Render Feed Data Render User Data

Slide 89

Slide 89 text

Render-As-You-Fetch @glnnrys Download Code

Slide 90

Slide 90 text

Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Fetch User Data Render

Slide 91

Slide 91 text

Render-As-You-Fetch @glnnrys Download Code Render Render Fetch Feed Data Fetch User Data Render Loading What's happening? Tweet

Slide 92

Slide 92 text

Render-As-You-Fetch @glnnrys Download Code Render Render Fetch Feed Data Fetch User Data Render Loading Render Loading What's happening? Tweet

Slide 93

Slide 93 text

Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data Render Render Render Feed Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!  Hint: we are using @gatsbyjs Render Loading Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undeﬁned` is encountered! What's happening? Tweet

Slide 94

Slide 94 text

What's happening? Tweet Render-As-You-Fetch @glnnrys Download Code Fetch Feed Data Render Loading Fetch User Data Render Feed Data Render Render Render User Data Julian Krispel Btw the design of zettel is still very much evolving, if you have opinions lmk Here are some of mine Kyle Boss Who else is here at the #JSFest here in Kyiv, Ukraine? Today I will be sharing how the Web Team at @Tinder created a WordPress blog using #Javascript instead of PHP!  Hint: we are using @gatsbyjs Render Loading Alexandre Gomes Using @GraphQL + @typescript 3.7 beta optional chaining on a pet project Short-circuits deeply-accessed properties as soon as `null/undeﬁned` is encountered!

Slide 95

Slide 95 text

Suspense for Data Fetching not available (in a stable release) yet @glnnrys reactjs.org/concurrent

Slide 96

Slide 96 text

Systems

Slide 97

Slide 97 text

Type systems

Slide 98

Slide 98 text

Why would I need a type system? @glnnrys

Slide 99

Slide 99 text

Why would I need a type system? Confidence Auto suggestions No more prop types @glnnrys

Slide 100

Slide 100 text

https://www.carlrippon.com/why-typescript-with-react @glnnrys

Slide 101

Slide 101 text

@glnnrys

Slide 102

Slide 102 text

Design systems

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

Scales & Theming constraints

Slide 106

Slide 106 text

// example theme.js export default { breakpoints: ['40em', '52em', '64em'], fontSizes: [ 12, 14, 16, 20, 24, 32, 48, 64 ], colors: { blue: '#07c', lightgray: '#f6f6ff' }, space: [ 0, 4, 8, 16, 32, 64, 128, 256 ], fonts: { body: 'system-ui, sans-serif', heading: 'inherit', monospace: 'Menlo, monospace', }, fontWeights: { body: 400, heading: 700, }, buttons: { primary: { color: 'white', bg: 'primary', } } } Beep Boop

Slide 107

Slide 107 text

How do we architect modern React applications using a type system and a design system? @glnnrys

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

How much value will _____ bring? @glnnrys

Slide 110

Slide 110 text

How much time will we save by adding _____ ? @glnnrys

Slide 111

Slide 111 text

Is modern the best? @glnnrys

Slide 112

Slide 112 text

There's a reason why new things keep coming out @glnnrys

Slide 113

Slide 113 text

Keep good practices that worked in the past @glnnrys

Slide 114

Slide 114 text

You don't have to use it because it's new @glnnrys

Slide 115

Slide 115 text

Don't let new things intimidate you @glnnrys

Slide 116

Slide 116 text

Write the best code possible @glnnrys

Slide 117

Slide 117 text

Keep using what you know best @glnnrys

Slide 118

Slide 118 text

Never stop learning @glnnrys

Slide 119

Slide 119 text

Never stop learning new things @glnnrys

Slide 120

Slide 120 text

⚛ reactjs.org/blog/ twitter.com/reactjs github.com/facebook/react/issues ✉ this-week-in-react.org @glnnrys

Slide 121

Slide 121 text

Thank you @glnnrys · glennreyes.com