Built on Web Components, and inspired by Model Driven Views, Dart's Web UI library is now ready for testing. This early release of Web UI supports dynamic templates, live one-way and two-way data binding, and custom DOM elements. Web UI also includes a compiler that makes these features available to all modern browsers today.
Web UI helps you build declarative apps that have cleaner semantics and structure. You can build and use custom elements like <x-survey> that encapsulate their style, behavior, and structure to hide implementation details like deeply nested HTML tags. Just like HTML tags, these new tags (aka custom elements) can be nested, extended, and shared with other developers.
Web UI also automatically keeps the HTML page and data models in sync with one-way and two-way data binding. Simply declare, in the DOM itself, the bindings between Dart objects and page elements and let Web UI take care of the details.
Here is a small snippet from a simple TODO app that shows some of these features, including:
(1) linking to a custom element (2) declarative event handling (3) templates and iteration (4) data binding with a custom element
To see Dart Web UI in action, we've ported the ubiquitous TodoMVC sample app:
Getting started and installing Web UI is easy with pub, the Dart package manager. Simply add the web_ui package to your list of dependencies and run pub install. Once installed, you can even configure Dart Editor to watch for changes and automatically recompile your Web UI apps for quick and easy edit and reload development cycles.
To learn more about Dart's Web UI package, you can read the docs and browse the summary of features. There's more work to do, and we look forward to your comments on our mailing list.
Posted by Siggi Cherem, Software Engineer
