Our Practices of Building a React Web App

ZHUORAN LI

GitHub: @lzhuor

🎵 Clarinet, 🏀 Basketball, 🎿 Ski

🤯 What's happening?

The "library"

Small Scope

https://www.youtube.com/watch?v=ANtSWq-zI0s

Evan You on Vue.js: Seeking the Balance in Framework Design | JSConf.Asia 2019

"Warning"

Opinionated

Mostly for SPA

Different thoughts are more than welcome!

Delivery of Design

😭 Sketch

Components

Core

Frontend

workspace

Monorepo

Check out once, develop all!

Components

Shared components, usable across scenes, modals and layouts that are behaving in the same way
Generic, in the way that different components could potentially use them with specific implementations

Core

Contains all the Redux & Saga modules shared across the platform
- composing data of micro-services or BFF*
- model the resources of your domain
- API interactions
Only needed if you really know why you need it, usually for complex domain models
- client-side Cryptowallet is a good usecase

*BFF: https://samnewman.io/patterns/architectural/bff/

Core

Redux & Sagas

Core

API Client

Frontend

The actual web app implements business logics

👨‍💻‍

workspace

Monorepo

{
  "test": "cross-env yarn wsrun test:build --fast-exit && yarn wsrun test"
}

{
  "test:components": "yarn workspace silver-components test"
}

Styling

Inline props

Flexibility
- Generic HTML tags
- Wrap existing components
- Global styles

Theme

styled-components

const Container = styled.div`
  background: ${props => props.bgColor};
`

const Container = styled(BaseContainer)`
  background: red;
`

Use defined name of color instead of hex code

Layouts

Authentication

const ShareFormContainer = styled.div`
  margin: 3.2rem 0;
  display: flex;
  align-items: center;

  ${media.maxWidth.mobile`
    margin-bottom: 0;
    flex-direction: column;
  `};
`

Consistent
- breakpoints of Grid system
- breakpoints of Media Query (in CSS)
- <MediaContext /> API (in JSX)

Responsiveness

  const { mobile } = useContext(MediaContext)

Responsiveness

Bundle Analysis

  "scripts": {
    "analyze": "cross-env-shell ANALYZE=true NODE_ENV=production webpack-cli --config webpack.config.prod.js"
  }

Code Split

By route (URL)

By frequency

By feature

By region / language

💪 Alternative (SPA): React.lazy & <Suspense />
https://reactjs.org/docs/code-splitting.html

Code Split

import Loadable from 'react-loadable'
import LoadableLoading from 'scenes/Common/LoadableLoading'

const Declaration = Loadable({
  loader: () =>
    import(
      /* webpackChunkName: "declarations" */ 'scenes/Onboarding/Declaration'
    ),
  loading: LoadableLoading
})