Runtime, Hot Reload dan pembangunan dalam pengembangan seluler: apa itu, konsep kunci dan cara kerjanya

Runtime dan Reflection: iOS Runtime, Method Swizzling dan pengiriman dinamis

Runtime (lingkungan eksekusi) adalah perangkat lunak yang mengelola eksekusi aplikasi. Dalam konteks iOS Runtime, ini adalah sistem dinamis Objective-C yang memungkinkan pengiriman pesan ke objek, pembuatan kelas secara instan, dan penggantian metode saat runtime. Ini dimungkinkan karena Objective-C adalah bahasa yang diketik secara dinamis yang dibangun di atas C.

Reflection adalah kemampuan program untuk memeriksa dan memodifikasi strukturnya sendiri saat runtime. Di iOS Runtime, ini diimplementasikan melalui fungsi seperti class_getInstanceMethod, method_exchangeImplementations dan objc_getAssociatedObject. Di Kotlin/Java, refleksi menggunakan KClass / java.lang.reflect.

Di IT Sectr, kami sangat jarang menggunakan Runtime — hanya untuk tugas spesifik yang tidak memiliki alternatif. Misalnya, Method Swizzling untuk pencatatan analitik terpusat atau memperbaiki bug di pustaka. Namun, Runtime adalah alat yang kuat yang membutuhkan pemahaman mendalam dan kehati-hatian.

Method Swizzling

Method Swizzling adalah teknik untuk mengganti implementasi metode Objective-C dengan yang lain saat runtime. Ini adalah kasus khusus dari Pemrograman Berorientasi Aspek (AOP) untuk iOS. Swizzling memungkinkan penambahan pencatatan, analitik, atau caching ke metode yang ada tanpa mengubah kode sumbernya.

Contoh tipikal: mengganti viewWillAppear: di UIViewController untuk menambahkan pencatatan layar otomatis. Penting: swizzling harus dilakukan di metode +load atau +initialize untuk memastikan eksekusi sebelum kelas digunakan. Swizzling yang salah dapat menyebabkan perilaku tidak terdefinisi dan bug yang sulit di-debug.

// Method Swizzling untuk mencatat viewWillAppear:
@implementation UIViewController (Tracking)

+ (void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        Class class = [self class];
        SEL originalSelector = @selector(viewWillAppear:);
        SEL swizzledSelector = @selector(xxx_viewWillAppear:);
        
        Method originalMethod = class_getInstanceMethod(class, originalSelector);
        Method swizzledMethod = class_getInstanceMethod(class, swizzledSelector);
        method_exchangeImplementations(originalMethod, swizzledMethod);
    });
}

- (void)xxx_viewWillAppear:(BOOL)animated {
    [self xxx_viewWillAppear:animated]; // memanggil metode asli
    [Analytics logScreen:NSStringFromClass([self class])];
}

@end

Kode ini menggantikan viewWillAppear: di semua UIViewController melalui swizzling. Setelah method_exchangeImplementations, pemanggilan viewWillAppear: asli menyebabkan pemanggilan xxx_viewWillAppear:, yang memanggil metode asli (melalui panggilan rekursif) dan menambahkan analitik. DispatchOnce menjamin eksekusi swizzling satu kali.

Alat Web (Transpilation, Polyfill, Bundler, Webpack, Metro)

Pengembangan web modern dan pengembangan seluler dengan React Native atau Flutter tidak mungkin tanpa alat pembangunan. Transpilation adalah mengonversi kode dari satu bahasa ke bahasa lain. Contoh paling populer: TypeScript → JavaScript. Transpiler (Babel, tsc) mengonversi kode modern ke versi yang kompatibel mundur.

Polyfill adalah kode yang menambahkan fungsionalitas yang hilang ke browser lama. Misalnya, Promise.allSettled() tidak berfungsi di Internet Explorer, tetapi polyfill menambahkan kemampuan ini. Tidak seperti Runtime asli, yang mengelola eksekusi kode langsung di perangkat, polyfill dan transpiler bekerja di tingkat abstraksi bahasa — mereka menyesuaikan sintaks dan API, tetapi tidak mengganggu lingkungan eksekusi.

Webpack adalah bundler paling populer (digunakan di 72% proyek menurut State of JS 2024). Metro adalah bundler Facebook, digunakan secara default di React Native. Reflection di JavaScript ada melalui Object.getPrototypeOf, Proxy dan Reflect API — mekanisme ini memungkinkan pemeriksaan dan modifikasi objek saat runtime, yang secara fundamental berbeda dari analisis modul statis di bundler. Webpack menggunakan file konfigurasi yang menggambarkan titik masuk, keluaran, loader (untuk memproses berbagai jenis file) dan plugin (untuk fungsionalitas tambahan).

