Summary - Web Dart

Combine dart2js, dart:html and js_interop to write a web component.

Summary - Web Dart

In this group we learned the ways to bring Dart to the web. dart2js compiles Dart to JavaScript; dart2wasm compiles to WebAssembly and is faster. dart:html is the browser DOM library; dart:js_interop builds a type-safe bridge with JS; jaspr is a reactive web framework.

In this summary we will write a small program that brings dart2js and dart2wasm together. The program statically prints what each compiler produces. This is a small map of the web Dart ecosystem.

Exercise Web Dart summary

Add import 'dart:js_interop';. Declare @ JS() external void consoleLog(JSString msg);. In main add print('Summary: Web Dart'), print('dart2js → JavaScript') and print('dart2wasm → WebAssembly').

Show example solution

import 'dart:js_interop';

@JS()
external void consoleLog(JSString msg);

void main() {
  print('Summary: Web Dart');
  print('dart2js → JavaScript');
  print('dart2wasm → WebAssembly');
}

Test yourself

Which tool compiles to WebAssembly?
- dart2js
- dart2wasm
- dart:html
- jaspr
Show answer

dart2wasm — dart2wasm compiles Dart to WebAssembly.
Match the web Dart tools

dart2js

JavaScript
dart2wasm

WebAssembly
dart:html

DOM
dart:js_interop

JS bridge

The StatelessComponent connector

class App extends ____ { ... }

Show answer

class App extends StatelessComponent { ... }

Next lesson: args

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies