uix 0.4.0

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • --

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();
    }
  }
  ...
}

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 #

<a name="benchmarks"></a>

DBMonster Benchmark #

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.

0.4.0 #

  • createClassName and vClassName auto-generated functions removed. Creating Components is now possible with simple new ClassName() and to create virtual nodes that represent components vComponent($ClassName, ...). When metaclasses are implemented in Dart, build step will be completely removed, and it will be possible to create virtual nodes with vComponent(ClassName, ...). And it will be quite easy to migrate existing codebase just by removing $ prefix in all vComponent calls.
  • resetTransientSubscriptions, resetSubscriptions renamed to cancelTransientSubscriptions and cancelSubscriptions.
  • Added type property check when looking for similar virtual nodes.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  uix: ^0.4.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:uix/uix.dart';
  
Version Uploaded Documentation Archive
0.7.2 May 16, 2017 Go to the documentation of uix 0.7.2 Download uix 0.7.2 archive
0.7.1 Mar 28, 2017 Go to the documentation of uix 0.7.1 Download uix 0.7.1 archive
0.7.0 Sep 3, 2015 Go to the documentation of uix 0.7.0 Download uix 0.7.0 archive
0.6.0 May 7, 2015 Go to the documentation of uix 0.6.0 Download uix 0.6.0 archive
0.5.2 May 7, 2015 Go to the documentation of uix 0.5.2 Download uix 0.5.2 archive
0.5.0 Apr 6, 2015 Go to the documentation of uix 0.5.0 Download uix 0.5.0 archive
0.4.0 Apr 4, 2015 Go to the documentation of uix 0.4.0 Download uix 0.4.0 archive
0.3.1+1 Mar 31, 2015 Go to the documentation of uix 0.3.1+1 Download uix 0.3.1+1 archive
0.3.1 Mar 31, 2015 Go to the documentation of uix 0.3.1 Download uix 0.3.1 archive
0.3.0 Mar 29, 2015 Go to the documentation of uix 0.3.0 Download uix 0.3.0 archive

All 17 versions...

Awaiting analysis to complete.