React Architecture in Product Hunt

Talk was given at React Alicante 2019 (https://reactalicante.es)

Video of the talk 👉 https://www.youtube.com/watch?v=bo0u9402OXU

Transcript

1. September 2019
   React Architecture
   In Product Hunt
   Radoslav Stankov
   

   View Slide

2. Thanks to our sponsors!
   

   View Slide

3. Radoslav Stankov
   @rstankov
   
   blog.rstankov.com
   
   github.com/rstankov

   twitter.com/rstankov
   

   View Slide

4. View Slide

5. View Slide

6. Architecture
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. 

    Engineering Team !
    

    

    View Slide

11. 

    " Architecture History
    

    

    View Slide

12. 

    " Architecture History
    

    2014
    

    View Slide

13. 

    " Architecture History
    

    2014 2015
    

    View Slide

14. 

    " Architecture History
    

    2014 2015 2016
    

    View Slide

15. 

    " Architecture History
    

    2014 2015 2016 2017
    

    View Slide

16. 

    " Architecture History
    

    2014 2019
    2015 2016 2017
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. 

    # Frontend Tech Stack
    

    

    View Slide

22. 

    # Frontend Tech Stack
    

    $
    

    View Slide

23. 

    # Frontend Tech Stack
    

    $
    

    View Slide

24. 

    # Frontend Tech Stack
    

    $
    

    View Slide

25. 

    # Frontend Tech Stack
    

    $
    

    View Slide

26. 

    # Frontend Tech Stack
    

    %
    

    View Slide

27. 

    # Frontend Tech Stack
    

    

    View Slide

28. 

    # Frontend Tech Stack
    

    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. & Have good defaults
    ' Have good code organization
    ( Make common operations easy
    ) Isolate dependencies
    * Extensibility and reusability
    

    View Slide

34. & Have good defaults
    ' Have good code organization
    ( Make common operations easy
    ) Isolate dependencies
    * Extensibility and reusability
    

    View Slide

35. View Slide

36. View Slide

37. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

38. 2
    1 3
    Support Components Pages
    

    View Slide

39. Support
    Components
    Pages
    

    View Slide

40. 1) Support 2) Components 3) Pages
    

    View Slide

41. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. 1
    Support
    

    View Slide

46. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

47. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

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

49. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

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

    View Slide

51. View Slide

52. 

    components/Profile/Avatar/Fragment.ts

    import gql from 'graphql-tag';
    export default gql`
    fragment ProfileAvatarFragment on Profile {
    id
    name
    kind
    imageUrl
    }
    `;
    

    View Slide

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

    graphql/types.ts

    

    View Slide

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

    View Slide

55. View Slide

56. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

57. View Slide

58. useKey()
    useIsMounted()
    useTimeout()

    

    useHideOnTop()
    

    View Slide

59. useGraphQLFragment()
    useViewier()
    useIsLoggedIn()
    

    View Slide

60. useGraphQLFragment()
    useViewier()
    useIsLoggedIn()
    

    View Slide

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

    View Slide

62. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

63. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

64. View Slide

65. import formatCount from './formatCount';
    describe(formatCount.name, () => {
    it('does proper pluralization', () => {
    expect(formatCount(0, 'item')).toEqual('0 items');
    expect(formatCount(1, 'item')).toEqual('1 item');
    expect(formatCount(10, 'items')).toEqual('10 items');
    });
    it('formats 1000-9999 as Ks', () => {
    expect(formatCount(1000)).toEqual('1K');
    expect(formatCount(1500)).toEqual('1.5K');
    });
    // ....
    });
    

    utils/formatCount.test.ts

    

    View Slide

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

    utils/date.ts

    

    View Slide

67. moment date.ts Component Page
    

    View Slide

68. date.ts Component Page
    date-fns
    

    View Slide

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

    View Slide

70. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

71. 2
    Components
    

    View Slide

72. components/
    graphql/
    hooks/
    layouts/
    pages/
    routes/
    server/
    static/
    styles/
    types/
    utils/
    config.ts
    paths.ts
    

    View Slide

