Building modern React applications

With the new additions to React, the way we build frontend applications is evolving, leading to improved performance and maintainability. As of today, the most noticeable React API additions are Context, Hooks and Suspense.
How do we apply new best practices to manage our application state?
What are common techniques for fetching data?
How do we architect modern React applications using a type system and a design system?
In this talk, we'll walk through emerging patterns that helps us write exquisite React applications today.

Transcript

1. Building
   Modern React Applications
   @glnnrys
   

   View Slide

2. Glenn Reyes
   @glnnrys
   

   View Slide

3. Why do we love building
   applications?
   @glnnrys
   

   View Slide

4. Why do we love building
   modern applications?
   @glnnrys
   

   View Slide

5. It's exciting
   

   View Slide

6. ✨ It's new
   @glnnrys
   

   View Slide

7. ✨ It's new for a reason
   @glnnrys
   

   View Slide

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

   View Slide

9. Modern apps lets us
   keep moving forward
   @glnnrys
   

   View Slide

10. Modern apps lets us
    be creative
    @glnnrys
    

    View Slide

11. Modern apps lets us building
    great things.
    @glnnrys
    

    View Slide

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

    View Slide

13. What is modern?
    

    View Slide

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

    View Slide

15. Bleeding edge
    @glnnrys
    

    View Slide

16. On the web ...
    @glnnrys
    

    View Slide

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

    View Slide

18. Anything that came out yesterday
    is not modern anymore
    @glnnrys
    

    View Slide

19. React
    @glnnrys
    

    View Slide

20. View Slide

21. Google Trends
    

    View Slide

22. State of JS 2018
    

    View Slide

23. 
    @glnnrys
    

    View Slide

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

    View Slide

25. CRA Gatsby
    @glnnrys
    

    View Slide

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

    View Slide

27. Why?
    @glnnrys
    

    View Slide

28. Community Support ❤
    @glnnrys
    

    View Slide

29. Powerful
    @glnnrys
    

    View Slide

30. @glnnrys
    

    View Slide

31. People love solving problems
    @glnnrys
    

    View Slide

32. NO PROBLEMS === NO
    

    View Slide

33. How are problems
    solved in React today?
    @glnnrys
    

    View Slide

34. State management
    @glnnrys
    

    View Slide

35. State management
    @glnnrys
    

    View Slide

36. @glnnrys
    

    View Slide

37. @glnnrys
    Context
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. 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 (
    
    );
    }
    

    View Slide

43. 
    
    ...
    
    ...
    ... ... ...
    
    @glnnrys
    

    View Slide

44. 
    
    ...
    
    ...
    ... ... ...
    
    @glnnrys
    

    View Slide

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

    View Slide

46. What's happening? Tweet
    @glnnrys
    

    View Slide

47. What's happening? Tweet
    App
    @glnnrys
    

    View Slide

48. What's happening? Tweet
    FeedContext
    App
    @glnnrys
    

    View Slide

49. What's happening? Tweet
    UserContext
    App
    FeedContext
    @glnnrys
    

    View Slide

50. What's happening? Tweet
    UserContext
    App
    FeedContext
    @glnnrys
    

    View Slide

51. Put Context state as
    close as needed
    @glnnrys
    

    View Slide

52. What's new in React
    @glnnrys
    

    View Slide

53. @glnnrys
    Hooks
    

    View Slide

54. import React from 'react';
    function Example() {
    const [count, setCount] = React.useState(0);
    return (
    
    You clicked {count} times
    setCount(count + 1)}>
    Click me
    
    
    );
    }
    

    View Slide

55. Function components
    No more stateless components
    @glnnrys
    

    View Slide

56. Class components
    No more stateful components
    @glnnrys
    

    View Slide

57. Class components still a thing?
    @glnnrys
    

    View Slide

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

    View Slide

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

    View Slide

60. Experimental
    Concurrent Mode
    @glnnrys
    

    View Slide

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

    View Slide

62. @glnnrys
    Suspense
    

    View Slide

63. Suspense lets components
    wait for something
    before rendering
    @glnnrys
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. Patterns
    @glnnrys
    

    View Slide

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

    View Slide

69. (
    Hello {data.target}
    )}/>
    Render Props
    @glnnrys
    

    View Slide

70. import React from 'react';
    function Example() {
    const [count, setCount] = React.useState(0);
    return (
    
    You clicked {count} times
    setCount(count + 1)}>
    Click me
    
    
    );
    }
    Hooks
    @glnnrys
    

    View Slide

71. How do we fetch data
    in React?
    @glnnrys
    

    View Slide

72. Fetch-On-Render
    @glnnrys
    

    View Slide

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

    View Slide

74. // 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
    

    View Slide

75. Fetch-On-Render
    @glnnrys
    Download
    Code
    

    View Slide

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

    View Slide

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

    View Slide

78. 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/undefined` is encountered!
    

    View Slide

79. Fetch-Then-Render
    @glnnrys
    

    View Slide

80. // 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
    

    View Slide

81. Fetch-Then-Render
    @glnnrys
    Download
    Code
    

    View Slide

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

    View Slide

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

    View Slide

84. 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/undefined` is encountered!
    

    View Slide

85. Render-As-You-Fetch
    @glnnrys
    

    View Slide

86. Render-As-You-Fetch
    @glnnrys
    Download
    Code
    

    View Slide

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

    View Slide

88. 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/undefined` is encountered!
    Render
    Feed Data
    Render
    User Data
    

    View Slide

89. Render-As-You-Fetch
    @glnnrys
    Download
    Code
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

93. 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/undefined` is encountered!
    What's happening? Tweet
    

    View Slide

94. 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/undefined` is encountered!
    

    View Slide

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

    View Slide

96. Systems
    

    View Slide

97. Type systems
    

    View Slide

98. Why would I need a type system?
    @glnnrys
    

    View Slide

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

    View Slide

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

     View Slide

101. @glnnrys
     

     View Slide

102. Design systems
     

     View Slide

103. View Slide

104. View Slide

105. Scales & Theming
     constraints
     

     View Slide

106. // 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
     

     View Slide

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

     View Slide

108. View Slide

109. How much value will _____ bring?
     @glnnrys
     

     View Slide

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

     View Slide

111. Is modern the best?
     @glnnrys
     

     View Slide

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

     View Slide

113. Keep good practices
     that worked in the past
     @glnnrys
     

     View Slide

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

     View Slide

115. Don't let new things
     intimidate you
     @glnnrys
     

     View Slide

116. Write the best code possible
     @glnnrys
     

     View Slide

117. Keep using
     what you know best
     @glnnrys
     

     View Slide

118. Never stop
     learning
     @glnnrys
     

     View Slide

119. Never stop
     learning new things
     @glnnrys
     

     View Slide

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

     View Slide

121. Thank you
     @glnnrys · glennreyes.com
     

     View Slide