Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Architecture at Product Hunt
Radoslav Stankov
November 03, 2021
Technology
2
90
React Architecture at Product Hunt
Radoslav Stankov
November 03, 2021
Tweet
Share
More Decks by Radoslav Stankov
See All by Radoslav Stankov
How to Be Effective Javascript Developer
rstankov
0
65
Dealing with Dependencies in JavaScript
rstankov
0
17
Building tools on top of Apollo
rstankov
0
28
React Component Anti-Patterns
rstankov
0
480
How to an effective developer
rstankov
0
140
Domain Driven Design Kinda
rstankov
1
430
Testing React Hooks with Confidence
rstankov
1
140
Product Development
rstankov
2
130
Developing apps with React & Electron
rstankov
0
120
Other Decks in Technology
See All in Technology
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
290
AWS re:Invent 2022で発表された新機能を試してみた ~Cloud OperationとSecurity~ / New Cloud Operation and Security Features Announced at AWS reInvent 2022
yuj1osm
1
230
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5.2k
SPA・SSGでSSRのようなOGP対応!
simo123
2
170
最近のフレッツとIPv6の話
mattenn
0
100
re:Invent発表のサービスを取り入れて加速する弥生のSecurity&Governance / accelerating YAYOI's Security and Governance with services announced at reinvent
yayoi_dd
0
190
re:Inventで発表があったIoT事例の紹介と考察
kizawa2020
0
200
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
1.1k
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
400
MarvelClient Upgrade 64bit クライアントへの自動アップグレード設定
mitsuru_katoh
0
220
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
170
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
170
Featured
See All Featured
A better future with KSS
kneath
230
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
What's new in Ruby 2.0
geeforr
336
30k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Navigating Team Friction
lara
177
12k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
Rails Girls Zürich Keynote
gr2m
87
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Transcript
Product Hunt React Architecture Radoslav Stankov 11/11/2021
!
Radoslav Stankov @rstankov blog.rstankov.com twitter.com/rstankov github.com/rstankov speakerdeck.com/rstankov
None
Product Hunt React Architecture Radoslav Stankov 11/11/2021
None
https://speakerdeck.com/rstankov Thanks "
Architecture
None
None
None
None
None
None
None
None
# Frontend Tech Stack
None
None
None
None
$ Have good defaults % Have good code organization &
Make common operations easy ' Isolate dependencies ( Extensibility and reusability
$ Have good defaults % Have good code organization &
Make common operations easy ' Isolate dependencies ( Extensibility and reusability
None
None
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
2 1 3 Support Components Pages
Support Components Pages
1) Support 2) Components 3) Pages
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
1 Support components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/
styles/ types/ utils/ config.ts paths.ts
1 Support Components 2 components/ graphql/ hooks/ layouts/ pages/ screens/
server/ static/ styles/ types/ utils/ config.ts paths.ts
1 Support Components Pages 2 3 components/ graphql/ hooks/ layouts/
pages/ screens/ server/ static/ styles/ types/ utils/ config.ts paths.ts
1 Support
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
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
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
apollo client:codegen \ --localSchemaFile="graphql/schema.json" \ --addTypename \ --tagName=gql \ --target=typescript
\ --includes="{components,screens,utils,hooks,layouts}/**/*.{tsx,ts}" \ --outputFlat="graphql/types.ts"
None
components/Profile/Avatar/Fragment.ts import gql from 'graphql-tag'; export default gql` fragment ProfileAvatarFragment
on Profile { id name kind imageUrl } `;
// ==================================================== // GraphQL fragment: ProfileAvatarFragment // ==================================================== export interface
ProfileAvatarFragment { __typename: "Profile"; id: string; name: string; kind: string; imageUrl: string | null; } graphql/types.ts
import { ProfileAvatarFragment } from '~/graphql/types';
None
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
None
useKey() useIsMounted() useTimeout() useHideOnTop()
useGraphQLFragment() useViewier() useIsLoggedIn()
useGraphQLFragment() useViewier() useIsLoggedIn()
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
None
import { format } from 'date-fns'; export function formatDateTime(date: string)
{ return format(date, 'H:mm A · MMM D, YYYY'); } utils/date.ts
moment date.ts Component Page
date.ts Component Page date-fns
utils/ external/ Intercom/ OneSignal/ Segment/ Sentry/
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
2 Components
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
None
) Component as directory components/ Component/ SubComponent/ Fragment.graphql Mutation.graphql icon.svg
index.js styles.css utils.js
None
import * as React from "react"; import Text from "components/Text";
<Text>{text}</Text>
import * as React from "react"; import styles from "./styles.css";
export function Text({ children }) { return ( <span className={styles.text}> {children} </span> ); } components/Text/index.tsx
CSS // style.css .text { font-size: 14px; } CSS //
component.js import styles from './styles.css'; <span className={styles.text}> </span> CSS // style.css .text_3mRwv { font-size: 14px; } CSS // result.js <span class="text_3mRwv"> </span>
import * as React from "react"; import Text from "components/Text";
<Text>text</Text> // -> <span class="text">text</span>
import * as React from "react"; import Text from "components/Text";
<Text>text</Text> // -> <span class="text">text</span> <Text as="p">text</Text> // -> <p class="text">text</p>
import * as React from "react"; import styles from "./styles.css";
export function Text({ as, ...props }) { Component = as || "span"; return <Component className={styles.text} {...props} />; } ) Pass custom component as prop
import * as React from "react"; import Text from "components/Text";
<Text>text</Text> // -> <span class="text">Text</span>
import * as React from "react"; import Text from "components/Text";
import styles from "./styles.css"; <Text className={styles.custom}>text</Text> // -> <span class="text custom">text</span>
import * as React from "react"; import styles from "./styles.css";
import classNames from "classnames"; export function Text({ as, className, ...props }) { Component = as || "span"; return <Component className={className(styles.text, className) } ) Pass extra class name
yarn install "classnames"
import * as React from "react"; import Text from "components/Text";
<Text.Button onClick={fn}>text</Text.Button> // -> <Button className="text">text</Button> <Text.Link to="/page">text</Text.Link> // -> <Link className="text" href="/page">text</Link>
None
None
<Form.Mutation mutation={MUTATION} onSubmit={onComplete}> <Form.Field name="title" /> <Form.Field name="email" control="email" />
<Form.Field name="tagline" control="textarea" /> <Form.Field name="category" control="select" options={CATEGORIES} /> <Form.Field name="photos" control={PhotosInput} /> <Form.Field name="topics" control={TopicsInput} /> <Form.Submit /> </Form.Mutation>
Input
Input Loading
Input Loading Success
Input Loading Success Errors
Submit Server Success Errors
remoteCall Server { result: 'ok' } { errors: {…} }
remoteCall Server { result: 'ok' } { errors: {
field1: 'error1', field2: 'error2' } }
{ errors: { field1: 'error1', field2: 'error2' } }
{ errors: { field1: 'error1', field2: 'error2' } }
mutation UserSettingsUpdate($input: UserSettingsUpdateInp response: userSettingsUpdate(input: $input) { node { id
...MySettingsPageViewer } errors { field message } } }
mutation UserSettingsUpdate($input: UserSettingsUpdateInp response: userSettingsUpdate(input: $input) { node { id
...MySettingsPageViewer } errors { field message } } }
<Form.Mutation mutation={MUTATION} onSubmit={onComplete}> <Form.Field name="title" /> <Form.Field name="email" control="email" />
<Form.Field name="tagline" control="textarea" /> <Form.Field name="category" control="select" options={CATEGORIES} /> <Form.Field name="photos" control={PhotosInput} /> <Form.Field name="topics" control={TopicsInput} /> <Form.Submit /> </Form.Mutation>
<Form.Mutation mutation={MUTATION} onSubmit={onComplete}> <Form.Field name="title" /> <Form.Field name="email" control="email" />
<Form.Field name="tagline" control="textarea" /> <Form.Field name="category" control="select" options={CATEGORIES} /> <Form.Field name="photos" control={PhotosInput} /> <Form.Field name="topics" control={TopicsInput} /> <Form.Submit /> </Form.Mutation>
None
Which is the form library we are using?!
None
None
*
*
*
+ unified styles , common interface - custom inputs .
understand backend GraphQL / Form
None
<Button href={paths.profile(profile)} />
<Button href={paths.profile(profile)} /> <Button onClick={onClickReturnsPromise} />
<Button href={paths.profile(profile)} /> <Button onClick={onClickReturnsPromise} /> <Button confirm="Are you sure?"
mutation={DELETE_MUTATION} input={{ id }} onMutate={redirectSomeWhere} />
<Button href={paths.profile(profile)} /> <Button onClick={onClickReturnsPromise} /> <Button confirm="Are you sure?"
mutation={DELETE_MUTATION} input={{ id }} onMutate={redirectSomeWhere} />
<Button.Primary {...props} /> <Button.Secondary {...props} /> <Button.Line {...props} /> <Button.Small
{...props} />
const clickHandler = useOnClick({ disabled, confirm, requireLogin, mutation, input, onMutate,
onMutateError, optimisticResponse, update, updateQueries, refetchQueries, onClick, trackingComponent, trackingData, });
Utility Styling Domain
None
VoteButton Button
Domain Component
PostItem Like Button
Domain Component <PostList> <PostItem> <Flex.Row> <PostThumbnail /> <Flex.Column> <Text.Title />
<Text.Subtitle /> <Flex.Row> <PostCommentButton> <Button /> </PostCommentButton> <Text.Small /> </Flex.Row> </Flex.Column> <PostVoteButton> <Button /> </PostVoteButton> </Flex.Row> </PostItem> </PostList>
Atomic Design
...Kinda 0
1 generic components - domain components
3 Pages
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
export default { root: () => '/', static: { about()
=> '/about', // ... } profiles: { people: () => '/people', show: ({ slug }: { slug: string }) => `/@${slug}`, // ... }, // ... }; path.ts
import paths from 'ph/paths'; paths.root(); // => / paths.static.about();
// => /about/ paths.profiles.people(); // => /people paths.profiles.show(profile); // => /@rstankov
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
None
None
None
None
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
2 components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/
types/ utils/ config.ts paths.ts
None
pages/profiles/[slug]/index.ts
import page from '~/screens/profiles/show'; export default page; pages/profiles/[slug]/index.ts
import page from '~/screens/profiles/show'; export default page; pages/profiles/[slug]/index.ts 3
components/ graphql/ hooks/ layouts/ pages/ screens/ server/ static/ styles/ types/
utils/ config.ts paths.ts
Component as directory screens/ profiles/ show/ SubComponent1/ SubComponent2/ Query.graphql index.js
styles.css utils.js
None
Loading State Page Life Cycle
Loading State Page Life Cycle
Loading State Error State Page Life Cycle
Loading State Not Found Error Server Error Authorization Error Authentication
Error Error State Page Life Cycle
Loading State Not Found Error Server Error Authorization Error Authentication
Error Error State Loaded State Page Life Cycle
Loading State Not Found Error Server Error Authorization Error Authentication
Error SEO Error State Analytics Loaded State Page Life Cycle ???
Loading State Not Found Error Server Error Authorization Error Authentication
Error SEO Error State Analytics Loaded State render Page Life Cycle ???
import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import {
ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ 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 } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import {
ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ 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 } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import {
ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ 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 } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import {
ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ 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 } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import {
ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ 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 } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import {
ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ 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 } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
http://graphql.org/
None
ProfileLayout Header Fragment ProfileLayout Sidebar Fragment ProfileShowPage
Avatar Fragment PostItemFragment CommentFragment ProfileLayout SidebarInfo Fragment
Query Fragm Fragm Fragm Fragm Fragm Fragm
#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 } }
None
Recap
- GraphQL $ Components 4 isolating dependancies ( directory as
folder . domain components + Pages , paths helper ' layouts & createPage 5 Recap
None
None
Thanks "
https://speakerdeck.com/rstankov Thanks "
None