Materi video ini membahas bagaimana Dart dan Flutter bekerja ketika kita sedang mengembangkan aplikasi (development) dan ketika aplikasi siap diberikan kepada pengguna (deployment/release).

Topik ini memang agak membingungkan di awal karena ada istilah JIT, AOT, DVM, Dev Compiler, dart2js, dan lain-lain. Kita bahas perlahan dari konsep paling sederhana.

1. Gambaran besarnya: Development vs Deployment

Ketika membuat aplikasi Flutter/Dart, secara sederhana ada dua kondisi:

                 APLIKASI
                    │
          ┌─────────┴─────────┐
          │                   │
    DEVELOPMENT           DEPLOYMENT
    (pengembangan)        (produksi)
          │                   │
     JIT / tooling            AOT
     Hot Reload               Optimasi
     Debugging                Performance
     Testing                  Ukuran aplikasi

Development

Development adalah saat kita sebagai developer sedang membuat aplikasi.

Kita mungkin melakukan:

Tulis kode
   ↓
Run
   ↓
Lihat hasil
   ↓
Ada kesalahan?
   ↓
Edit kode
   ↓
Run lagi

Proses ini bisa terjadi berkali-kali.

Karena itu, kita ingin proses perubahan kode secepat mungkin.

Contohnya ketika menggunakan Flutter:

Text("Hello")

kemudian kita ubah:

Text("Hello Flutter")

Kita ingin hasilnya bisa terlihat dengan cepat tanpa harus membangun seluruh aplikasi dari awal.

Inilah salah satu alasan adanya JIT dan Hot Reload dalam mode development.

2. Deployment / Release

Deployment adalah ketika aplikasi sudah siap digunakan oleh pengguna.

Misalnya aplikasi kita sudah selesai:

Coding
  ↓
Testing
  ↓
Debugging
  ↓
Build
  ↓
Release
  ↓
User

Pada tahap ini kita tidak terlalu membutuhkan proses edit kode secepat development.

Yang lebih penting adalah:

• aplikasi cepat dijalankan
• performanya bagus
• ukurannya efisien
• kode sudah dioptimalkan
• cocok dengan platform tujuan

Karena kebutuhan development dan production berbeda, teknik kompilasinya juga berbeda.

3. Kenapa tidak menggunakan satu teknik saja?

Ini pertanyaan yang sangat penting.

Bayangkan kita ingin membuat mobil.

Ketika merancang mobil, kita ingin:

“Saya harus bisa mengubah desain dengan cepat.”

Tetapi ketika mobil dijual ke pelanggan, kita ingin:

“Mobil harus sudah optimal, efisien, dan siap digunakan.”

Kebutuhannya berbeda.

Begitu juga software.

Developer membutuhkan:

Perubahan kode cepat
↓
Compile cepat
↓
Debug cepat
↓
Hot Reload

User membutuhkan:

Aplikasi siap
↓
Startup cepat
↓
Performance bagus
↓
Optimasi

Karena itu Flutter/Dart menggunakan pendekatan berbeda untuk development dan production.

4. JIT — Just In Time

Sekarang kita masuk ke istilah pertama:

JIT = Just In Time compilation.

Secara sederhana:

Kode dikompilasi/dikonversi saat program sedang dijalankan atau dibutuhkan oleh runtime.

JIT sangat berguna ketika kita sedang mengembangkan aplikasi.

5. Mengapa JIT berguna untuk development?

Bayangkan compiler tradisional.

Kita punya:

Source Code
    ↓
Compiler
    ↓
Program
    ↓
Run

Kemudian kita mengubah kode.

Misalnya awalnya:

Text("Hello");

kita ubah menjadi:

Text("Hello Flutter");

Dalam alur tradisional, kita biasanya perlu:

Stop aplikasi
      ↓
Ubah kode
      ↓
Compile ulang
      ↓
Run lagi
      ↓
Lihat hasil

Kalau proses compile memakan waktu lama dan dilakukan ratusan kali sehari, tentu sangat mengganggu produktivitas.

6. JIT dan Hot Reload

Dengan dukungan JIT dan tooling Flutter, proses development bisa dibuat jauh lebih cepat.

Misalnya:

Aplikasi sedang berjalan
        ↓
Ubah kode
        ↓
