Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/netease/tango-boot
A frontend framework for netease tango low-code app
https://github.com/netease/tango-boot
framework mvc react reactive tango
Last synced: 3 months ago
JSON representation
A frontend framework for netease tango low-code app
- Host: GitHub
- URL: https://github.com/netease/tango-boot
- Owner: NetEase
- License: mit
- Created: 2023-08-14T03:26:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-31T06:34:15.000Z (8 months ago)
- Last Synced: 2024-11-11T19:41:18.310Z (3 months ago)
- Topics: framework, mvc, react, reactive, tango
- Language: TypeScript
- Homepage: https://netease.github.io/tango/docs/boot/intro/
- Size: 1.94 MB
- Stars: 12
- Watchers: 2
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TangoBoot
TangoBoot 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.
Documentation:
## How to develop
Environment requirements:
- Node >= 16.0.0
- Yarn == 1.x stable
Run the example app via the following commands:
```bash
# install dependencies
yarn
# build the library
yarn build
# start the example app
yarn start
```
## Application Architecture
The 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:
## Core API
- `runApp` create the app entry
- `definePage` define reactive views
- `defineStore` define observable states
- `defineServices` define async service functions
## How to use
### Create app entry
The `index.js` is the app entry file，a simple example is:
```jsx
import { runApp } from '@music163/tango-boot';
import routes from './routes';
import services from './services';
import home from './stores/home';
import counter from './stores/counter';
import './global.less';
const { mount, unmount, bootstrap } = runApp({
boot: {
mountElement: document.querySelector('#root'),
qiankun: false,
},
stores: {
home,
counter,
},
services,
router: {
type: 'browser',
config: routes,
},
});
export { mount, unmount, bootstrap };
```
### Create Observable States
Defining a view model through defineStore is very simple, simply declare the state and actions.
```jsx
import { defineStore } from '@music163/tango-boot';
const counter = defineStore({
num: 0,
get() {},
decrement: function () {
counter.num--;
},
increment: () => counter.num++,
});
export default counter;
```
### Create Reactive Views
If the view layer needs to listen for state changes, it only needs to wrap the view component with `definePage`.
```jsx
import React from 'react';
import tango, { definePage } from '@music163/tango-boot';
class App extends React.Component {
increment = () => {
tango.stores.counter.increment();
};
render() {
return (
Counter: {tango.stores.counter.num}
+1
);
}
}
export default definePage(App);
```
### Create Service Functions
Use `defineServices` to define your remote apis as service functions.
```jsx
import { defineServices } from '@music163/tango-boot';
export default defineServices({
list: {
url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
formatter: (res) => {
const { data, message } = res;
return {
code: 200,
list: data,
total: data.length,
message,
};
},
},
add: {
url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
method: 'post',
},
update: {
url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users',
method: 'post',
},
delete: {
url: 'https://nei.hz.netease.com/api/apimock-v2/c45109399a1d33d83e32a59984b25b00/api/users?id=1',
},
});
```
## License
This project is licensed under the terms of the [MIT license](./LICENSE).