-
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 -
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 -
For router implementation we use 'react-router':
https://reacttraining.com/react-router/web/example/basic -
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
-
- ./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
- index.js (project bootstrap)
|- App
|- Initialize
|- Login
|- Main
|- Dashboard
|- NodeData
|- Snapshot
|- FsOperation
...
master server schedule
|
| fork server
|———————————>| master: manage status
|<———————————| server: handle http request
|server ready|fork schedule schedule: timing tasks
|————————————|———————————>|
|<———————————|————————————|
| schedule | ready |
| | |
- server.js entrance(master)
- server
|- config
|- controller
|- middleware
|- model
|- module
|- router
|- schedule timing tasks(schedule)
|- service
|- index.js handle http request(server)
npm install
node server
npm install pkg -g
pkg server.js -t node9-linux-x64 -o app/orcafs-gui
./orcafs-gui