Özet - Web Dart
- Dart kursu
- İleri seviye
- Ders 54/83
- 5 dk
dart2js, dart:html ve js_interop'u birleştirerek bir web bileşeni yazarsın.
Özet - Web Dart
Bu grupta Dart'ı web'e taşımanın yollarını öğrendik. dart2js Dart'ı JavaScript'e derler; dart2wasm WebAssembly'e derler ve daha hızlıdır. dart:html tarayıcı DOM kütüphanesidir; dart:js_interop JS ile tip güvenli köprü kurar; jaspr reaktif web framework'üdür.
Bu özette dart2js ve dart2wasm'ı bir araya getiren küçük bir program yazacağız. Program, her iki derleyicinin ne ürettiğini statik olarak yazdırır. Bu, web Dart ekosisteminin küçük bir haritasıdır.
Uygulama Web Dart özeti
import 'dart:js_interop'; ekle. @ JS() ile external void consoleLog(JSString msg); bildir. main içinde print('Özet: Web Dart'), print('dart2js → JavaScript') ve print('dart2wasm → WebAssembly') çağrılarını ekle.
Başlangıç kodu
// dart:js_interop paketini içe aktar
// @ JS() external consoleLog bildirimi ekle
void main() {
// özet mesajını yazdır
}Örnek çözüm
import 'dart:js_interop';
@JS()
external void consoleLog(JSString msg);
void main() {
print('Özet: Web Dart');
print('dart2js → JavaScript');
print('dart2wasm → WebAssembly');
}Beklenen çıktı
Özet: Web Dart dart2js → JavaScript dart2wasm → WebAssembly
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 WebAssembly'e derleyen araç?
- dart2js
- dart2wasm Doğru cevap
- dart:html
- jaspr
Açıklama: dart2wasm Dart'ı WebAssembly'e derler.
2 Web Dart araçlarını eşleştir
| Kavram | Anlamı |
|---|---|
dart2js |
JavaScript |
dart2wasm |
WebAssembly |
dart:html |
DOM |
dart:js_interop |
JS köprüsü |
3 StatelessComponent bağlacı
class App extends ____ { ... }class App extends StatelessComponent { ... }Açıklama: jaspr bileşeni StatelessComponent'ten türetilir.