Save
        ↓
Hot Reload
        ↓
Perubahan terlihat

Contoh:

Awalnya:

Text("Halo");

Kita ubah:

Text("Halo Budi");

Kemudian melakukan Hot Reload.

Flutter dapat memperbarui aplikasi yang sedang berjalan tanpa harus selalu melakukan full restart.

Inilah salah satu fitur yang membuat proses development Flutter terasa cepat.

7. Apa sebenarnya Hot Reload?

Hot Reload adalah fitur development Flutter yang memungkinkan perubahan kode tertentu dimuat ke aplikasi yang sedang berjalan sehingga kita dapat melihat perubahan dengan cepat.

Misalnya kita sedang membuat UI:

┌───────────────────┐
│      Hello        │
│                   │
│     [ Button ]    │
└───────────────────┘

Kita ubah warna, teks, ukuran, atau layout.

Dengan Hot Reload:

Edit kode
   ↓
Hot Reload
   ↓
UI diperbarui

Kita tidak perlu selalu memulai aplikasi dari awal.

Ini sangat berguna ketika sedang melakukan:

• desain UI
• mengatur layout
• mengubah warna
• mengubah teks
• memperbaiki tampilan

8. Dynamic Compilation

JIT juga berkaitan dengan konsep dynamic compilation.

Artinya, kode dapat dikompilasi selama program berjalan.

Secara sederhana:

Source Code
    ↓
JIT
    ↓
Runtime
    ↓
Program berjalan

Kemudian ketika ada perubahan:

Kode berubah
    ↓
JIT memproses perubahan
    ↓
Program diperbarui

Inilah yang membantu siklus development menjadi cepat.

9. DVM — Dart Virtual Machine

Video juga membahas:

DVM = Dart Virtual Machine.

Secara sederhana, Dart Virtual Machine adalah lingkungan runtime yang dapat menjalankan kode Dart dalam konteks yang sesuai.

Gambaran sederhananya:

Kode Dart
   ↓
Dart VM
   ↓
Program berjalan

Dalam development, Dart VM membantu menyediakan lingkungan untuk menjalankan kode Dart dan mendukung fitur-fitur development seperti debugging serta mekanisme yang mendukung perubahan kode dengan cepat.

10. JIT + Dart VM

Sekarang kita gabungkan:

                 DEVELOPMENT
                      │
                      ▼
                  Dart Code
                      │
                      ▼
                     JIT
                      │
                      ▼
                  Dart VM
                      │
                      ▼
              Program berjalan
                      │
                      ▼
                 Hot Reload

Ini adalah gambaran konseptualnya.

Tujuan utamanya:

Membuat developer bisa mengembangkan dan menguji aplikasi secepat mungkin.

11. Bagaimana dengan Android, iOS, dan Desktop?

Ketika development Flutter dilakukan, targetnya bisa berbeda.

Misalnya:

Flutter Project
      │
      ├── Android
      ├── iOS
      ├── Windows
      ├── macOS
      └── Linux

Flutter menyediakan tooling yang memungkinkan kita menjalankan dan melakukan debugging aplikasi pada target tersebut.

Tetapi jangan mengartikan bahwa kode Dart secara mentah langsung dieksekusi sama persis di semua perangkat. Flutter memiliki mekanisme build/runtime yang berbeda tergantung target dan mode build.

12. Development Web

Sekarang kita pindah ke Flutter Web / Dart Web.

Untuk web, kita mempunyai masalah khusus.

Browser pada umumnya menjalankan JavaScript sebagai bahasa runtime web utama.

Sedangkan kita menulis:

Dart

Maka dibutuhkan proses yang mengubah Dart menjadi kode yang dapat dijalankan oleh browser.

Secara sederhana:

Dart Code
   ↓
Compiler
   ↓
JavaScript
   ↓
Browser

13. Development Compiler

Dalam development web, Flutter/Dart menggunakan tooling compiler yang dirancang untuk membuat proses development menjadi cepat.

Materi video menyebut DDC (Dart Development Compiler).

Secara sederhana:

DDC digunakan dalam development Dart Web untuk menghasilkan JavaScript yang mendukung siklus development yang cepat.

Tujuannya bukan sekadar menghasilkan JavaScript final yang paling kecil dan paling optimal.