// webpack.config.js — konfigurasi minimal
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    mode: 'production',
};

Konfigurasi ini mendefinisikan titik masuk (index.js), file keluaran (bundle.js) dan aturan untuk memproses JavaScript melalui Babel. Mode production mengaktifkan optimasi: minifikasi, tree shaking dan deteksi lingkungan otomatis. Pada tahap Runtime, semua optimasi ini tidak lagi memengaruhi logika — browser menjalankan bundle yang diminifikasi sebagai JavaScript biasa.

Optimasi Kode (Minification, Tree Shaking, Obfuscation)

Minification adalah proses mengompresi kode dengan menghapus spasi, komentar dan mengganti nama variabel panjang menjadi pendek. Minifier populer: Terser (JS/TS), CSSNano (CSS), html-minifier-terser. Minifikasi mengurangi ukuran file sebesar 50–70%. Dalam produksi, Runtime menjalankan kode yang diminifikasi sama seperti kode asli — perbedaannya hanya pada keterbacaan dan ukuran file, bukan pada semantik.

Tree Shaking adalah penghapusan kode mati yang tidak digunakan dalam aplikasi. Ini bekerja berdasarkan analisis statis modul ES (import/export). Jika suatu fungsi diekspor tetapi tidak pernah diimpor, Tree Shaking menghapusnya dari build akhir. Tree Shaking menganalisis kode secara statis — tidak seperti Reflection, yang bekerja secara dinamis dan dapat mengakses metode dan properti yang tidak terlihat pada waktu kompilasi.

Tree Shaking

Tree Shaking di Webpack diaktifkan secara otomatis dalam mode produksi. Satu syarat penting: kode harus menggunakan modul ES (import/export), bukan CommonJS (require). Jika pustaka ditulis dalam CommonJS, tree shaking tidak akan berfungsi. Untuk tree shaking optimal, gunakan impor yang tepat: import { merge } from 'lodash-es' alih-alih import _ from 'lodash'. Ini mengurangi ukuran bundel dari 500 KB menjadi 10 KB untuk satu fungsi.

Hot Reload

Hot Reload adalah teknologi yang memungkinkan pembaruan kode aplikasi tanpa memuat ulang secara penuh. Di React Native dan Flutter, Hot Reload memperbarui file yang diubah secara instan, mempertahankan status aplikasi saat ini. Ini secara radikal mempercepat pengembangan: perubahan terlihat dalam 1–2 detik, bukan 10–30 detik untuk pembangunan ulang penuh. Hot Reload bekerja di dalam Runtime: modul yang diubah disuntikkan ke dalam aplikasi yang berjalan tanpa memulai ulang lingkungan eksekusi.

Hot Restart adalah mulai ulang cepat aplikasi dengan kode yang diperbarui, tetapi tanpa mempertahankan status. Ini digunakan ketika Hot Reload tidak memungkinkan (misalnya, ketika kode asli atau variabel global berubah). Di IT Sectr, kami menggunakan Hot Reload di semua tahap pengembangan UI — menghemat hingga 50% waktu pada penyesuaian visual.

Tabel 3. Perbandingan alat pembangunan. Webpack adalah standar universal. Metro dikhususkan untuk React Native. Vite dan esbuild adalah generasi baru yang berfokus pada kecepatan. Rollup adalah pilihan terbaik untuk menerbitkan pustaka.

Muat Ulang Panas (Hot Reload, Hot Restart)

Hot Reload adalah teknologi yang berasal dari pengembangan web (React Hot Loader, HMR — Hot Module Replacement) dan beralih ke pengembangan seluler dengan Flutter dan React Native. Intinya: ketika file berubah, bundler mengirimkan modul yang diperbarui ke aplikasi yang berjalan, yang menggantikan kode lama tanpa kehilangan status. Tidak seperti pembangunan ulang penuh, Hot Reload tidak memulai ulang Runtime — lingkungan eksekusi terus berjalan dan modul yang diubah terhubung secara dinamis melalui mekanisme seperti HMR atau pembaruan referensi mirip Reflection.

Hot Reload berfungsi karena framework menyimpan widget (Flutter) atau komponen (React) di memori dan hanya memperbarui bagian yang diubah. Hot Restart adalah mekanisme yang lebih kasar: ia memulai ulang aplikasi sepenuhnya, tetapi lebih cepat daripada pembangunan ulang penuh karena tidak mengompilasi ulang kode asli. Di IT Sectr, kami menggunakan Hot Reload saat mengembangkan UI dan Hot Restart saat mengubah navigasi atau manajemen status.