uix 0.3.1

  • README.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 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 #

VDom Benchmark #

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 all this proposals will be really bad in terms of developer experience for building isomorphic uix components compared to simple conditional compilation.

Use this package as a library

1. Depend on it

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


dependencies:
  uix: ^0.3.1

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.