73. View Slide

74. 

    + Component as directory
    

    components/
    Component/
    SubComponent/
    Fragment.graphql
    Mutation.graphql
    icon.svg
    index.js
    styles.css
    utils.js
    

    View Slide

75. View Slide

76. import * as React from "react";
    import Font from "components/Font";
    {text}
    

    View Slide

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

    components/Font/index.tsx

    

    View Slide

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

79. import * as React from "react";
    import Font from "components/Font";
    text
    // -> text
    

    View Slide

80. import * as React from "react";
    import Font from "components/Font";
    text
    // -> text
    text
    // -> text
    

    View Slide

81. import * as React from "react";
    import Font from "components/Font";
    text
    // -> text
    text
    // -> text
    text
    // -> text
    

    View Slide

82. import * as React from "react";
    import Font from "components/Font";
    text
    // -> text
    text
    // -> text
    text
    // -> text
    

    + Pass custom component as prop
    

    

    View Slide

83. import * as React from "react";
    import styles from "./styles.css";
    export function Text({ component, children, ...props }) {
    Component = component || "span";

    return (
    
    {children}
    
    );
    }
    

    + Pass custom component as prop
    

    

    View Slide

84. import * as React from "react";
    import styles from "./styles.css";
    export function Text({ component, children, ...props }) {
    Component = component || "span";

    return (
    
    {children}
    
    );
    }
    $
    

    + Pass custom component as prop
    

    

    View Slide

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

    + Pass custom component as prop
    

    

    View Slide

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

    View Slide

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

    View Slide

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

    + Pass extra class name
    

    

    View Slide

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

    return ;
    }
    

    + Pass extra class name
    

    

    View Slide

90. yarn install "classnames"
    

    View Slide

91. View Slide

92. View Slide

93. 
    
    
    
    
    

    
    
    
    

    View Slide

94. Input
    

    View Slide

95. Input Loading
    

    View Slide

96. Input Loading
    Success
    

    View Slide

97. Input Loading
    Success
    Errors
    

    View Slide

98. Submit Server
    Success
    Errors
    

    View Slide

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

    View Slide

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

     errors: {
     field1: 'error1',

     field2: 'error2'

     }

     }
     

     View Slide

101. { 

     errors: {
     field1: 'error1',

     field2: 'error2'

     }

     }
     

     View Slide

102. { 

     errors: {
     field1: 'error1',

     field2: 'error2'

     }

     }
     

     View Slide

103. mutation UserSettingsUpdate($input: UserSettingsUpdateInput!) {
     response: userSettingsUpdate(input: $input) {
     node {
     id
     ...MySettingsPageViewer
     }
     errors {
     field
     message
     }
     }
     }
     

     View Slide

104. mutation UserSettingsUpdate($input: UserSettingsUpdateInput!) {
     response: userSettingsUpdate(input: $input) {
     node {
     id
     ...MySettingsPageViewer
     }
     errors {
     field
     message
     }
     }
     }
     

     View Slide

105. 
     
     
     
     
     

     
     
     
     

     View Slide

106. View Slide

