Runtime, Hot Reload at pagbuo sa mobile development: ano ito, mga pangunahing konsepto at paano ito gumagana

Runtime at Reflection: iOS Runtime, Method Swizzling at dinamikong dispatch

Runtime (execution environment) ay ang software na namamahala sa pag-execute ng application. Sa konteksto ng iOS Runtime, ito ang dinamikong sistema ng Objective-C na nagpapahintulot sa pagpapadala ng mensahe sa mga object, paglikha ng mga klase on the fly at pagpapalit ng mga metodo habang tumatakbo. Ito ay posible dahil ang Objective-C ay isang dinamikong nai-type na wika na binuo sa C.

Reflection ay ang kakayahan ng isang programa na suriin at baguhin ang sarili nitong istraktura habang tumatakbo. Sa iOS Runtime, ito ay ipinapatupad sa pamamagitan ng mga function tulad ng class_getInstanceMethod, method_exchangeImplementations at objc_getAssociatedObject. Sa Kotlin/Java, ang reflection ay gumagamit ng KClass / java.lang.reflect.

Sa IT Sectr, bihira naming gamitin ang Runtime — para lamang sa mga tiyak na gawain kung saan walang alternatibo. Halimbawa, Method Swizzling para sa sentralisadong analytics logging o pag-aayos ng bug sa mga library. Gayunpaman, ang Runtime ay isang makapangyarihang tool na nangangailangan ng malalim na pag-unawa at pag-iingat.

Method Swizzling

Method Swizzling ay isang pamamaraan para sa pagpapalit ng implementasyon ng isang Objective-C metodo ng iba habang tumatakbo. Ito ay isang espesyal na kaso ng Aspect-Oriented Programming (AOP) para sa iOS. Ang Swizzling ay nagpapahintulot sa pagdaragdag ng logging, analytics o caching sa mga umiiral na metodo nang hindi binabago ang kanilang source code.

Isang tipikal na halimbawa: pagpapalit ng viewWillAppear: sa UIViewController para magdagdag ng awtomatikong screen logging. Mahalaga: ang swizzling ay dapat isagawa sa +load o +initialize metodo upang matiyak ang pag-execute bago gamitin ang klase. Ang maling swizzling ay maaaring magdulot ng hindi tiyak na pag-uugali at mga bug na mahirap i-debug.

// Method Swizzling para sa logging ng 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]; // pagtawag sa orihinal na metodo
    [Analytics logScreen:NSStringFromClass([self class])];
}

@end

Ang code na ito ay pinapalitan ang viewWillAppear: sa lahat ng UIViewController sa pamamagitan ng swizzling. Pagkatapos ng method_exchangeImplementations, ang pagtawag sa orihinal na viewWillAppear: ay humahantong sa pagtawag ng xxx_viewWillAppear:, na tumatawag sa orihinal na metodo (sa pamamagitan ng recursive call) at nagdaragdag ng analytics. Ginagarantiya ng DispatchOnce ang isang beses na pag-execute ng swizzling.

Mga Tool sa Web (Transpilation, Polyfill, Bundler, Webpack, Metro)

Ang modernong web development at mobile development na may React Native o Flutter ay imposible nang walang mga tool sa pagbuo. Transpilation ay ang pag-convert ng code mula sa isang wika patungo sa iba. Ang pinakasikat na halimbawa: TypeScript → JavaScript. Ang transpiler (Babel, tsc) ay nagko-convert ng modernong code sa isang backward-compatible na bersyon.

Polyfill ay code na nagdaragdag ng nawawalang functionality sa mga lumang browser. Halimbawa, ang Promise.allSettled() ay hindi gumagana sa Internet Explorer, ngunit ang polyfill ay nagdaragdag ng kakayahang ito. Hindi tulad ng katutubong Runtime, na namamahala sa pag-execute ng code nang direkta sa device, ang mga polyfill at transpiler ay gumagana sa antas ng abstraction ng wika — iniangkop nila ang syntax at API, ngunit hindi nakikialam sa execution environment.

Webpack ay ang pinakasikat na bundler (ginagamit sa 72% ng mga proyekto ayon sa State of JS 2024). Metro ay ang bundler ng Facebook, ginagamit bilang default sa React Native. Reflection sa JavaScript ay umiiral sa pamamagitan ng Object.getPrototypeOf, Proxy at Reflect API — ang mga mekanismong ito ay nagpapahintulot sa pagsusuri at pagbabago ng mga object habang tumatakbo, na pangunahing naiiba mula sa static module analysis sa mga bundler. Ang Webpack ay gumagamit ng configuration file na naglalarawan ng entry point, output, loaders (para sa pagproseso ng iba't ibang uri ng file) at plugins (para sa karagdagang functionality).

// webpack.config.js — minimal na configuration
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',
};

