keioka/React-Dashboard

Frontend-Dashboard

(also service worker, analytics tools, and more...)

Assets

All asstes will be under 'app/assets' not 'dist/assets' direcotry. We can process the files from dist/assets however the file will be dupicated with different name such as main.css and hashed file name main.dSf320909eK.css.

Prioritize assets

We will process all the assets with webpack pipeline in order to make them prioritize (preload and prefetch), pre-cache.

We can add to HTML file manually. Generating and injecting this directive by Webpack give us consistency on filename and path.

Set up webpack

-PreloadWebpackPlugin

plugins: [
  new HtmlWebpackPlugin({}),
  new PreloadWebpackPlugin({
    rel: 'preload',
    include: 'allAssets',
    fileBlacklist: [/\.map/],
    as: (entry) => {
      if (/\.css$/.test(entry)) return 'style';
      if (/\.ttf$/.test(entry)) return 'font';
      if (/\.png$/.test(entry)) return 'image';
      return 'script';
    },
  })
]

Fonts

Fonts need to be preloaded in most of cases because if you start loading fonts from CSS, rendering will be blocked. Text will not appear until font file is downloaded. If we fonts are preloaded, CSS @font-face does not have to fetch font file and uses it from memory cache.

Performance check

Test

Jest

• Easy to use
• Less configuration than other test frameworks.

Enzyme

• Component test

Coverage

jest coverage

coverall

• Easy to setup
• Easy to integrate with travis CI

Alternatives

https://codeclimate.com/

CI

travis CI

• Easy to setup
• Easy to integrate with coverall

Monitoring & Error Report

LogRocket

• Work well with redux
• Track Network activity
• Watch user interactions in critical flows

Sentry

• Works with React & Redux (Raven Middleware)
• Slack and email notification
• Nice GUI
• Integrate LogRocket

Style Guide

React component style Guide tool provides an autogenerated documentation about the components on your app directory. It shows all components with actual design and props information.

react-styleguidist

• Slack and email notification
• Nice GUI

react-styleguidist

ToDo

• Service worker (Pre Cache)
• Redux state cache and offline
• Deploy to S3
• Server side rendering