wui_builder 0.4.2

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 72

A dart library for building user interfaces for the web, inspired by reactjs

Pub codecov.io

For building declarative, component based web user interfaces in dart.

Provides a rich library of typed virtual elements for svg & standard html.

Supports defining custom components with an interface similar to react. All of the same lifecycle methods are supported.

Built with async rendering in mind from the start.

Fully compliant with strong mode and the DDC.

Documentation and examples

Check out the documentation on github pages for an in depth look at the framework

What makes this virtual dom framework different?

It's written in dart. Plus:

Generated virtual dom elements

The generator is the most unique feature of wui_builder. The generator generates virtual dom element builder for each Element type definied in the dart html and svg packages. Each virtual dom element builder provides the same typed setters as its corresponding html/svg Element. This makes it easy to write resilient componenents.

Configurable Update Scheduling

Next, wui_builder supports iterative rendering to avoid blocking the main thread on large updates. Iterative updates only processes on idle callbacks, which means the rendering job & layout will be split across multiple frames. wui_builder gives power to the developer to decide when components should render. It allows the developer can decide if a component updates syncronously,on animation frame, or on and idle callback. Ideally, a component will either:

  • render on animation frame for high priority updates that must finish. updates from mulitiple components can be batch rendered on animation frames.
  • render on idle callbacks for low priority updates that can be split across frames.

However, syncronous updates are also allowed to run on demand, without waiting for an animation frame or idle callback.

Smart Update Batching

Finally, wui_builder prevents uneccessary updates when multiple updates to the same component are queued before any can process. For example, say I have a component that updates on animation frame using setStateOnAnimationFrame. If setStateOnAnimationFrame is called twice between frames the update process will only be run once while allowing both state setter functions to be executed.

Note, requestIdleCallback is not currently supported by all browsers and wui_builder does NOT include a polyfill at this time. Synchronous rendering still works on all browsers. See a compatability chart here.

Syntax

class HelloWorldProps {
    String text;
}

class HelloWorld extends PComponent<HelloWorldProps> {
    HelloWorld(props) : super(props);

    @override
    VNode render() => new VDivElement()
        ..text = props.text;
}

// instantiate the component, pass it an instance of HelloWorldProps
final component = new HelloWorld(
    new HelloWorldProps()
        ..text = 'Hello world',
    );

// render the virtual element into a container
render(component, querySelector('#container'));

Check out the documentation on github pages for more in depth examples.

Motivation

It started as a fun project to help learn about virtual doms. However, there is motivation to keep progressing because:

  • I really hate JS.
  • I quite like dart.
  • I don't like un-typed templates, so angular ain't my jam.
  • over_react has some downsides:
    • it incurs a large performance burden due to js interop
    • it has to adapt to a js api, which can be difficult due to differences in the languages

0.4.1

wui_builder.dart

  • fix issue around remove and readding event subscriptions on dom elements

0.4.1

components.dart

  • Added router component that lets you decalare which components to render for a given route

0.4.0

wui_builder.dart

  • Breaking changes:
    • Changed StyleBuilder from a typedef to an Object
  • Keyed children can now be moved amongst their siblings while maintaining their state
  • added an exported function, unmount, which disposes a vnode and removes it from the dom.

components.dart

  • added NComponent and NCComponent for when you want a component with Null prop and state types.

functional.dart:

  • Breaking changes:
    • removed element generic from withRef
    • removed added update type to withState hoc

performance audit:

  • move to usage of maps for set properties on velements
  • move to usage of custom attribute diffing
  • use ele.text = ''; to remove all children from an element
  • use node.firstChild rather than node.children.first
  • use ++i and --i instead of i++ and i--

bug fixes:

  • correctly clean up beforeAnimationFrame callbacks after components are unmounted

0.3.1

  • Add changelog.
  • Move home_page into example and rename to docs.
  • fix issue where removing some, but not all, children caused errors
  • Added Perf HOC

0.3.0

  • Breaking changes:
    • Made functional library's HOC classes private.
    • componentDidMount is now called after the new element is actually appended to the dom.
  • Added docs
  • Made child public on the component api.
  • Key change now forces a rerender.
  • Added a virtual element factory for every tag supported in HTML5.

0.2.1

  • Added updateOnAnimationFrame to the component api.
  • Added setStateOnAnimationFrame to the component api.
  • Added beforeAnimationFrame to the component api.

0.2.0

  • Added should abort option to updateOnIdle.
  • Added setState and setStateOnIdle.
  • Added component package.

1. Depend on it

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


dependencies:
  wui_builder: "^0.4.2"

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:wui_builder/wui_builder.dart';
        
Version Uploaded Documentation Archive
0.4.2 Jan 31, 2018 Go to the documentation of wui_builder 0.4.2 Download wui_builder 0.4.2 archive
0.4.1 Jan 29, 2018 Go to the documentation of wui_builder 0.4.1 Download wui_builder 0.4.1 archive
0.4.0 Jan 24, 2018 Go to the documentation of wui_builder 0.4.0 Download wui_builder 0.4.0 archive
0.3.1 Dec 31, 2017 Go to the documentation of wui_builder 0.3.1 Download wui_builder 0.3.1 archive
0.3.0 Dec 11, 2017 Go to the documentation of wui_builder 0.3.0 Download wui_builder 0.3.0 archive
0.2.1 Dec 9, 2017 Go to the documentation of wui_builder 0.2.1 Download wui_builder 0.2.1 archive
0.2.0 Dec 4, 2017 Go to the documentation of wui_builder 0.2.0 Download wui_builder 0.2.0 archive
0.1.0 Nov 18, 2017 Go to the documentation of wui_builder 0.1.0 Download wui_builder 0.1.0 archive
0.0.2 Nov 2, 2017 Go to the documentation of wui_builder 0.0.2 Download wui_builder 0.0.2 archive
0.0.1 Nov 2, 2017 Go to the documentation of wui_builder 0.0.1 Download wui_builder 0.0.1 archive

Analysis

This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • completed on Feb 3, 2018
  • Dart: 2.0.0-dev.20.0
  • pana: 0.10.1

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
65 / 100
Health:
Code health derived from static analysis. [more]
64 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
72

Platforms

Detected platforms: web

Primary library: package:wui_builder/wui_builder.dart with components: html.

Suggestions

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use wui_builder.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <2.0.0
meta ^1.0.0 1.1.2
Dev dependencies
analyzer >=0.29.0 <0.31.0
coverage ^0.9.0
dart_dev ^1.0.0
dart_style >=0.2.4 <2.0.0
test ^0.12.0