uix 0.3.1+1 
uix: ^0.3.1+1 copied to clipboard
Library to build Web User Interfaces inspired by React.
uix #
Library to build Web User Interfaces in Dart inspired by React.
- Virtual DOM Virtual DOM simplifies the way to manage DOM mutations, just describe how your Component should look at any point in time. uix library has a highly optimized virtual dom implementation, see benchmarks below.
- Scheduler Proper read/write DOM batching, revisioned nodes for fast "dirty checking" using mutable data structures.
- Sideways Data Dependencies Automatic management of data
dependencies using Dart
streams:
addSubscription(StreamSubscription s),addTransientSubscription(StreamSubscription s).
Quick Start #
Requirements:
- Dart SDK 1.9.1 or greater
1. Create a new Dart Web Project
2. Add uix library in pubspec.yaml file:
dependencies:
uix: any
3. Install dependencies
$ pub get
4. Add build.dart file:
library build_file;
import 'package:source_gen/source_gen.dart';
import 'package:uix/generator.dart';
void main(List<String> args) {
build(args, const [
const ComponentGenerator()
], librarySearchPaths: ['web']).then((msg) {
print(msg);
});
}
Dart Editor will automatically run build.dart file. To configure
auto-build in WebStorm, just
add File Watcher.
5. Create web/index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello uix</title>
</head>
<body>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
6. Create web/main.dart file:
library main;
import 'dart:html' as html;
import 'package:uix/uix.dart';
// Part file will be automatically generated by source_gen.
part 'main.g.dart';
// Each Component should have @ComponentMeta() annotation, it is used
// by source_gen to generate additional code for Components:
//
// - create${className}([data, children, parent]) - create Component
// - v${className}(...) - create virtual dom node representing Component
//
// Type parameter in Component is used to specify type of the input
// data (props in React terms).
@ComponentMeta()
class Main extends Component<String> {
// Tag name of the root element for this Component.
final String tag = 'p';
// Each time when Component is invalidated (new data is passed,
// or invalidate() method is called), it will be updated during
// writeDom phase.
//
// API is designed this way intentionally to improve developer
// experience and get better stack traces when something is
// failing, that is why there is no method like render() in
// React.
updateView() {
// updateRoot method is used to update internal representation
// using Virtual DOM API.
//
// vRoot node is used to represent root element.
updateRoot(vRoot()([
vElement('span')('Hello '),
vElement('span')(data)
]);
}
}
main() {
// Initialize uix library.
initUix();
// createMain function is automatically generated by source_gen.
final component = createMain('uix');
// Inject component into document body.
injectComponent(component, html.document.body);
}
Examples #
- Hello
- Timer
- Collapsable
- Form
- State Diff
- Read/Write DOM Batching
- Component Inheritance
- SVG
- TodoMVC (observable)
- TodoMVC (persistent)
- MineSweeper Game
- Snake Game
- Dual N-Back Game
VDom Benchmark #
DBMonster Benchmark #
- Run
- Run (compiled with patched dart-sdk)
Server-Side rendering #
uix library with simple tweaks is fully capable to render components on the server and mounting on top of the existing html tree. Unfortunately Dart doesn't support any usable way to build uix Components this way. There are several proposals for Configured Imports 1 2 3 that will solve some problems, but all this proposals will be really bad in terms of developer experience for building isomorphic uix components compared to simple conditional compilation.
Metadata
Publisher
unverified uploader
Metadata
Library to build Web User Interfaces inspired by React.
Repository (GitHub)
View/report issues
License
unknown (LICENSE)
