What is a difference between dart:js and js package? What is a difference between dart:js and js package? dart dart

What is a difference between dart:js and js package?


Js interop started with package:js. It was built with with window.postMessage.

Later dart:js has been added to provide better performance and reduce the size of the compiled js file. Basically the goal were :

  • removing scopes and lifecycle manual handling
  • avoiding noSuchMethod to keep compilation size as low as possible
  • renaming objects to make the api more understandable

Once dart:js has been ready, package:js has been rewrite to use dart:js under the cover.

package:js provides a simpler Api that comes at the cost of an increase of the js size (because package:js uses dart:mirrors and noSuchMethod).

Here is the same thing done with 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']);}


I've received response regardless this on GitHub:

That stack overflow comment is way out of date. Prefer package:js - we're working on updating docs to explicitly recommend that. It's no longer implemented over window.postMessage (that was a Dartium-based solution) - it's handled directly in the compilers and should be more efficient than dart:js.

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