React Architecture at Product Hunt

Transcript

1. Product Hunt
   React Architecture
   Radoslav Stankov 11/11/2021
   

   View Slide

2. !
   

   View Slide

3. Radoslav Stankov
   @rstankov
   blog.rstankov.com

   twitter.com/rstankov

   github.com/rstankov

   speakerdeck.com/rstankov
   

   View Slide

4. View Slide

5. Product Hunt
   React Architecture
   Radoslav Stankov 11/11/2021
   

   View Slide

6. View Slide

7. https://speakerdeck.com/rstankov
   Thanks "
   

   View Slide

8. Architecture
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. # Frontend Tech Stack
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. $ Have good defaults
    % Have good code organization
    & Make common operations easy
    ' Isolate dependencies
    ( Extensibility and reusability
    

    View Slide

23. $ Have good defaults
    % Have good code organization
    & Make common operations easy
    ' Isolate dependencies
    ( Extensibility and reusability
    

    View Slide

24. View Slide

25. View Slide

26. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

27. 2
    1 3
    Support Components Pages
    

    View Slide

28. Support
    Components
    Pages
    

    View Slide

29. 1) Support 2) Components 3) Pages
    

    View Slide

30. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

31. 1 Support
    components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

32. 1 Support
    Components
    2
    components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

33. 1 Support
    Components
    Pages
    2
    3
    components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

34. 1
    Support
    

    View Slide

35. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

36. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

37. import getNextConfig from 'next/config';
    const config = getNextConfig() as any;
    // ... other configuration
    export const environment = {
    isTest: config.publicRuntimeConfig.NODE_ENV === 'test',
    isProduction: config.publicRuntimeConfig.NODE_ENV ===
    'production',
    isBrowser: !!process.browser,
    };
    config.ts
    

    View Slide

38. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

39. apollo client:codegen \
    --localSchemaFile="graphql/schema.json" \
    --addTypename \
    --tagName=gql \
    --target=typescript \
    --includes="{components,screens,utils,hooks,layouts}/**/*.{tsx,ts}" \
    --outputFlat="graphql/types.ts"
    

    View Slide

40. View Slide

41. components/Profile/Avatar/Fragment.ts
    import gql from 'graphql-tag';
    export default gql`
    fragment ProfileAvatarFragment on Profile {
    id
    name
    kind
    imageUrl
    }
    `;
    

    View Slide

42. // ====================================================
    // GraphQL fragment: ProfileAvatarFragment
    // ====================================================
    export interface ProfileAvatarFragment {
    __typename: "Profile";
    id: string;
    name: string;
    kind: string;
    imageUrl: string | null;
    }
    graphql/types.ts
    

    View Slide

43. import { ProfileAvatarFragment } from '~/graphql/types';
    

    View Slide

44. View Slide

45. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

46. View Slide

47. useKey()
    useIsMounted()
    useTimeout()

    

    useHideOnTop()
    

    View Slide

48. useGraphQLFragment()
    useViewier()
    useIsLoggedIn()
    

    View Slide

49. useGraphQLFragment()
    useViewier()
    useIsLoggedIn()
    

    View Slide

50. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

51. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

52. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

53. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

54. View Slide

55. import { format } from 'date-fns';
    export function formatDateTime(date: string) {
    return format(date, 'H:mm A · MMM D, YYYY');
    }
    utils/date.ts
    

    View Slide

56. moment date.ts Component Page
    

    View Slide

57. date.ts Component Page
    date-fns
    

    View Slide

58. utils/
    external/
    Intercom/
    OneSignal/
    Segment/
    Sentry/
    

    View Slide

59. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

60. 2
    Components
    

    View Slide

61. components/
    graphql/
    hooks/
    layouts/
    pages/
    screens/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

62. View Slide

63. ) Component as directory
    components/
    Component/
    SubComponent/
    Fragment.graphql
    Mutation.graphql
    icon.svg
    index.js
    styles.css
    utils.js
    

    View Slide

64. View Slide

65. import * as React from "react";
    import Text from "components/Text";
    {text}
    

    View Slide

66. import * as React from "react";
    import styles from "./styles.css";
    export function Text({ children }) {
    return (
    
    {children}
    
    );
    }
    components/Text/index.tsx
    

    View Slide

