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 #

Each time component is invalidated, it registers itself in the Scheduler, and Scheduler is responsible for updating Components.

Scheduler is running tasks that updates visual representation when the new frame is rendered.

It also provides different queues for read/write DOM batching with priorities. Example

Misc #

Automatic management of Dart streams with addSubscription(StreamSubscription s), addTransientSubscription(StreamSubscription s) methods. Transient subscriptions simplifies the way to manage subscriptions the same way virtual dom simplifies DOM mutations, just describe which dependencies should be active at any point in time.

// Code from TodoMVC[Observable] example

@ComponentMeta()
class Entry extends Component<int> {
  updateState() {
    _entry = entryStore.get(data);

    // each time Component is invalidated, old subscription will be
    // automatically canceled, so we just register a new one when
    // something is changed (input data or internal state).
    addTransientSubscription(_entry.onChange.listen(invalidate));

    return true;
  }
  ...
}

revisioned nodes for fast "dirty checking" of mutable data structures. Just update revision when data is changed and check if view has an older revision, for example:

class LineView extends Component<RichLine> {
  List<VNode> _fragments;

  set data(RichLine newData) {
    if (identical(data, newData)) {
      if (data.isNewer(this)) {
        invalidate();
      }
    } else {
      data_ = newData;
      invalidate();
    }
  }
  ...
}

Lifecycle control of children virtual nodes to implement complex animations. For example: CssTransitionContainer
Mount on top of existing html document. Mount example

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.

build step will be removed in the future, when metaclasses are implemented in Dart

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 `$ClassName() => new ClassName()` functions.
//
// 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();

  final component = new Main()..data = 'uix';

  // Inject component into document body.
  injectComponent(component, html.document.body);
}

Examples #

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 it is still not enough to provide a good developer experience for users of this library. Conditional compilation will be way much better to write "isomorphic" Components.

uix 0.4.0
uix: ^0.4.0 copied to clipboard

Metadata

uix #

Virtual DOM #

Scheduler #

Misc #

Quick Start #

1. Create a new Dart Web Project

2. Add uix library in `pubspec.yaml` file:

3. Install dependencies

4. Add `build.dart` file:

5. Create `web/index.html` file:

6. Create `web/main.dart` file:

Examples #

VDom Benchmark #

DBMonster Benchmark #

Server-Side rendering #

← Metadata

Publisher

Metadata

License

Dependencies

More

uix 0.4.0 uix: ^0.4.0 copied to clipboard

Metadata

uix #

Virtual DOM #

Scheduler #

Misc #

Quick Start #

1. Create a new Dart Web Project

2. Add uix library in pubspec.yaml file:

3. Install dependencies

4. Add build.dart file:

5. Create web/index.html file:

6. Create web/main.dart file:

Examples #

VDom Benchmark #

DBMonster Benchmark #

Server-Side rendering #

← Metadata

Publisher

Metadata

License

Dependencies

More

uix 0.4.0
uix: ^0.4.0 copied to clipboard

2. Add uix library in `pubspec.yaml` file:

4. Add `build.dart` file:

5. Create `web/index.html` file:

6. Create `web/main.dart` file: