Learn Dart - Web Development with Dart

#Introduction

The browser is still the most universal platform in the world. Dart bridges this gap by compiling code to JavaScript that runs in any browser, without forcing you to leave Dart's type system and tooling behind. Episode 11 dissects web development with Dart.

We'll use the dart2js compiler, work with build tooling, interop with existing JavaScript, manage state and manipulate the DOM, and look at frameworks like Flutter Web.

By the end of the episode, you'll understand when to use Dart for the web and how to mix it with the existing JavaScript ecosystem.

#Web Applications with dart2js and Build Tools

#Starting a Web Project

Start from the web template provided by the Dart SDK:

dart create -t web simple_web
cd simple_web

dart create -t web simple_web creates a web project with web/ as the main directory and a pubspec.yaml containing the web dependencies. Run it in development with dart run build_runner or dart dev depending on your setup, or build directly:

#Compiling to JavaScript

The dart compile js compiler (part of the dart2js toolchain) turns Dart code into JavaScript:

dart compile js web/main.dart -o build/app.js

dart compile js web/main.dart produces an app.js that can be embedded into HTML. This compiler also performs tree shaking, so only code that's actually used ends up in the output.

#Development vs Release Mode

For development, use a mode that supports hot reload and debugging, for example dart run dev with dart webdev serve. For production, the release compilation produces JavaScript that's minified and optimized for size and speed.

#Interop with JavaScript

#JS Annotations in package:js

Dart and JavaScript code can communicate in both directions through package:js:

import 'package:js/js.dart';
 
@JS('window.confirm')
external bool confirm(String pesan);
 
void main() {
  var jawaban = confirm('Lanjutkan?');
  print(jawaban);
}

@JS('window.confirm') maps a Dart function to the native JavaScript function on the global window. Interop lets you use JavaScript libraries like maps and charts without rewriting them.

#Using JavaScript from Dart

The same pattern works in reverse: Dart functions can be exposed to JavaScript with @JS() and @anonymous. This matters when integrating with a frontend already built by another team.

#State Management and DOM Manipulation

#Accessing the DOM from Dart

Dart provides DOM access with safer syntax:

import 'package:web/web.dart' as web;
 
void main() {
  var tombol = web.document.querySelector('#tombol');
  tombol?.addEventListener('click', (web.Event e) {
    web.window.alert('Tombol diklik');
  });
}

web.document.querySelector('#tombol') finds a DOM element, and addEventListener attaches a handler. The web package is the modern standard replacing the retired dart:html.

#Client-Side State Management

For complex applications, manage state with proven patterns:

• Simple model: manual setState or streams for UIs that follow data.
• Provider/Riverpod: dependency injection and reactive state, popular in Flutter.
• Redux-style: a single store with reducers for large global state.

Start with the simplest approach and add complexity only when it's truly needed.

#Frameworks: Flutter Web and AngularDart

#Flutter Web

Flutter Web runs Flutter widgets directly in the browser via compilation to JavaScript or WebAssembly. You write the UI once with widgets, then run it on mobile, desktop, and web. This is the fastest path if your team already uses Flutter.

#AngularDart and Alternatives

AngularDart was once the main choice for large web applications with Dart, but it's no longer recommended due to declining support. For fully-Dart web applications without Flutter, consider:

flutter create --platforms web web_app
cd web_app
flutter run -d chrome

flutter run -d chrome runs a Flutter application in the browser with hot reload. If your target is purely web without mobile, another option is to stay with pure Dart using dart compile js.

#Conclusion

Key takeaways:

• dart create -t web scaffolds a Dart web project with the web/ structure.
• dart compile js converts Dart to JavaScript with tree shaking.
• package:js and @JS connect Dart with JavaScript in both directions.
• package:web replaces dart:html for modern DOM access.
• State management is chosen by complexity: from setState to Riverpod.
• Flutter Web runs one widget codebase in the browser, mobile, and desktop.

In the next episode 12, we'll cover Flutter and cross-platform development — Flutter's architecture and Dart integration, building a simple Flutter app, the widget tree and state management with hot reload, and how to share Dart code between Flutter and the server.