ArchGuard Frontend

Development

Node.js version: 16.x

ArchGuard 3.0

• custom Markdown parser
  • ProseMirror as core editor
  • MonacoEditor as a source code editor
• paragraph dispatch server
  • graph dsl to graph
  • model to table
  • multiple notebook run
  • notebook to server
  • notebook return output to graph
• Connection
  • websocket

Tech decision (framework)

• language：TypeScript
• framework：
  • React
  • UMI
• graph engine:
  • Antv/g6 for Package dependencies analysis
  • Cytoscape for Class, Method dependencies analysis
  • D3.js for custom layout in Dashboard
  • bizcharts for badsmell overview
  • Mermaid for Graph DSL
• Editor:
  • ProseMirror
  • Monaco Editor
• Build tool：yarn
• Test tool：jest

Local setup

cd archguard
npm install
npm start

Docker setup

cd archguard
docker build -t archguard-frontend:latest .
docker run -it --rm -p 3000:80 archguard-frontend:latest

Graph Engine

• Antv/g6, for Package dependencies
  • with ant-design/charts
• Cytoscape, for Class & Method dependencies
  • ext: darge, cola, fcose, elk

License

@ 2019~2022 Thoughtworks. This code is distributed under the MIT license. See LICENSE in this directory.