What is the difference between darts: js and js package?

Question

Throughout the Dart documentation, it is recommended that you use the js package for javascript interaction.

However, I recently discovered that the dart:js package exists in the SDK, which seems to have a similar (but not the same) interface.

Are there any differences between these packages? Are they equivalent? Which one is recommended?

Answer 1

Interaction with Js began with the package : js . It was built using window.postMessage .

Dart: js was later added to improve performance and reduce the size of the compiled js file. The main objectives were:

• area removal and manual life cycle management
• avoiding noSuchMethod so that the compilation size is as small as possible
• renaming objects to make the API more understandable

Once dart: js was ready, package: js was rewritten to use dart: js under the cover.

package: js provides a simpler Api, which is achieved by increasing the size of js (because package: js uses dart: mirrors and noSuchMethod).

Here is the same as with the package: js and dart: js:

 import 'package:js/js.dart' as js; main() { var pixi = new js.Proxy(js.context.PIXI.Stage, 0xffffff); var renderer = js.context.PIXI.autoDetectRenderer(400, 400); document.body.append(renderer.view); } 

---

 import 'dart:js' as js; main() { var pixi = new js.JsObject(js.context['PIXI']['Stage'], [0xffffff]); var renderer = js.context['PIXI'].callMethod('autoDetectRenderer', [400, 400]); document.body.append(renderer['view']); } 

Answer 2

I got the answer no matter what on GitHub:

This stack overflow comment has been deprecated. Prefer package:js - we are working on updating documents to explicitly recommend this. It is no longer implemented on window.postMessage (it was a solution based on Dartium) - it is processed directly in compilers and should be more efficient than dart:js .

Source: https://github.com/flutter/flutter/issues/35588#issuecomment-522097151