$30 off During Our Annual Pro Sale. View Details »

Building modern React applications

Glenn Reyes
November 09, 2019

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.

Glenn Reyes

November 09, 2019
Tweet

More Decks by Glenn Reyes

Other Decks in Programming

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