67. CSS
    // style.css
    .text {
    font-size: 14px;
    }
    CSS
    // component.js

    import styles from './styles.css';
    
    
    CSS
    // style.css
    .text_3mRwv {
    font-size: 14px;
    }
    CSS
    // result.js
    
    

    

    View Slide

68. import * as React from "react";
    import Text from "components/Text";
    text
    // -> text
    

    View Slide

69. import * as React from "react";
    import Text from "components/Text";
    text
    // -> text
    text
    // -> text
    

    View Slide

70. import * as React from "react";
    import styles from "./styles.css";
    export function Text({ as, ...props }) {
    Component = as || "span";
    return ;
    }
    ) Pass custom component as prop
    

    View Slide

71. import * as React from "react";
    import Text from "components/Text";
    text
    // -> Text
    

    View Slide

72. import * as React from "react";
    import Text from "components/Text";
    import styles from "./styles.css";
    text
    // -> text
    

    View Slide

73. import * as React from "react";
    import styles from "./styles.css";
    import classNames from "classnames";
    export function Text({ as, className, ...props }) {
    Component = as || "span";

    return }
    ) Pass extra class name
    

    View Slide

74. yarn install "classnames"
    

    View Slide

75. import * as React from "react";
    import Text from "components/Text";
    text
    // -> text
    text
    // -> text
    

    View Slide

76. View Slide

77. View Slide

78. 
    
    
    
    
    

    
    
    
    

    View Slide

79. Input
    

    View Slide

80. Input Loading
    

    View Slide

81. Input Loading
    Success
    

    View Slide

82. Input Loading
    Success
    Errors
    

    View Slide

83. Submit Server
    Success
    Errors
    

    View Slide

84. remoteCall Server
    { result: 'ok' }
    { errors: {…} }
    

    View Slide

85. remoteCall Server
    { result: 'ok' }
    { 

    errors: {
    field1: 'error1',

    field2: 'error2'

    }

    }
    

    View Slide

86. { 

    errors: {
    field1: 'error1',

    field2: 'error2'

    }

    }
    

    View Slide

87. { 

    errors: {
    field1: 'error1',

    field2: 'error2'

    }

    }
    

    View Slide

88. mutation UserSettingsUpdate($input: UserSettingsUpdateInp
    response: userSettingsUpdate(input: $input) {
    node {
    id
    ...MySettingsPageViewer
    }
    errors {
    field
    message
    }
    }
    }
    

    View Slide

89. mutation UserSettingsUpdate($input: UserSettingsUpdateInp
    response: userSettingsUpdate(input: $input) {
    node {
    id
    ...MySettingsPageViewer
    }
    errors {
    field
    message
    }
    }
    }
    

    View Slide

90. 
    
    
    
    
    

    
    
    
    

    View Slide

91. 
    
    
    
    
    

    
    
    
    

    View Slide

92. View Slide

93. Which is the form
    library we are
    using?!
    

    View Slide

94. View Slide

95. View Slide

96. *
    

    View Slide

97. *
    

    View Slide

98. *
    

    View Slide

99. + unified styles
    , common interface
    - custom inputs
    . understand backend GraphQL
    / Form
    

    View Slide

100. View Slide

101. href={paths.profile(profile)} />
     

     View Slide

102. href={paths.profile(profile)} />
     onClick={onClickReturnsPromise} />
     

     View Slide

103. href={paths.profile(profile)} />
     onClick={onClickReturnsPromise} />
     confirm="Are you sure?"
     mutation={DELETE_MUTATION}
     input={{ id }}
     onMutate={redirectSomeWhere} />
     

     View Slide

104. href={paths.profile(profile)} />
     onClick={onClickReturnsPromise} />
     confirm="Are you sure?"
     mutation={DELETE_MUTATION}
     input={{ id }}
     onMutate={redirectSomeWhere} />
     

     View Slide

105. 
     
     
     
     

     View Slide

106. const clickHandler = useOnClick({
     disabled,
     confirm,
     requireLogin,
     mutation,
     input,
     onMutate,
     onMutateError,
     optimisticResponse,
     update,
     updateQueries,
     refetchQueries,
     onClick,
     trackingComponent,
     trackingData,
     });
     

     View Slide

