In this chapter, we investigate some of the more important UI frameworks that exist in the Dart universe, indicate how and when to use them, and discuss their pros and cons. For instance, we will discuss whether a framework supports responsive design and provides an optimal viewing experience—easy reading and navigation with minimum resizing, panning, and scrolling—across a wide range of devices (from desktop monitors to mobile phones).
Some of them (DQuery and Bootjack) are ports of, or at least are inspired by, famous JavaScript frameworks, such as jQuery or Twitter Bootstrap.
DWT (Dart Web Toolkit) is a port of the Google Web Toolkit.
Some packages built on the (now deprecated) Dart Web UI components library are as follows:
- Dart widgets
- Bee (from Blossom)
- HTML Components
The following libraries heavily use the MVC pattern:
- Rikulo UI (using DQuery and Bootjack)
- Hipster-MVC (no specific UI components)
- PureMVC (no specific UI components)
The others are ports of or built on the Adobe development framework:
- Flash Professional, which is the toolkit for Dart (from Adobe)
- StageXL
Finally, we discuss the porting of Angular.js to Dart using Angular.dart.
(Developed by Simon Pai and Tom Yeh from Rikulo, the code for DQuery can be found at https://github.com/rikulo/dquery, and the API reference is at http://api.rikulo.org/dquery/latest/dquery.html.)
Every web developer knows and uses jQuery, the JavaScript library that creates HTML document traversal and manipulation, event handling, animation, and Ajax much simpler than in pure JavaScript. DQuery (in Version 0.5.1 currently) is a strongly typed port to Dart of jQuery, meaning that the externally visible variables are typed, in contrast to jQuery. It remains close to both Dart and jQuery conventions, so it will particularly appeal to developers who are already fluent with jQuery. Dart has some of the features of jQuery, but the event system and element wrapper of the latter still offer additional value, and that's why they have been ported; besides, DQuery uses the ubiquitous $ notation for element queries instead of Dart's query and the queryAll functions. Create a new web application project dquery1 and add dquery: any to the dependencies section in pubspec.yaml to install the package. Also, add the necessary import statement to dquery1.dart:
import 'package:dquery/dquery.dart';
In the DQuery notation, the template code becomes:
$('#sample_text_id')[0] ..text = "Click me!" ..onClick.listen(reverseText); Querying with$, in fact, returns anElementQueryobject—a collection of the elements$elems: ElementQuery $elems = $('#sample_text_id'),
DQuery also has its own class DQueryEvent to register event listeners, as shown in this code snippet, where the text of the button with the ID btn changes after a click:
$('#btn').on('click', (DQueryEvent e) {
$('#btn')[0].text = "Don't do this!";
});