CodeBlanks Logo Icon CodeBlanks
Login Register

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.

Practice 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').

Starter code

main.dart
// import the dart:js_interop package
// add @ JS() external consoleLog declaration

void main() {
  // print the summary message
}

Sample solution

main.dart
import 'dart:js_interop';

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

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

Expected output

Summary: Web Dart
dart2js → JavaScript
dart2wasm → WebAssembly

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which tool compiles to WebAssembly?

  • dart2js
  • dart2wasm Correct answer
  • dart:html
  • jaspr

Explanation: dart2wasm compiles Dart to WebAssembly.

2 Match the web Dart tools

Term Meaning
dart2js JavaScript
dart2wasm WebAssembly
dart:html DOM
dart:js_interop JS bridge

3 The StatelessComponent connector

Question 
class App extends ____ { ... }
Answer 
class App extends StatelessComponent { ... }

Explanation: a jaspr component extends StatelessComponent.

All lessons in Advanced

1 Isolates

  1. What are isolates?
  2. Isolate.spawn
  3. SendPort
  4. compute
  5. Isolate vs thread
  6. Summary - Isolates

2 Concurrency

  1. Event loop
  2. Microtasks
  3. Future scheduler
  4. scheduleMicrotask
  5. Zone
  6. Summary - Concurrency

3 Advanced streams

  1. Broadcast streams
  2. Stream transformer
  3. debounce and throttle
  4. Stream errors
  5. asyncExpand
  6. Summary - Advanced streams

4 Metaprogramming

  1. Reflection
  2. Mirror
  3. Dynamic invoke
  4. Macro
  5. Code generation
  6. Summary - Metaprogramming

5 Shelf server

  1. shelf
  2. Handler
  3. Middleware
  4. Router
  5. JSON response
  6. Summary - Shelf

6 HTTP client

  1. http package
  2. GET
  3. POST
  4. Headers
  5. dio
  6. Summary - HTTP

7 JSON serialization

  1. jsonDecode
  2. jsonEncode
  3. fromJson
  4. toJson
  5. json_serializable
  6. Summary - JSON

8 Database

  1. sqflite
  2. Database
  3. CRUD
  4. Transaction
  5. ORM
  6. Summary - Database

9 Web Dart

  1. dart2js
  2. dart2wasm
  3. HTML interop
  4. JS interop
  5. Web framework
  6. Summary - Web Dart

10 CLI applications

  1. args
  2. ArgParser
  3. stdin/stdout
  4. Progress bar
  5. dcli
  6. Summary - CLI

11 Logging

  1. logging
  2. Log levels
  3. Logger
  4. Handler
  5. Structured logging
  6. Summary - Logging

12 Security

  1. crypto
  2. HMAC
  3. encrypt
  4. Secure random
  5. Password hashing
  6. Summary - Security

13 Performance

  1. Benchmark
  2. Stopwatch
  3. Memory
  4. Optimization
  5. Profiling
  6. Summary - Performance

14 Advanced final

  1. Project design
  2. Shelf API
  3. Database
  4. Concurrency
  5. Putting it together