What's the recommended way to use a Dart app on the same page with existing JavaScript code?

275 views
Skip to first unread message

Nik Graf

unread,
May 8, 2013, 4:40:39 PM5/8/13
to mi...@dartlang.org
I'm currently migrating our front-end from an existing application using Backbone.js to Web UI. We deploy each migrated component which means both apps run on the same page until the migration is completed.

It seems that since I updated to 0.5.5.0_r22416 dart2js' JavaScript output behavior changed. The generated output is extending the JavaScript Object with a property called ___dart_dispatch_record_ZxYxX_0_. In this case every JavaScript object contains this property. 

There are some cases where this additional property is creating some trouble. Some of the existing JavaScript libraries we use iterate over the JavaScript object properties. Then they also receive the Dart-dispatch-record object, which they don't handle it properly. One example is Backbone iterating over an events object of a view in order to delegate events. see https://github.com/documentcloud/backbone/blob/master/backbone.js#L1068

Is there an easy way for me to work around this instead of making the whole javascript codebase + libraries more robust?



I added a code example. In the comments you can see the console output from Chrome 26.0.1410.65

<script>
  window.someJsObject = {"routeA": "functionA"};
  // dart code already loaded and executed
  function load() {


    // Console output:
    // Object {routeA: "functionA", ___dart_dispatch_record_ZxYxX_0_: Object}
    //  routeA: "functionA"
    //  __proto__: Object
    //    ___dart_dispatch_record_ZxYxX_0_: Object
    //    __defineGetter__: function __defineGetter__() { [native code] }
    //    …
    console.log(window.someJsObject);


    // Console output:
    // functionA
    // Object {i: Interceptor, p: Object, e: null, ___dart_dispatch_record_ZxYxX_0_: Object}
    for (var key in someJsObject) {
      console.log(someJsObject[key]);
    }
  }
  window.onload = load;
</script>

John Messerly

unread,
May 8, 2013, 6:55:35 PM5/8/13
to General Dart Discussion, Dart Compiler Developers
Offhand, I'm not sure what's going on. CC'ing some folks who might know.


--
Consider asking HOWTO questions at Stack Overflow: http://stackoverflow.com/tags/dart
 
 

Alexandre Ardhuin

unread,
May 10, 2013, 10:25:40 AM5/10/13
to mi...@dartlang.org, Dart Compiler Developers
I get the same problem with Google Maps JS api. It's not possible to make Google Maps work once a dart script (compiled with dart2js) is loaded.
This "___dart_dispatch_record_ZxYxX_0_" put on the javascript "Object" causes that problem.

Here's a repro :

--- main.dart ---
  import 'dart:html';
  void main() {
    window.alert('main');
  }

--- main.html ---
  <!DOCTYPE html>
  <html>
    <body onload="console.log({})">
      <script type="application/dart" src="main.dart"></script>
      <script src="packages/browser/dart.js"></script>
    </body>
  </html>

The console output wil be :
Object {___dart_dispatch_record_ZxYxX_0_: Object}

Is there any issue for that? I can't find one.

Alexandre




2013/5/9 John Messerly <jmes...@google.com>

Dan Grove

unread,
May 10, 2013, 4:24:59 PM5/10/13
to Alexandre Ardhuin, Stephen Adams, Vijay Menon, General Dart Discussion, Dart Compiler Developers

Stephen Adams

unread,
May 10, 2013, 6:10:55 PM5/10/13
to Dan Grove, Alexandre Ardhuin, Vijay Menon, General Dart Discussion, Dart Compiler Developers
Until about a month ago we used to add all kinds of properties to Object.prototype.
This was changed to a single property, but when I made the change I forgot to add the property as not enumerable.
The single property is non-enumerable from r22598

n...@blossom.io

unread,
May 14, 2013, 1:19:40 PM5/14/13
to compil...@dartlang.org, Dan Grove, Alexandre Ardhuin, Vijay Menon, General Dart Discussion
great, thanks Stephen
Reply all
Reply to author
Forward
0 new messages