OrcaFS UI BBBig Frontend Project

Frontend

Technology Stack

1. Project is initialized through 'create-react-app' which is provided by Facebook React.js authorities, and we eject the tool configs from node_modules,
   so we can control it by ourselves, add track it through Git. This tool will initialize a webpack based project with modularization support. It uses 'less' as css preprocessor, and 'auto-prefix' as postprocessor.
   Also for webpack project, dev server is certainly support. Based on this, we introduce module HRM into CLI project for a better development experience.
   At the same time, the HTTP proxy provided by webpack dev-server is also indispensable:
   https://github.com/facebookincubator/create-react-app
   Also the Code Splitting is provided to improved the loading performance:
   https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
   

2. The current popular state management framework is Redux which is inspired by Flux and powered by Dan Abramov. As for React.js we use 'react-redux' instead:
   https://redux.js.org
   

3. For router implementation we use 'react-router':
   https://reacttraining.com/react-router/web/example/basic
   

4. We use the 'antd' as UI component library that is refined by Ant Financial R&D team(UED team):
   This framework supplies a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
   https://ant.design

Folder Directory Structure

• • ./config - configurations for cli tools
• • ./public - production build destination
• • ./scripts - npm scripts for running cli tools
• • ./src - source code and static resource for webpack
• • ./src/component - common and high-level abstractions of mature business-view components
• • ./src/http - all http server APIs, and cronjob
• • ./src/images - image resources
• • ./src/redux - state management framework
• • ./src/services - useful functions and local data/map
• • ./src/socket - socket.io client
• • ./src/styleSheets - less style sheets for common usage and specific components
• • ./src/views - business-view components placed by module or category
• • ./src/asyncLoad.js - a HOC factory for dynamically import component after doing code splitting
• • ./src/index.js - the build portal of whole frontend project for webpack
• • ./src/routerPath.js - record the map for current router paths

Component Tree

- index.js (project bootstrap)
   |- App
       |- Initialize
       |- Login
       |- Main
           |- Dashboard
           |- NodeData
           |- Snapshot
           |- FsOperation
           ...

Backend

Technology Stack

1.Node.js - a JavaScript runtime built on Chrome's V8 JavaScript engine

2.Koa.js - a next generation web framework for Node.js

3.MongoDB - a document database with the scalability and flexibility

Multi-process Model

  master       server      schedule
    | 
    | fork server                               
    |———————————>|                              master: manage status    
    |<———————————|                              server: handle http request
    |server ready|fork schedule                 schedule: timing tasks
    |————————————|———————————>|
    |<———————————|————————————|   
    |  schedule  |   ready    |
    |            |            |

Folder Directory Structure

- server.js    entrance(master)
- server
  |- config
  |- controller
  |- middleware
  |- model
  |- module
  |- router
  |- schedule  timing tasks(schedule)
  |- service
  |- index.js  handle http request(server)

Deployment Method

1.depend Node.js

npm install
node server

2.no dependence

npm install pkg -g
pkg server.js -t node9-linux-x64 -o app/orcafs-gui
./orcafs-gui