Skip to main content

New DOM Event Streams API makes it Easier to Listen to and Capture Events

A new API is on the way for dealing with DOM events in Dart. Google engineer Peter Bois gives us the details:
One of our goals for exposing DOM events in Dart is to have them follow the 'best practices' for events- particularly events which are exposed in places such as your application data model.

The current plan is that DOM events would be exposed as:
class Element {
  static const HtmlStreamProvider<MouseEvent> clickEvent = 
    const HtmlStreamProvider<MouseEvent>('click');

  Stream<MouseEvent> get onClick => clickEvent.forTarget(this);
}

The HtmlStreamProvider class is:
class HtmlStreamProvider<T extends Event> {
  const HtmlStreamProvider(String eventType);
  Stream<T> forTarget(EventTarget e, {bool useCapture: false})

}

There's basically two parts- 
  1. The static declaration of the event as an HtmlStreamProvider which provides a Stream for a DOM event on a specific target. This is only really used for bubbling DOM events.
  2. A Stream<> getter on the object instance to allow easy access to the event stream.
NOTE: we will not remove the old APIs until the new APIs have been in & baked for a while.

Examples of old vs new syntax:

Listening to an event
Old:
element.on.click.add((e) {
});
New:
element.onClick.listen((e) {
});

Capturing an event
Old:
element.on.click.add((e) {  
}, true);
New:
Element.clickEvent.forTarget(element, useCapture:true).listen((e) {
});

Listening to a bubbled event
Old (not really supported):
document.body.$dom_addEventListener('canPlay', (e) {}, false);
New:
MediaElement.canPlayEvent.forTarget(document.body).listen((e) {
});


QUESTIONS:
  1. Are you planning on exposing all model events as Streams? By this I mean something like backbone.js-style events. Our goal for DOM events is to be consistent with the dominant data event model.
  2. Any opinions on naming? Currently the events are exposed as onEventName, but it's often common to use this naming style for virtual methods. Using just eventName has a number of conflicts with members. We aren't entirely thrilled with onEventName.
If you're interested in taking a peek, the CL with the changes is at:

As always, we invite you to join our Dart mailing list, ask questions on Stack Overflow, or file feature requests on dartbug.com.

Popular posts from this blog

A stronger Dart for everyone

We are constantly asking ourselves:
How do we make developers even more productive when writing Dart apps? We believe that a critical part of the answer to this question is to make strongmode – a sound static type system for Dart – the standard for all Dart developers.

Teams that use Dart to build apps like Soundtrap, AdWords, AdSense, and Greentea say they really enjoy using strong mode features, such as early error detection. In fact, teams that have switched completely to strong mode cite not only early error detection but also better code readability and maintainability as major benefits. We hear this both from small teams and – even more so – from large teams with hundreds of developers writing and maintaining millions of lines of Dart code. As Björn Sperber from Soundtrap says,
Strong mode and the smooth integration with IntelliJ is a joy to use and a huge improvement. If you’ve tried out Flutter, you’ve already used strong mode checks from the Dart analyzer.

Given the benefits …

AngularDart 4

AngularDart v4 is now available. We've been busy since the release angular2 v3.1.0 in May. Not only did we "drop the 2", but we also improved the compiler and tightened up the framework to give you smaller code, we updated the package structure to improve usability, and we added several new features. Check out the updated documentation to get started.
Just angular Upgrading to v4 will require more than updating your version constraint. The package has changed names (back) to angular – dropping the 2. You'll need to update your pubspec.yaml and the corresponding imports in your code. In most instances, find-and-replace should do the trick. Going forward, the package will be called package:angular. We'll just update the version number.
Smaller code The updated compiler in 4.0 allows type-based optimizations that not only improve runtime performance but generate better code because we are able to strongly type templates. A big result of the update is that many ap…

Dart 1.24: Faster edit-refresh cycle on the web & new function type syntax

Dart 1.24 is now available. It includes the Dart Development Compiler and supports a new generic function type syntax. Get it now!


Figure 1: DDC debugging in Chrome.

Some notable changes in this release:
pub serve now has support for the Dart Development Compiler. Unlike dart2js, this new compiler is modular, which allows pub to do incremental re-builds for pub serve.In practice what that means is you can edit your Dart files, refresh in Chrome (or other supported browsers), and see your edits almost immediately. This is because pub is only recompiling your package, not all packages that you depend on.There is one caveat with the new compiler, which is that your package and your dependencies must all be strong mode clean.You can also use the new compiler to run your tests in Chrome much more quickly than you can with dart2js.Read more in the changelog.You can now publish packages that depend on the Flutter SDK to pub. Moreover, pub.dartlang.org has started tagging Flutter plugins with …