Belajar Dart - Web Development dengan Dart

#Pendahuluan

Browser masih menjadi platform paling universal di dunia. Dart menjembatani kesenjangan ini dengan mengkompilasi kode menjadi JavaScript yang berjalan di browser mana pun, tanpa memaksa kalian meninggalkan sistem tipe dan tooling Dart. Episode 11 membedah pengembangan web dengan Dart.

Kita akan memakai kompiler dart2js, bekerja dengan tooling build, melakukan interop dengan JavaScript yang sudah ada, mengelola state dan memanipulasi DOM, serta melihat framework seperti Flutter Web.

Di akhir episode, kalian akan memahami kapan memakai Dart untuk web dan bagaimana mencampurnya dengan ekosistem JavaScript yang sudah ada.

#Aplikasi Web dengan dart2js dan Build Tools

#Memulai Project Web

Mulai dari template web yang disediakan Dart SDK:

dart create -t web simple_web
cd simple_web

dart create -t web simple_web membuat project web dengan web/ sebagai direktori utama dan pubspec.yaml yang berisi dependency web. Jalankan di development dengan dart run build_runner atau dart dev tergantung setup, atau langsung build:

#Mengkompilasi ke JavaScript

Kompiler dart compile js (bagian dari toolchain dart2js) mengubah kode Dart menjadi JavaScript:

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

dart compile js web/main.dart menghasilkan app.js yang bisa disisipkan ke HTML. Kompiler ini juga melakukan tree shaking sehingga hanya kode yang benar-benar dipakai yang masuk ke output.

#Mode Development vs Release

Untuk pengembangan gunakan mode yang mendukung hot reload dan debugging, misalnya dart run dev dengan dart webdev serve. Untuk produksi, kompilasi release menghasilkan JavaScript yang diminifikasi dan dioptimalkan untuk ukuran serta kecepatan.

#Interop dengan JavaScript

#Anotasi JS di package:js

Kode Dart dan JavaScript dapat berkomunikasi dua arah melalui 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') memetakan fungsi Dart ke fungsi JavaScript native di global window. Interop memungkinkan memakai library JavaScript seperti peta dan chart tanpa menulis ulang.

#Memakai JavaScript dari Dart

Pola yang sama berlaku sebaliknya: fungsi Dart bisa diekspos ke JavaScript dengan @JS() dan @anonymous. Ini penting saat integrasi dengan frontend yang sudah dibangun tim lain.

#State Management dan Manipulasi DOM

#Akses DOM dari Dart

Dart menyediakan akses DOM dengan sintaks yang lebih aman:

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') mencari elemen DOM, dan addEventListener memasang handler. Package web adalah standar modern pengganti dart:html yang sedang dipensiunkan.

#State Management di Sisi Klien

Untuk aplikasi kompleks, kelola state dengan pola yang teruji:

• Model sederhana: setState manual atau stream untuk UI yang mengikuti data.
• Provider/Riverpod: dependency injection dan state reaktif, populer di Flutter.
• Redux-style: satu store dengan reducer untuk state global yang besar.

Mulai dari yang paling sederhana dan tambah kompleksitas hanya saat benar-benar dibutuhkan.

#Framework: Flutter Web dan AngularDart

#Flutter Web

Flutter Web menjalankan widget Flutter langsung di browser melalui kompilasi ke JavaScript atau WebAssembly. Kalian menulis UI sekali dengan widget, lalu menjalankannya di mobile, desktop, dan web. Ini jalur paling cepat jika tim sudah memakai Flutter.

#AngularDart dan Alternatif

AngularDart pernah menjadi pilihan utama untuk aplikasi web besar dengan Dart, namun kini kurang direkomendasikan karena dukungan yang menurun. Untuk aplikasi web yang sepenuhnya Dart tanpa Flutter, pertimbangkan:

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

flutter run -d chrome menjalankan aplikasi Flutter di browser dengan hot reload. Jika target kalian murni web tanpa mobile, opsi lain adalah tetap memakai Dart murni dengan dart compile js.

#Penutup

Inti yang harus dibawa pulang:

• dart create -t web membentuk project web Dart dengan struktur web/.
• dart compile js mengubah Dart menjadi JavaScript dengan tree shaking.
• package:js dan @JS menghubungkan Dart dengan JavaScript dua arah.
• package:web menggantikan dart:html untuk akses DOM modern.
• State management dipilih berdasarkan kompleksitas: dari setState hingga Riverpod.
• Flutter Web menjalankan satu codebase widget di browser, mobile, dan desktop.

Di episode 12 selanjutnya kita akan membahas Flutter dan cross-platform development — arsitektur Flutter dan integrasi Dart, membuat aplikasi Flutter sederhana, widget tree dan state management dengan hot reload, serta cara berbagi kode Dart antara Flutter dan server.