Tujuan utamanya adalah:

developer dapat mengembangkan aplikasi dengan cepat.

14. Mengapa development web membutuhkan compiler khusus?

Misalnya kita memiliki aplikasi yang sangat besar:

1000 file Dart

Kemudian kita mengubah satu bagian kecil.

Kita tentu tidak ingin seluruh aplikasi diproses dari awal setiap kali melakukan perubahan.

Tooling development dirancang agar proses seperti ini lebih cepat.

Secara konsep:

Perubahan kecil
     ↓
Compiler development
     ↓
Proses bagian yang diperlukan
     ↓
Hasil diperbarui

Ini membantu mempercepat development cycle.

15. Sekarang masuk ke Production: AOT

Saat aplikasi siap diberikan kepada pengguna, kita masuk ke:

AOT = Ahead Of Time compilation.

Berbeda dengan JIT.

JIT:

“Kompilasi ketika program berjalan/dibutuhkan.”

AOT:

“Kompilasi dilakukan sebelum aplikasi dijalankan oleh pengguna.”

Gambaran sederhananya:

Dart Code
    ↓
AOT Compiler
    ↓
Native / target executable
    ↓
User menjalankan aplikasi

16. Kenapa production menggunakan AOT?

Karena kebutuhan pengguna berbeda dengan developer.

Developer menginginkan:

Compile cepat
Hot Reload
Debugging
Eksperimen cepat

Pengguna menginginkan:

Startup cepat
Performance bagus
Aplikasi siap digunakan

Maka production build dioptimalkan terlebih dahulu.

17. AOT menghasilkan kode untuk platform tertentu

Dalam deployment, kode dapat dikompilasi untuk target platform tertentu.

Misalnya:

              Dart
                │
               AOT
                │
       ┌────────┼────────┐
       ↓        ↓        ↓
    Android     iOS    Desktop

Kemudian masing-masing platform memiliki format dan proses packaging/build masing-masing.

Contohnya secara konseptual:

Android → APK / AAB
iOS     → IPA/app bundle
Windows → EXE / aplikasi Windows
macOS   → aplikasi macOS
Linux   → executable/package Linux

Perlu diluruskan dari video: .apk, .ipa, dan .exe bukan sekadar “hasil AOT” secara langsung. Itu adalah format/package aplikasi platform yang dihasilkan melalui keseluruhan proses build dan packaging.

18. AOT dan Multi-platform

Inilah yang membuat Flutter menarik.

Kita bisa mempunyai:

              Flutter/Dart
                   │
             Source Code
                   │
                  AOT
                   │
       ┌───────────┼───────────┐
       ↓           ↓           ↓
    Android       iOS       Desktop

Codebase utama bisa digunakan untuk berbagai platform, kemudian dibuild menjadi aplikasi yang sesuai dengan target platform.

Jadi:

Satu codebase ≠ satu file binary untuk semua platform.

Melainkan:

Satu codebase → build berbeda untuk masing-masing platform.

19. Deployment Web dan dart2js

Sekarang kita kembali ke Web.

Ketika aplikasi web akan dirilis, kita membutuhkan hasil JavaScript yang sudah dioptimalkan.

Untuk Dart Web, salah satu compiler yang digunakan untuk menghasilkan JavaScript production adalah:

dart2js

Namanya berasal dari:

Dart → JavaScript

Gambaran sederhananya:

Dart
 ↓
dart2js
 ↓
Optimized JavaScript
 ↓
Web Browser

Browser kemudian menjalankan hasil JavaScript tersebut.

20. Kenapa dart2js berbeda dengan compiler development?

Karena tujuannya berbeda.

Development

Yang penting:

Compile cepat
↓
Perubahan cepat
↓
Debugging mudah

Production

Yang penting:

Optimasi
↓
Ukuran efisien
↓
Performance
↓
Siap untuk user

Jadi secara sederhana:

21. Native Application

Video juga menyebut native application.

Dalam konteks Flutter/Dart modern, ketika membangun aplikasi desktop native, Dart dapat dikompilasi menjadi kode machine/native yang sesuai dengan platform target.

Misalnya:

Dart
 │
 ├── Windows
 │
 ├── Linux
 │
 └── macOS

Jadi aplikasi dapat dibuat untuk sistem operasi desktop tersebut.

