{"id":20571991,"url":"https://github.com/netease/tango-boot","last_synced_at":"2025-04-14T17:07:53.985Z","repository":{"id":188426007,"uuid":"678218039","full_name":"NetEase/tango-boot","owner":"NetEase","description":"A frontend framework for netease tango low-code app","archived":false,"fork":false,"pushed_at":"2024-05-31T06:34:15.000Z","size":2036,"stargazers_count":13,"open_issues_count":0,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T17:07:41.938Z","etag":null,"topics":["framework","mvc","react","reactive","tango"],"latest_commit_sha":null,"homepage":"https://netease.github.io/tango/docs/boot/intro/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NetEase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-14T03:26:10.000Z","updated_at":"2025-02-25T02:54:49.000Z","dependencies_parsed_at":"2023-08-29T09:22:48.766Z","dependency_job_id":"93b7e380-3bcb-431b-922c-e47b876d2815","html_url":"https://github.com/NetEase/tango-boot","commit_stats":null,"previous_names":["music163/tango-boot","netease/tango-boot"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-boot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-boot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-boot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NetEase%2Ftango-boot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NetEase","download_url":"https://codeload.github.com/NetEase/tango-boot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248923765,"owners_count":21183953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","mvc","react","reactive","tango"],"created_at":"2024-11-16T05:17:59.087Z","updated_at":"2025-04-14T17:07:53.945Z","avatar_url":"https://github.com/NetEase.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TangoBoot\n\nTangoBoot is a frontend framework that serves the NetEase Tango Low-Code applications. It provides standard data requests, state management, and routing solutions, as well as generic runtime utility functions, allowing developers to generate Single Page Applications through less codes.\n\nDocumentation: \u003chttps://netease.github.io/tango/docs/boot/intro/\u003e\n\n## How to develop\n\nEnvironment requirements:\n\n- Node \u003e= 16.0.0\n- Yarn == 1.x stable\n\nRun the example app via the following commands:\n\n```bash\n# install dependencies\nyarn\n\n# build the library\nyarn build\n\n# start the example app\nyarn start\n```\n\n## Application Architecture\n\nThe application architecture of TangoBoot uses the View-Model-Service three-layer model. The model layer defines Observable States, the view layer observes the changes of the model and updates automatically, and the service layer is used to create a set of service functions for the consumption of the view layer and the model layer. The diagram is shown in the figure below:\n\n\u003cimg\n  alt=\"image\"\n  width=\"600px\"\n  src=\"https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/13760951704/985c/9706/7f18/be713816a143d3a054f51c9d1fc59b36.png\"\n/\u003e\n\n## Core API\n\n- `runApp` create the app entry\n- `definePage` define reactive views\n- `defineStore` define observable states\n- `defineServices` define async service functions\n\n## How to use\n\n### Create app entry\n\nThe `index.js` is the app entry file，a simple example is:\n\n```jsx\nimport { runApp } from '@music163/tango-boot';\nimport routes from './routes';\nimport services from './services';\nimport home from './stores/home';\nimport counter from './stores/counter';\nimport './global.less';\n\nconst { mount, unmount, bootstrap } = runApp({\n  boot: {\n    mountElement: document.querySelector('#root'),\n    qiankun: false,\n  },\n\n  stores: {\n    home,\n    counter,\n  },\n\n  services,\n\n  router: {\n    type: 'browser',\n    config: routes,\n  },\n});\n\nexport { mount, unmount, bootstrap };\n```\n\n### Create Observable States\n\nDefining a view model through defineStore is very simple, simply declare the state and actions.\n\n```jsx\nimport { defineStore } from '@music163/tango-boot';\n\nconst counter = defineStore({\n  num: 0,\n\n  get() {},\n\n  decrement: function () {\n    counter.num--;\n  },\n\n  increment: () =\u003e counter.num++,\n});\n\nexport default counter;\n```\n\n### Create Reactive Views\n\nIf the view layer needs to listen for state changes, it only needs to wrap the view component with `definePage`.\n\n```jsx\nimport React from 'react';\nimport tango, { definePage } from '@music163/tango-boot';\n\nclass App extends React.Component {\n  increment = () =\u003e {\n    tango.stores.counter.increment();\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eCounter: {tango.stores.counter.num}\u003c/h1\u003e\n        \u003cbutton type=\"primary\" onClick={this.increment}\u003e\n          +1\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default definePage(App);\n```\n\n### Create Service Functions\n\nUse `defineServices` to define your remote apis as service functions.\n\n```jsx\nimport { defineServices } from '@music163/tango-boot';\n\nexport default defineServices({\n  list: {\n    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',\n    formatter: (res) =\u003e {\n      const { data, message } = res;\n      return {\n        code: 200,\n        list: data,\n        total: data.length,\n        message,\n      };\n    },\n  },\n  add: {\n    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',\n    method: 'post',\n  },\n  update: {\n    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',\n    method: 'post',\n  },\n  delete: {\n    url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users?id=1',\n  },\n});\n```\n\n## License\n\nThis project is licensed under the terms of the [MIT license](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetease%2Ftango-boot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetease%2Ftango-boot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetease%2Ftango-boot/lists"}