107. Utility
     Styling
     Domain
     

     View Slide

108. View Slide

109. VoteButton Button
     

     View Slide

110. Domain Component
     

     View Slide

111. PostItem Like Button
     

     View Slide

112. Domain Component
     
     

     

     

     
     
     
     

     
     

     

     

     

     
     

     

     
     

     
     
     

     View Slide

113. Atomic Design
     

     View Slide

114. ...Kinda 0
     

     View Slide

115. 1 generic components
     - domain components
     

     View Slide

116. 3
     Pages
     

     View Slide

117. components/
     graphql/
     hooks/
     layouts/
     pages/
     screens/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

118. export default {
     root: () => '/',
     static: {
     about() => '/about',
     // ...
     }
     profiles: {
     people: () => '/people',
     show: ({ slug }: { slug: string }) => `/@${slug}`,
     // ...
     },
     // ...
     };
     path.ts
     

     View Slide

119. import paths from 'ph/paths';
     

     paths.root(); // => /
     paths.static.about(); // => /about/
     paths.profiles.people(); // => /people
     paths.profiles.show(profile); // => /@rstankov
     

     View Slide

120. components/
     graphql/
     hooks/
     layouts/
     pages/
     screens/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

121. View Slide

122. View Slide

123. View Slide

124. View Slide

125. components/
     graphql/
     hooks/
     layouts/
     pages/
     screens/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

126. 2
     components/
     graphql/
     hooks/
     layouts/
     pages/
     screens/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

127. View Slide

128. pages/profiles/[slug]/index.ts
     

     View Slide

129. import page from '~/screens/profiles/show';
     export default page;
     pages/profiles/[slug]/index.ts
     

     View Slide

130. import page from '~/screens/profiles/show';
     export default page;
     pages/profiles/[slug]/index.ts
     3
     

     View Slide

131. components/
     graphql/
     hooks/
     layouts/
     pages/
     screens/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

132. Component as directory
     screens/
     profiles/
     show/
     SubComponent1/
     SubComponent2/
     Query.graphql
     index.js
     styles.css
     utils.js
     

     View Slide

133. View Slide

134. Loading State
     Page Life Cycle
     

     View Slide

135. Loading State
     Page Life Cycle
     

     View Slide

136. Loading State
     Error State
     Page Life Cycle
     

     View Slide

137. Loading State
     Not Found Error
     Server Error
     Authorization
     Error
     Authentication
     Error
     Error State
     Page Life Cycle
     

     View Slide

138. Loading State
     Not Found Error
     Server Error
     Authorization
     Error
     Authentication
     Error
     Error State
     Loaded State
     Page Life Cycle
     

     View Slide

139. Loading State
     Not Found Error
     Server Error
     Authorization
     Error
     Authentication
     Error
     SEO
     Error State
     Analytics
     Loaded State
     Page Life Cycle
     ???
     

     View Slide

140. Loading State
     Not Found Error
     Server Error
     Authorization
     Error
     Authentication
     Error
     SEO
     Error State
     Analytics
     Loaded State
     render
     Page Life Cycle
     ???
     

     View Slide

141. import createPage from '~/utils/createPage';
     import ProfileLayout from '~/layouts/Profile';
     import { ProfileShowPage } from '~/graphql/types';
     import QUERY from './Query';
     export default createPage({
     query: QUERY,
     queryVariables: ({ slug }) => ({ slug }),
     requireLogin: true,
     requirePermissions: ({ profile }) => profile.canManage,
     requireFeature: 'feature_flag',
     tags: ({ profile }) => profile.seoTags,
     title: ({ profile }) => profile.name,
     component: ({ data: { profile } }) => (
     {...}
     ),
     });
     

     View Slide

142. import createPage from '~/utils/createPage';
     import ProfileLayout from '~/layouts/Profile';
     import { ProfileShowPage } from '~/graphql/types';
     import QUERY from './Query';
     export default createPage({
     query: QUERY,
     queryVariables: ({ slug }) => ({ slug }),
     requireLogin: true,
     requirePermissions: ({ profile }) => profile.canManage,
     requireFeature: 'feature_flag',
     tags: ({ profile }) => profile.seoTags,
     title: ({ profile }) => profile.name,
     component: ({ data: { profile } }) => (
     {...}
     ),
     });
     

     View Slide

