Building modern React applications

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.

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

November 09, 2019
Tweet

Transcript

  1. Building Modern React Applications @glnnrys

  2. Glenn Reyes @glnnrys

  3. Why do we love building applications? @glnnrys

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

  5. It's exciting

  6. ✨ It's new @glnnrys

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

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

    @glnnrys
  9. Modern apps lets us keep moving forward @glnnrys

  10. Modern apps lets us be creative @glnnrys

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

  12. Vincent van Gogh “Great things are done by a series

    of small things brought together.” @glnnrys
  13. What is modern?

  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
  15. Bleeding edge @glnnrys

  16. On the web ... @glnnrys

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

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

  19. React @glnnrys

  20. None
  21. Google Trends

  22. State of JS 2018

  23. @glnnrys

  24. Don't reinvent the wheel No need to set up and

    configure from scratch @glnnrys
  25. CRA Gatsby @glnnrys

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

    @glnnrys
  27. Why? @glnnrys

  28. Community Support ❤ @glnnrys

  29. Powerful @glnnrys

  30. @glnnrys

  31. People love solving problems @glnnrys

  32. NO PROBLEMS === NO

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

  34. State management @glnnrys

  35. State management @glnnrys

  36. @glnnrys

  37. @glnnrys Context

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

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

    <ThemeContext.Provider value="dark"> <ProfileHeader /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); }
  40. const ThemeContext = React.createContext('light'); const App = () => (

    <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); } const ThemeContext = React.createContext('light');
  41. const ThemeContext = React.createContext('light'); const App = () => (

    <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); } const App = () => ( <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> );
  42. const ThemeContext = React.createContext('light'); const App = () => (

    <ThemeContext.Provider value="dark"> <Header /> <Content /> <Footer /> </ThemeContext.Provider> ); const Header = () => ( <div> <ThemedButton /> </div> ); const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); } const ThemedButton = () => { const theme = React.useContext(ThemeContext); return ( <Button theme={theme} /> ); }
  43. <App /> <Header /> <Content /> <Footer /> <Articles />

    ... <ThemedButton /> ... ... ... ... <ThemeContext.Provider /> @glnnrys
  44. <App /> <Header /> <Content /> <Footer /> <Articles />

    ... <ThemedButton /> ... ... ... ... <ThemeContext.Provider /> @glnnrys
  45. Context state doesn't need to be globally accessible @glnnrys

  46. What's happening? Tweet @glnnrys

  47. What's happening? Tweet App @glnnrys

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

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

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

  51. Put Context state as close as needed @glnnrys

  52. What's new in React @glnnrys

  53. @glnnrys Hooks

  54. import React from 'react'; function Example() { const [count, setCount]

    = React.useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
  55. Function components No more stateless components @glnnrys

  56. Class components No more stateful components @glnnrys

  57. Class components still a thing? @glnnrys

  58. Use hooks for new components If the team is fine

    with it @glnnrys
  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
  60. Experimental Concurrent Mode @glnnrys

  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
  62. @glnnrys Suspense

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

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

    sources @glnnrys
  65. const HeavyComponent = React.lazy(() => import('./HeavyComponent')); const App = ()

    => ( <React.Suspense fallback={<Loading />}> <div> <HeavyComponent /> </div> </React.Suspense> );
  66. Other new React features Fragments Error Boundaries React.memo() React.createPortal() DevTools

    Profiler API @glnnrys
  67. Patterns @glnnrys

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

  69. <DataProvider render={data => ( <h1>Hello {data.target}</h1> )}/> Render Props @glnnrys

  70. import React from 'react'; function Example() { const [count, setCount]

    = React.useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } Hooks @glnnrys
  71. How do we fetch data in React? @glnnrys

  72. Fetch-On-Render @glnnrys

  73. // Class component componentDidMount() { fetchData() .then(data => this.setState({ data,

    loading: false })) .catch(error => this.setState({ error, loading: false })); } Fetch-On-Render @glnnrys
  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
  75. Fetch-On-Render @glnnrys Download Code

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

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

    Render Loading Fetch Feed Data Render Loading Render User Data
  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!
  79. Fetch-Then-Render @glnnrys

  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
  81. Fetch-Then-Render @glnnrys Download Code

  82. Fetch-Then-Render @glnnrys Download Code Fetch Feed Data Render Loading Fetch

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

    User Data What's happening? Tweet
  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!
  85. Render-As-You-Fetch @glnnrys

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

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

    Data Render
  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
  89. Render-As-You-Fetch @glnnrys Download Code

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

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

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

    User Data Render Loading Render Loading What's happening? Tweet
  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
  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!
  95. Suspense for Data Fetching not available (in a stable release)

    yet @glnnrys reactjs.org/concurrent
  96. Systems

  97. Type systems

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

  99. Why would I need a type system? Confidence Auto suggestions

    No more prop types @glnnrys
  100. https://www.carlrippon.com/why-typescript-with-react @glnnrys

  101. @glnnrys

  102. Design systems

  103. None
  104. None
  105. Scales & Theming constraints

  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', } } } <Button variant="primary" mr={2}>Beep</Button> <Button variant="secondary">Boop</Button>
  107. How do we architect modern React applications using a type

    system and a design system? @glnnrys
  108. None
  109. How much value will _____ bring? @glnnrys

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

    @glnnrys
  111. Is modern the best? @glnnrys

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

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

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

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

  116. Write the best code possible @glnnrys

  117. Keep using what you know best @glnnrys

  118. Never stop learning @glnnrys

  119. Never stop learning new things @glnnrys

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

  121. Thank you @glnnrys · glennreyes.com