Will Dart support the use of existing JavaScript libraries?

Question

I understand Dart compiles to JavaScript, and I read the Dart Language Spec on Libraries, although I didn't see an answer there. Also a search on their discussion form for the word 'existing' turns up 3 results that are not related.

Does anyone know if Dart will support the use of existing JavaScript libraries such as jQuery or Raphael?

although I am posting the [question](https://groups.google.com/a/dartlang.org/group/misc/browse_thread/thread/511a97cd362b4f08#) now. — TMB, Oct 10 '11 at 16:59

Seth Ladd · Accepted Answer · 2013-12-08T08:24:54.373

96

The answer is now Yes! Dart now ships a JS-interop library to use existing JavaScript code with your Dart app. Learn more here: https://www.dartlang.org/articles/js-dart-interop/

edited Dec 08 '13 at 08:24

answered Jan 06 '12 at 05:24

Seth Ladd

112,095
66
196
279

@Seth I had a follow up question. Does it really make much sense to you use Javascript libraries from Dart, when Dart is there to finally kinda replace Javascript ? And does Dart have something inbuilt for visualization ? – Amit Tomar Jan 31 '14 at 10:54
2

@AmitTomar the community can't port over all JS libraries immediately, so it makes sense to use the vast amount of JS libraries out there. As for charting (visualization), I'm only aware of interop with JS based libraries. – Seth Ladd Jan 31 '14 at 23:03
Thanks Seth, I also demonstrate how to use it in this [article](https://creativebracket.com/how-to-use-javascript-libraries-in-your-dart-applications/). – graphicbeacon Feb 19 '19 at 18:13

score 15 · Answer 2 · answered Oct 11 '11 at 12:56

15

You will not be able to call javascript directly from dart code. The native directive is reserved for the core libraries of dartc (dart:core, dart:dom, dart:html, dart:json, etc), which itself compiles to javascript.

answered Oct 11 '11 at 12:56

jtmcdole

566
4
8

do you have a reference for this? – TMB Oct 12 '11 at 01:30
6

I work on the dartc team and internally there's talks of restricting the native directive & keyword to dart: libraries only. You can certainly look at any core functions (e.g. isolate.dart & isolate.js) and see that appending the "native" keyword to a function signature (note: no body in the Dart version) will let you call a mangled javascript function; but we make no promise that we wont break you in the future. – jtmcdole Oct 12 '11 at 19:48
7

I understand and respect the ideal of giving the Web a clean and thought out language, but I beg you to consider an interop layer. Microsoft provided one from Com to .Net to help ensure that projects could be migrated incrementally. This hasn't hindered the success of .Net at all; I believe it helped its adoption, although they did improve it with time. If breaking is something that is of serious concern, consider an invitational program for major libraries such a jQuery, MooTools, and script.aculo.us. Thank you. – TMB Oct 12 '11 at 23:02
2

I invite you to make a feature request through our issue tracker @ [link](http://code.google.com/p/dart/issues/). I do not believe this decision has been cast in stone yet. – jtmcdole Oct 13 '11 at 18:50
1

Just pointing out that this has been brought up as an issue again: http://code.google.com/p/dart/issues/detail?id=1108 – jtmcdole Jan 10 '12 at 16:42
@TMB this answer has been superseded by Seth's. Consider changing the accepted answer. – antony.trupe Jul 05 '12 at 23:02
@TMB I feel there is little need for something like a Dart version of jQuery. I would much more prefer individual libraries taking care of random things like animation. – Tower Aug 16 '12 at 15:20

score 9 · Answer 3 · answered Oct 30 '15 at 15:43

There is now a new simpler way https://pub.dartlang.org/packages/js (currently version 0.6.0-beta.6)

Make JS classes and functions available to Dart like:

@JS("JSON.stringify")
external String stringify(obj);

@JS('google.maps')
library maps;

// Invokes the JavaScript getter `google.maps.map`.
external Map get map;

// `new Map` invokes JavaScript `new google.maps.Map(location)`
@JS()
class Map {
  external Map(Location location);
  external Location getLocation();
}

// `new Location(...)` invokes JavaScript `new google.maps.LatLng(...)`
//
// We recommend against using custom JavaScript names whenever
// possible. It is easier for users if the JavaScript names and Dart names
// are consistent.
@JS("LatLng")
class Location {
  external Location(num lat, num lng);
}

for more see the readme of the package

score 4 · Answer 4 · answered Dec 26 '13 at 23:09

4

There is also a dart:js library. And here is an article explaining how to use this library for interoperating with JavaScript.

answered Dec 26 '13 at 23:09

Shailen Tuli

13,815
5
40
51

1

Note the link is inaccurate. Dart/JS which is part of the main dart libraries is much easier and cleaner to use to interface to javascript. I'm not seeing anything official on the topic, but it is part of the SDK: https://api.dartlang.org/stable/1.17.1/dart-js/dart-js-library.html – BeatingToADifferentRobot Jun 21 '16 at 02:35

Will Dart support the use of existing JavaScript libraries?

4 Answers4

Linked