143. import createPage from '~/utils/createPage';
     import ProfileLayout from '~/layouts/Profile';
     import { ProfileShowPage } from '~/graphql/types';
     import QUERY from './Query';
     export default createPage({
     query: QUERY,
     queryVariables: ({ slug }) => ({ slug }),
     requireLogin: true,
     requirePermissions: ({ profile }) => profile.canManage,
     requireFeature: 'feature_flag',
     tags: ({ profile }) => profile.seoTags,
     title: ({ profile }) => profile.name,
     component: ({ data: { profile } }) => (
     {...}
     ),
     });
     

     View Slide

144. import createPage from '~/utils/createPage';
     import ProfileLayout from '~/layouts/Profile';
     import { ProfileShowPage } from '~/graphql/types';
     import QUERY from './Query';
     export default createPage({
     query: QUERY,
     queryVariables: ({ slug }) => ({ slug }),
     requireLogin: true,
     requirePermissions: ({ profile }) => profile.canManage,
     requireFeature: 'feature_flag',
     tags: ({ profile }) => profile.seoTags,
     title: ({ profile }) => profile.name,
     component: ({ data: { profile } }) => (
     {...}
     ),
     });
     

     View Slide

145. import createPage from '~/utils/createPage';
     import ProfileLayout from '~/layouts/Profile';
     import { ProfileShowPage } from '~/graphql/types';
     import QUERY from './Query';
     export default createPage({
     query: QUERY,
     queryVariables: ({ slug }) => ({ slug }),
     requireLogin: true,
     requirePermissions: ({ profile }) => profile.canManage,
     requireFeature: 'feature_flag',
     tags: ({ profile }) => profile.seoTags,
     title: ({ profile }) => profile.name,
     component: ({ data: { profile } }) => (
     {...}
     ),
     });
     

     View Slide

146. import createPage from '~/utils/createPage';
     import ProfileLayout from '~/layouts/Profile';
     import { ProfileShowPage } from '~/graphql/types';
     import QUERY from './Query';
     export default createPage({
     query: QUERY,
     queryVariables: ({ slug }) => ({ slug }),
     requireLogin: true,
     requirePermissions: ({ profile }) => profile.canManage,
     requireFeature: 'feature_flag',
     tags: ({ profile }) => profile.seoTags,
     title: ({ profile }) => profile.name,
     component: ({ data: { profile } }) => (
     {...}
     ),
     });
     

     View Slide

147. http://graphql.org/
     

     View Slide

148. View Slide

149. ProfileLayout
     Header
     Fragment
     ProfileLayout
     Sidebar
     Fragment
     ProfileShowPage
     

     View Slide

150. Avatar
     Fragment
     PostItemFragment
     CommentFragment
     ProfileLayout

     SidebarInfo

     Fragment
     

     View Slide

151. Query
     Fragm Fragm
     Fragm
     Fragm
     Fragm
     Fragm
     

     View Slide

152. #import "ph/utils/seo/MetaTagsFragment.graphql"
     #import "ph/components/PostItemList/Framgent.graphql"
     #import "ph/layouts/Profile/Fragment.graphql"
     query ProfileShowPage(
     $cursor: String
     $username: String!
     $query: String
     ) {
     user(username: $username) {
     id
     votesCount
     votedPosts(first: 20, after: $cursor, query: $query) {
     edges {
     node {
     id
     ...PostItemListFragment
     }
     }
     pageInfo {
     endCursor
     hasNextPage
     }
     }
     ...MetaTags
     ...ProfileLayoutFragment
     }
     }
     

     View Slide

153. View Slide

154. Recap
     

     View Slide

155. - GraphQL
     $ Components
     4 isolating dependancies
     ( directory as folder
     . domain components
     + Pages
     , paths helper
     ' layouts
     & createPage
     5 Recap
     

     View Slide

156. View Slide

157. View Slide

158. Thanks "
     

     View Slide

159. https://speakerdeck.com/rstankov
     Thanks "
     

     View Slide

160. View Slide