107. import { TopicSearch_Topic as ITopic } from '~/graphql/types';
     import ItemList from './ItemList'
     import QUERY from './Query';
     import SearchResultItem from './SearchResultItem'
     import { IFormArrayFields } from '~/components/Form/types';
     import { useLoadTopicsIds } from './utils';
     interface IProps {
     fields: IFormArrayFields;
     }
     export default function TopicsInput({ fields }: IProps) {
     const addTopic = (topic: ITopic) => {
     fields.value.includes(topic.id) && fields.push(topic.id);
     }
     const removeTopic = (topic: ITopic) => {
     fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     

     View Slide

108. import { TopicSearch_Topic as ITopic } from '~/graphql/types';
     import ItemList from './ItemList'
     import QUERY from './Query';
     import SearchResultItem from './SearchResultItem'
     import { IFormArrayFields } from '~/components/Form/types';
     import { useLoadTopicsIds } from './utils';
     interface IProps {
     fields: IFormArrayFields;
     }
     export default function TopicsInput({ fields }: IProps) {
     const addTopic = (topic: ITopic) => {
     fields.value.includes(topic.id) && fields.push(topic.id);
     }
     const removeTopic = (topic: ITopic) => {
     fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     

     View Slide

109. import { TopicSearch_Topic as ITopic } from '~/graphql/types';
     import ItemList from './ItemList'
     import QUERY from './Query';
     import SearchResultItem from './SearchResultItem'
     import { IFormArrayFields } from '~/components/Form/types';
     import { useLoadTopicsIds } from './utils';
     interface IProps {
     fields: IFormArrayFields;
     }
     export default function TopicsInput({ fields }: IProps) {
     const addTopic = (topic: ITopic) => {
     fields.value.includes(topic.id) && fields.push(topic.id);
     }
     const removeTopic = (topic: ITopic) => {
     fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     

     View Slide

110. import { TopicSearch_Topic as ITopic } from '~/graphql/types';
     import ItemList from './ItemList'
     import QUERY from './Query';
     import SearchResultItem from './SearchResultItem'
     import { IFormArrayFields } from '~/components/Form/types';
     import { useLoadTopicsIds } from './utils';
     interface IProps {
     fields: IFormArrayFields;
     }
     export default function TopicsInput({ fields }: IProps) {
     const addTopic = (topic: ITopic) => {
     fields.value.includes(topic.id) && fields.push(topic.id);
     }
     const removeTopic = (topic: ITopic) => {
     fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     

     View Slide

111. import { TopicSearch_Topic as ITopic } from '~/graphql/types';
     import ItemList from './ItemList'
     import QUERY from './Query';
     import SearchResultItem from './SearchResultItem'
     import { IFormArrayFields } from '~/components/Form/types';
     import { useLoadTopicsIds } from './utils';
     interface IProps {
     fields: IFormArrayFields;
     }
     export default function TopicsInput({ fields }: IProps) {
     const addTopic = (topic: ITopic) => {
     fields.value.includes(topic.id) && fields.push(topic.id);
     }
     const removeTopic = (topic: ITopic) => {
     fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     

     View Slide

112. import { TopicSearch_Topic as ITopic } from '~/graphql/types';
     import ItemList from './ItemList'
     import QUERY from './Query';
     import SearchResultItem from './SearchResultItem'
     import { IFormArrayFields } from '~/components/Form/types';
     import { useLoadTopicsIds } from './utils';
     interface IProps {
     fields: IFormArrayFields;
     }
     export default function TopicsInput({ fields }: IProps) {
     const addTopic = (topic: ITopic) => {
     fields.value.includes(topic.id) && fields.push(topic.id);
     }
     const removeTopic = (topic: ITopic) => {
     fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     

     View Slide

113. fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     if (topics === null) {
     return null;
     }
     return (
     
     itemsPath="topics"
     onSelect={addTopic}
     query={QUERY}
     renderItem={SearchResultItem} />
     
     
     );
     }
     ProductsInput.isArray = true;
     

     View Slide

114. fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     if (topics === null) {
     return null;
     }
     return (
     
     itemsPath="topics"
     onSelect={addTopic}
     query={QUERY}
     renderItem={SearchResultItem} />
     
     
     );
     }
     ProductsInput.isArray = true;
     

     View Slide

115. fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     if (topics === null) {
     return null;
     }
     return (
     
     itemsPath="topics"
     onSelect={addTopic}
     query={QUERY}
     renderItem={SearchResultItem} />
     
     
     );
     }
     ProductsInput.isArray = true;
     

     View Slide

116. fields.remove(fields.value.indexOf(topic.id));
     }
     const topics = useLoadTopicsIds(fields);
     if (topics === null) {
     return null;
     }
     return (
     
     itemsPath="topics"
     onSelect={addTopic}
     query={QUERY}
     renderItem={SearchResultItem} />
     
     
     );
     }
     ProductsInput.isArray = true;
     

     View Slide

117. View Slide

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

     View Slide

119. View Slide

120. View Slide

121. -
     

     View Slide

122. -
     

     View Slide

123. -
     

     View Slide

124. . unified styles
     / common interface
     0 custom inputs

     1 understand backend GraphQL
     

     2 Form
     

     

     View Slide

125. View Slide

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

     View Slide

127. href={paths.profile(profile)} />
     onClick={onClickReturnsPromise}
     loadingText="Waiting for promise to resolve" />
     

     View Slide

128. href={paths.profile(profile)} />
     onClick={onClickReturnsPromise}
     loadingText="Waiting for promise to resolve" />
     confirm="Are you sure?"
     mutation={DELETE_MUTATION}
     input={{ id }}
     loadingText="Deleting..."
     onMutate={redirectSomeWhere} />
     

     View Slide

129. href={paths.profile(profile)} />
     onClick={onClickReturnsPromise}
     loadingText="Waiting for promise to resolve" />
     confirm="Are you sure?"
     mutation={DELETE_MUTATION}
     input={{ id }}
     loadingText="Deleting..."
     onMutate={redirectSomeWhere} />
     

     View Slide

130. 
     
     
     
     
     

     View Slide

131. Utility
     Styling
     Domain
     

     View Slide

132. View Slide

133. View Slide

134. LikeButton Button
     

     View Slide

135. 

     Domain Component

     

     View Slide

136. AnswerCard Like Button
     

     View Slide

137. 

     
     thumbnail={name={answer.profile.name}
     subtitle="recommendations for" />
     {answer.question.title}
     
     {answer.products.map((product) => (
     url={paths.profile.show(product)}
     thumbnail={name={product.name} />
     ))}
     
     
     
     
     
     

     Domain Component

     

     View Slide

138. 

     Domain Component

     
     

     
     
     
     
     
     
     

     
     
     

     View Slide

139. Atomic Design
     

     View Slide

140. ...Kinda 3
     

     View Slide

141. 4 generic components
     0 domain components
     

     View Slide

142. 3
     Pages
     

     View Slide

143. components/
     graphql/
     hooks/
     layouts/
     pages/
     routes/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

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

     path.ts

     

     View Slide

145. import paths from 'ph/paths';
     

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

     View Slide

146. components/
     graphql/
     hooks/
     layouts/
     pages/
     routes/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

147. View Slide

148. View Slide

149. View Slide

150. 
     
     
     {children}
     
     
     
     
     

     layouts/Main/index.tsx

     

     View Slide

151. View Slide

152. 
     
     
     
     {content}
     
     
     

     layouts/Main/index.tsx

     

     View Slide

153. components/
     graphql/
     hooks/
     layouts/
     pages/
     routes/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

154. components/
     graphql/
     hooks/
     layouts/
     pages/
     routes/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     $
     

     View Slide

155. View Slide

156. 

     pages/profiles/[slug]/index.ts

     

     View Slide

157. import page from '~/routes/profiles/show';
     export default page;
     

     pages/profiles/[slug]/index.ts

     

     View Slide

158. import page from '~/routes/profiles/show';
     export default page;
     

     pages/profiles/[slug]/index.ts

     5
     

     View Slide

159. components/
     graphql/
     hooks/
     layouts/
     pages/
     routes/
     server/
     static/
     styles/
     types/
     utils/
     config.ts
     paths.ts
     

     View Slide

160. 

     Component as directory

     routing/
     profiles/
     show/
     SubComponent1/
     SubComponent2/
     Query.graphql
     index.js
     styles.css
     utils.js
     

     View Slide

161. Loading State
     

     Page Life Cycle

     

     View Slide

162. Loading State
     

     Page Life Cycle

     

     View Slide

163. Loading State
     Error State
     

     Page Life Cycle

     

     View Slide

164. Loading State
     Not Found Error
     Server Error
     Authorization Error Authentication Error
     Error State
     

     Page Life Cycle

     

     View Slide

165. Loading State
     Not Found Error
     Server Error
     Authorization Error Authentication Error
     Error State
     Loaded State
     

     Page Life Cycle

     

     View Slide

166. Loading State
     Not Found Error
     Server Error
     Authorization Error Authentication Error
     SEO
     Error State
     Analytics
     Loaded State
     

     Page Life Cycle

     ???
     

     View Slide

167. Loading State
     Not Found Error
     Server Error
     Authorization Error Authentication Error
     SEO
     Error State
     Analytics
     Loaded State
     render
     

     Page Life Cycle

     ???
     

     View Slide

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

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

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

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

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

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

174. View Slide

175. 

     http://graphql.org/

     

     View Slide

176. View Slide

177. ViewerFragment
     ProfileLayoutHeaderFragment
     ProfileLayout
     MenuFragment
     ProfileShowPage
     

     View Slide

178. ViewerFragment
     ProfileLayout
     MenuFragment
     FollowButton
     Fragment
     Avatar
     Fragment
     ProTips
     Fragment
     Stack
     Fragment
     

     View Slide

179. ViewerFragment
     ProfileLayout
     MenuFragment
     FollowButton
     Fragment
     Avatar
     Fragment
     Avatar
     Card
     LikeButton
     

     View Slide

180. Query
     Fragment Fragment
     Fragment
     Fragment
     Fragment
     Fragment
     

     View Slide

181. import gql from 'graphql-tag';
     import AnswerCardWithQuestionFragment from '~/components/Answer/Card/FragmentWithQuestion';
     import DoYouUseFragment from './DoYouUse/Fragment';
     import HeadTagsFragment from '~/utils/createPage/HeadTagsFragment';
     import ProfileAvatarLinkFragment from '~/components/Profile/AvatarLink/Fragment';
     import ProfileLayoutFragment from '~/layouts/Profile/Fragment';
     import ProfilePeopleSectionFragment from '~/components/Profile/PeopleSection/Fragment';
     import RecommendedProductsFragment from './RecommendedProducts/Fragment';
     import StackItemProfileFragment from '~/components/Stack/Item/Fragment';
     import TipCardFragment from '~/components/Tip/Card/Fragment';
     export default gql`
     query ProfilesShowPage($slug: String!) {
     profile(slug: $slug) {
     id
     answersCount
     canManage
     likedAnswersCount
     questionsCount
     tipsCount
     whitelisted
     using(first: 8) {
     edges {
     node {
     

     View Slide

182. import TipCardFragment from '~/components/Tip/Card/Fragment';
     export default gql`
     query ProfilesShowPage($slug: String!) {
     profile(slug: $slug) {
     id
     answersCount
     canManage
     likedAnswersCount
     questionsCount
     tipsCount
     whitelisted
     using(first: 8) {
     edges {
     node {
     id
     note
     profileTo {
     id
     name
     ...ProfileAvatarLinkFragment
     ...StackItemProfileFragment
     }
     }
     }
     }
     answers(first: 3) {
     

     View Slide

183. peopleWithSimilarInterests(limit: 4) {
     edges {
     node {
     id
     ...ProfilePeopleSectionFragment
     }
     }
     }
     ...HeadTagsFragment
     ...ProfileLayoutFragment
     ...ProfilesShowDoYouUseFragment
     ...ProfilesShowDoYouUseFragment
     }
     }
     ${AnswerCardWithQuestionFragment}
     ${DoYouUseFragment}
     ${HeadTagsFragment}
     ${ProfileAvatarLinkFragment}
     ${ProfileLayoutFragment}
     ${ProfilePeopleSectionFragment}
     ${RecommendedProductsFragment}
     ${StackItemProfileFragment}
     ${TipCardFragment}
     `;
     

     View Slide

184. View Slide

185. Recap
     

     View Slide

186. 0 GraphQL
     & Components
     6 isolating dependancies
     * directory as folder

     1 domain components
     . Pages

     / paths helper
     ) layouts

     ( createPage
     

     7 Recap
     

     

     View Slide

187. Thanks 8
     

     View Slide

188. 

     https://speakerdeck.com/rstankov

     

     View Slide