https://github.com/duit-foundation/duit_js
JavaScript adapter for Duit Framework - drived UI toolkit for Flutter
https://github.com/duit-foundation/duit_js
flutter javascript sdui typescript ui
Last synced: 6 months ago
JSON representation
JavaScript adapter for Duit Framework - drived UI toolkit for Flutter
- Host: GitHub
- URL: https://github.com/duit-foundation/duit_js
- Owner: Duit-Foundation
- License: mit
- Created: 2023-11-30T11:40:37.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T16:45:20.000Z (about 1 year ago)
- Last Synced: 2024-07-15T20:30:35.276Z (about 1 year ago)
- Topics: flutter, javascript, sdui, typescript, ui
- Language: TypeScript
- Homepage:
- Size: 1.93 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Duit - drived UI tooklit.
***Duit*** is a server side UI framework for Flutter. It is used for creating widgets and server-side state management.
The framework consists of several parts:
- [Flutter package](https://github.com/lesleysin/flutter_duit)
- [Go backend adapter](https://github.com/lesleysin/duit_go)
- Node JS backend adapter (this repository)
The framework ensures that the layout model is received from the server, interacts with the backend via the Action API, and embeds custom components into the widget hierarchy processing pipeline. Duit is flexible and extensible, which allows it to create rich UI dynamically.
## Core features
- Structured mappings out of the box. UI property structures and constants.
- A simple contract for building a hierarchy of widgets.
- Ready-made widget functions
- Easily create custom actions and their dependencies
## Usage example
1. Create widget composition and build json from it
```javascript
function Example() {
//create UIBuilder instance
const builder = DuitView.builder();
//create child elements tree
const text = new TextUiElement({data: "Hello World"})
//create view root and assing child/children to him
builder.createRootOfExactType(DuitElementType.column, {}).addChild(sizedBoxWithCentredText)
//return json string
return builder.build();
}
```
2. Run function and return result to client side
```javascript
router.get("/layout1", function (req, res) {
const layout = Example();
res.status(200).send(layout);
});
```
## Future plans
- Widget library expansion
- Troubleshooting, updating documentation
## License
MIT