22. Bagaimana seluruh prosesnya?

Sekarang kita gabungkan semuanya.

Development Mobile/Desktop

                Dart Code
                    │
                    ▼
                   JIT
                    │
                    ▼
                 Runtime
                    │
                    ▼
              Development App
                    │
                    ▼
               Hot Reload

Tujuan:

Mempercepat developer dalam membuat aplikasi.

Production Mobile/Desktop

                Dart Code
                    │
                    ▼
                   AOT
                    │
                    ▼
          Target Native Code
                    │
                    ▼
              Build/Package
                    │
                    ▼
             Release App
                    │
                    ▼
                  User

Tujuan:

Mendapatkan aplikasi yang siap digunakan dengan performa yang baik.

23. Development Web

                Dart Code
                    │
                    ▼
              Development
                Compiler
                    │
                    ▼
               JavaScript
                    │
                    ▼
              Web Browser

Fokus:

Development cycle yang cepat.

24. Production Web

                Dart Code
                    │
                    ▼
                dart2js
                    │
                    ▼
         Optimized JavaScript
                    │
                    ▼
              Web Browser
                    │
                    ▼
                  User

Fokus:

Optimasi untuk aplikasi yang akan digunakan user.

25. Analogi sederhana

Agar lebih mudah diingat, bayangkan kita sedang memasak makanan untuk restoran.

Development

Kita sedang mencoba resep.

Coba resep
   ↓
Cicipi
   ↓
Kurang garam
   ↓
Ubah
   ↓
Cicipi lagi

Kita ingin perubahan cepat.

Ini mirip dengan:

JIT + Hot Reload

Production

Makanan sudah masuk menu restoran.

Kita ingin:

Resep final
   ↓
Masak dengan proses optimal
   ↓
Sajikan
   ↓
Pelanggan

Tidak perlu setiap pelanggan menunggu kita bereksperimen dengan resep.

Ini mirip dengan:

AOT / production build

26. Hal yang perlu kamu hafalkan

Kalau kamu baru belajar Flutter, untuk sementara tidak perlu menghafal semua detail compiler.

Cukup pahami hubungan berikut:

DEVELOPMENT
     │
     ├── JIT
     ├── Dart VM / runtime tooling
     ├── Debugging
     └── Hot Reload
     
          ↓

       DEVELOPER

Sedangkan:

PRODUCTION
     │
     ├── AOT
     ├── Optimasi
     ├── Native target
     └── Release build
     
          ↓

        USER

Untuk Web:

WEB DEVELOPMENT
     ↓
Development Compiler (DDC)
     ↓
JavaScript
     ↓
Browser

Dan:

WEB PRODUCTION
     ↓
dart2js
     ↓
Optimized JavaScript
     ↓
Browser

🧠 Kesimpulan

Inti video ini sebenarnya sangat sederhana:

Dart/Flutter menggunakan pendekatan berbeda saat development dan saat aplikasi dirilis karena kebutuhan developer dan pengguna berbeda.

Saat development

Kita ingin:

cepat mengubah → cepat menjalankan → cepat melihat hasil

Maka digunakan tooling/runtime yang mendukung JIT, debugging, dan Hot Reload.

Saat production

Kita ingin:

aplikasi cepat → performa bagus → teroptimasi → siap digunakan

Maka untuk target native Flutter menggunakan AOT compilation dalam release build.

Untuk Web

Development
Dart
 ↓
DDC/development tooling
 ↓
JavaScript
 ↓
Browser

Sedangkan production:

Production
Dart
 ↓
dart2js
 ↓
Optimized JavaScript
 ↓
Browser

Jadi, JIT bukan berarti “lebih bagus” daripada AOT, dan AOT bukan berarti “lebih bagus” daripada JIT. Keduanya dibuat untuk kebutuhan yang berbeda.

JIT → memudahkan developer saat membuat aplikasi. AOT → mengoptimalkan aplikasi saat diberikan kepada pengguna.

Dan inilah alasan mengapa ketika kamu menjalankan Flutter dalam debug mode, pengalaman development seperti Hot Reload terasa sangat cepat, sedangkan ketika melakukan release build, Flutter melakukan proses build/kompilasi yang lebih serius untuk menghasilkan aplikasi yang siap didistribusikan.