Ang configuration na ito ay tumutukoy sa entry point (index.js), output file (bundle.js) at isang panuntunan para sa pagproseso ng JavaScript sa pamamagitan ng Babel. Ang production mode ay nagpapagana ng mga optimization: minification, tree shaking at awtomatikong detection ng environment. Sa Runtime stage, ang lahat ng optimization na ito ay hindi na nakakaapekto sa logic — ang browser ay nag-execute ng minified bundle bilang ordinaryong JavaScript.

Code Optimization (Minification, Tree Shaking, Obfuscation)

Minification ay ang proseso ng pag-compress ng code sa pamamagitan ng pag-alis ng espasyo, komento at pagpapalit ng pangalan ng mahabang variable sa maikli. Mga sikat na minifier: Terser (JS/TS), CSSNano (CSS), html-minifier-terser. Ang minification ay nagbabawas ng laki ng file ng 50–70%. Sa produksyon, ang Runtime ay nag-execute ng minified code tulad ng orihinal na code — ang pagkakaiba ay nasa pagiging nababasa at laki ng file, hindi sa semantika.

Tree Shaking ay ang pagtanggal ng patay na code na hindi ginagamit sa application. Ito ay gumagana batay sa static analysis ng ES modules (import/export). Kung ang isang function ay na-export ngunit hindi kailanman na-import, tatanggalin ito ng Tree Shaking mula sa huling build. Ang Tree Shaking ay nagsusuri ng code nang static — hindi tulad ng Reflection, na gumagana nang dinamiko at maaaring ma-access ang mga metodo at property na hindi nakikita sa oras ng compilation.

Tree Shaking

Tree Shaking sa Webpack ay awtomatikong naa-activate sa production mode. Isang mahalagang kondisyon: ang code ay dapat gumamit ng ES modules (import/export), hindi CommonJS (require). Kung ang library ay nakasulat sa CommonJS, hindi gagana ang tree shaking. Para sa optimal na tree shaking, gumamit ng tiyak na import: import { merge } from 'lodash-es' sa halip na import _ from 'lodash'. Ito ay nagbabawas ng laki ng bundle mula 500 KB hanggang 10 KB para sa isang function.

Hot Reload

Hot Reload ay isang teknolohiya na nagpapahintulot sa pag-update ng application code nang walang buong pag-reload. Sa React Native at Flutter, ang Hot Reload ay nag-a-update ng binagong file on the fly, na pinapanatili ang kasalukuyang estado ng application. Ito ay radikal na nagpapabilis ng pag-develop: ang mga pagbabago ay nakikita sa loob ng 1–2 segundo sa halip na 10–30 segundo para sa buong rebuild. Ang Hot Reload ay gumagana sa loob ng Runtime: ang binagong module ay ini-inject sa tumatakbong application nang hindi ni-restart ang execution environment.

Ang Hot Restart ay isang mabilis na pag-restart ng application na may updated na code, ngunit walang pagpapanatili ng estado. Ito ay ginagamit kapag hindi posible ang Hot Reload (halimbawa, kapag nagbago ang native code o global variable). Sa IT Sectr, ginagamit namin ang Hot Reload sa lahat ng yugto ng pag-develop ng UI — nakakatipid ito ng hanggang 50% ng oras sa visual na mga adjustment.

Talaan 3. Paghahambing ng mga tool sa pagbuo. Ang Webpack ay ang universal standard. Ang Metro ay espesyalisado para sa React Native. Ang Vite at esbuild ay ang bagong henerasyon na nakatuon sa bilis. Ang Rollup ay ang pinakamahusay na pagpipilian para sa pag-publish ng mga library.

Hot Reload (Hot Reload, Hot Restart)

Hot Reload ay isang teknolohiya na nagmula sa web development (React Hot Loader, HMR — Hot Module Replacement) at lumipat sa mobile development kasama ang Flutter at React Native. Ang esensya: kapag nagbago ang isang file, ang bundler ay nagpapadala ng updated na module sa tumatakbong application, na pinapalitan ang lumang code nang walang pagkawala ng estado. Hindi tulad ng buong rebuild, hindi ni-restart ng Hot Reload ang Runtime — ang execution environment ay patuloy na tumatakbo at ang binagong module ay dinamikong kumokonekta sa pamamagitan ng mekanismo tulad ng HMR o isang Reflection-like na reference update.

Gumagana ang Hot Reload dahil ang framework ay nagpapanatili ng widgets (Flutter) o components (React) sa memory at nag-a-update lamang ng mga binagong bahagi. Hot Restart ay isang mas magaspang na mekanismo: ganap nitong ni-restart ang application, ngunit mas mabilis kaysa sa buong rebuild dahil hindi nito ni-recompile ang native code. Sa IT Sectr, ginagamit namin ang Hot Reload kapag nagde-develop ng UI at Hot Restart kapag nagbabago ng navigation o state management.