মোবাইল ডেভেলপমেন্টে Runtime, Hot Reload এবং বিল্ড: এগুলো কী, মূল ধারণা এবং কীভাবে কাজ করে

Runtime এবং Reflection: iOS Runtime, Method Swizzling এবং ডায়নামিক ডিসপ্যাচ

Runtime (নির্বাহ পরিবেশ) হল সফটওয়্যার যা অ্যাপ্লিকেশন নির্বাহ পরিচালনা করে। iOS Runtime-এর প্রসঙ্গে, এটি Objective-C-এর গতিশীল সিস্টেম যা অবজেক্টে বার্তা পাঠানো, ফ্লাইতে ক্লাস তৈরি এবং রানটাইমে মেথড প্রতিস্থাপনের অনুমতি দেয়। এটি সম্ভব কারণ Objective-C হল C-এর উপরে একটি গতিশীলভাবে টাইপ করা ভাষা।

Reflection হল একটি প্রোগ্রামের নিজস্ব গঠন পরীক্ষা এবং পরিবর্তন করার ক্ষমতা। iOS Runtime-এ, এটি class_getInstanceMethod, method_exchangeImplementations এবং objc_getAssociatedObject-এর মতো ফাংশনের মাধ্যমে বাস্তবায়িত হয়। Kotlin/Java-তে, রিফ্লেকশন KClass / java.lang.reflect ব্যবহার করে।

IT Sectr-এ, আমরা Runtime খুব কমই ব্যবহার করি — শুধুমাত্র নির্দিষ্ট কাজের জন্য যেখানে কোনো বিকল্প নেই। যেমন, কেন্দ্রীভূত বিশ্লেষণ লগিং বা লাইব্রেরিতে বাগ ঠিক করার জন্য Method Swizzling। তবে Runtime একটি শক্তিশালী টুল যার জন্য গভীর বোঝাপড়া এবং সতর্কতা প্রয়োজন।

Method Swizzling

Method Swizzling হল একটি কৌশল যা রানটাইমে একটি Objective-C মেথডের বাস্তবায়নকে অন্যটির সাথে প্রতিস্থাপন করে। এটি iOS-এর জন্য Aspect-Oriented Programming (AOP)-এর একটি বিশেষ ক্ষেত্র। Swizzling বিদ্যমান মেথডের সোর্স কোড পরিবর্তন না করেই লগিং, বিশ্লেষণ বা ক্যাশিং যোগ করার অনুমতি দেয়।

একটি সাধারণ উদাহরণ: স্বয়ংক্রিয় স্ক্রিন লগিং যোগ করতে UIViewController-এ viewWillAppear: প্রতিস্থাপন করা। গুরুত্বপূর্ণ: swizzling +load বা +initialize মেথডে করা উচিত যাতে ক্লাস ব্যবহারের আগে নির্বাহ নিশ্চিত হয়। ভুল swizzling অনির্ধারিত আচরণ এবং ডিবাগ করা কঠিন বাগ সৃষ্টি করতে পারে।

// Method Swizzling for logging 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]; // মূল মেথড কল করা
    [Analytics logScreen:NSStringFromClass([self class])];
}

@end

এই কোডটি swizzling-এর মাধ্যমে সব UIViewController-এ viewWillAppear: প্রতিস্থাপন করে। method_exchangeImplementations-এর পরে, মূল viewWillAppear: কল করলে xxx_viewWillAppear: কল হয়, যা মূল মেথড কল করে (পুনরাবৃত্ত কলের মাধ্যমে) এবং বিশ্লেষণ যোগ করে। DispatchOnce swizzling-এর একবার নির্বাহ নিশ্চিত করে।

ওয়েব টুলস (Transpilation, Polyfill, Bundler, Webpack, Metro)

আধুনিক ওয়েব ডেভেলপমেন্ট এবং React Native বা Flutter-এর সাথে মোবাইল ডেভেলপমেন্ট বিল্ড টুলস ছাড়া অসম্ভব। Transpilation হল এক ভাষা থেকে অন্য ভাষায় কোড রূপান্তর। সবচেয়ে জনপ্রিয় উদাহরণ: TypeScript → JavaScript। একটি ট্রান্সপাইলার (Babel, tsc) আধুনিক কোডকে পশ্চাৎ-সামঞ্জস্যপূর্ণ সংস্করণে রূপান্তর করে।

Polyfill হল কোড যা পুরনো ব্রাউজারে অনুপস্থিত কার্যকারিতা যোগ করে। উদাহরণস্বরূপ, Promise.allSettled() Internet Explorer-এ কাজ করে না, কিন্তু polyfill এই ক্ষমতা যোগ করে। নেটিভ Runtime-এর বিপরীতে, যা সরাসরি ডিভাইসে কোড নির্বাহ পরিচালনা করে, polyfills এবং ট্রান্সপাইলার ভাষা অ্যাবস্ট্রাকশন স্তরে কাজ করে — তারা সিনট্যাক্স এবং API মানিয়ে নেয়, কিন্তু নির্বাহ পরিবেশে হস্তক্ষেপ করে না।

Webpack সবচেয়ে জনপ্রিয় বান্ডলার (State of JS 2024 অনুসারে 72% প্রকল্পে ব্যবহৃত)। Metro হল ফেসবুকের বান্ডলার, React Native-এ ডিফল্টরূপে ব্যবহৃত। JavaScript-এ Reflection Object.getPrototypeOf, Proxy এবং Reflect API-র মাধ্যমে বিদ্যমান — এই প্রক্রিয়াগুলো রানটাইমে অবজেক্ট পরীক্ষা এবং পরিবর্তনের অনুমতি দেয়, যা বান্ডলারগুলিতে স্ট্যাটিক মডিউল বিশ্লেষণ থেকে মৌলিকভাবে ভিন্ন। Webpack একটি কনফিগারেশন ফাইল ব্যবহার করে যা এন্ট্রি পয়েন্ট, আউটপুট, লোডার (বিভিন্ন ফাইল টাইপ প্রক্রিয়াকরণের জন্য) এবং প্লাগইন (অতিরিক্ত কার্যকারিতার জন্য) বর্ণনা করে।

// webpack.config.js — ন্যূনতম কনফিগারেশন
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',
};

এই কনফিগারেশন এন্ট্রি পয়েন্ট (index.js), আউটপুট ফাইল (bundle.js) এবং Babel-এর মাধ্যমে JavaScript প্রক্রিয়াকরণের জন্য একটি নিয়ম সংজ্ঞায়িত করে। production মোড অপটিমাইজেশন সক্ষম করে: মিনিফিকেশন, ট্রি শেকিং এবং স্বয়ংক্রিয় পরিবেশ শনাক্তকরণ। Runtime পর্যায়ে, এই সব অপটিমাইজেশন লজিককে প্রভাবিত করে না — ব্রাউজার মিনিফায়েড বান্ডলকে সাধারণ JavaScript হিসেবে নির্বাহ করে।

কোড অপটিমাইজেশন (Minification, Tree Shaking, Obfuscation)

Minification হল স্পেস, মন্তব্য মুছে এবং লম্বা ভেরিয়েবলের নাম ছোট করে কোড সংকুচিত করার প্রক্রিয়া। জনপ্রিয় মিনিফায়ার: Terser (JS/TS), CSSNano (CSS), html-minifier-terser। মিনিফিকেশন ফাইলের আকার 50–70% কমায়। প্রোডাকশনে, Runtime মিনিফায়েড কোডকে মূল কোডের মতোই নির্বাহ করে — পার্থক্য শুধু পঠনযোগ্যতা এবং ফাইলের আকারে, শব্দার্থে নয়।

Tree Shaking হল অ্যাপ্লিকেশনে ব্যবহৃত নয় এমন মৃত কোড অপসারণ। এটি ES মডিউল (import/export)-এর স্ট্যাটিক বিশ্লেষণের ভিত্তিতে কাজ করে। যদি কোনো ফাংশন এক্সপোর্ট করা হয় কিন্তু কখনো ইম্পোর্ট না হয়, Tree Shaking তা চূড়ান্ত বিল্ড থেকে সরিয়ে ফেলে। Tree Shaking কোড স্ট্যাটিকভাবে বিশ্লেষণ করে — Reflection-এর বিপরীতে, যা গতিশীলভাবে কাজ করে এবং কম্পাইল সময়ে অদৃশ্য মেথড এবং প্রপার্টিতে অ্যাক্সেস করতে পারে।

Tree Shaking

Tree Shaking Webpack-এ প্রোডাকশন মোডে স্বয়ংক্রিয়ভাবে সক্রিয় হয়। একটি গুরুত্বপূর্ণ শর্ত: কোডকে ES মডিউল (import/export) ব্যবহার করতে হবে, CommonJS (require) নয়। যদি কোনো লাইব্রেরি CommonJS-এ লেখা হয়, ট্রি শেকিং কাজ করবে না। সর্বোত্তম ট্রি শেকিং-এর জন্য, সঠিক ইম্পোর্ট ব্যবহার করুন: import _ from 'lodash'-এর পরিবর্তে import { merge } from 'lodash-es'। এটি একটি ফাংশনের জন্য বান্ডল আকার 500 KB থেকে 10 KB-তে কমিয়ে আনে।

Hot Reload

Hot Reload হল একটি প্রযুক্তি যা সম্পূর্ণ পুনঃলোড ছাড়াই অ্যাপ্লিকেশন কোড আপডেট করতে দেয়। React Native এবং Flutter-এ, Hot Reload চলমান অবস্থায় পরিবর্তিত ফাইল আপডেট করে, বর্তমান অ্যাপ্লিকেশন অবস্থা সংরক্ষণ করে। এটি ডেভেলপমেন্টকে মৌলিকভাবে গতি দেয়: সম্পূর্ণ পুনর্নির্মাণের জন্য 10–30 সেকেন্ডের পরিবর্তে পরিবর্তন 1–2 সেকেন্ডে দেখা যায়। Hot Reload Runtime-এর মধ্যে কাজ করে: নির্বাহ পরিবেশ পুনরায় চালু না করেই পরিবর্তিত মডিউল চলমান অ্যাপ্লিকেশনে ইনজেক্ট করা হয়।

Hot Restart হল আপডেটেড কোড সহ অ্যাপ্লিকেশনের দ্রুত পুনরায় চালু, কিন্তু অবস্থা সংরক্ষণ না করে। এটি ব্যবহার করা হয় যখন Hot Reload সম্ভব নয় (যেমন, যখন নেটিভ কোড বা গ্লোবাল ভেরিয়েবল পরিবর্তিত হয়েছে)। IT Sectr-এ, আমরা UI ডেভেলপমেন্টের সব পর্যায়ে Hot Reload ব্যবহার করি — এটি ভিজুয়াল সমন্বয়ে 50% পর্যন্ত সময় বাঁচায়।

সারণী 3. বিল্ড টুলসের তুলনা। Webpack সার্বজনীন মান। Metro React Native-এর জন্য বিশেষায়িত। Vite এবং esbuild গতির উপর কেন্দ্রীভূত নতুন প্রজন্ম। Rollup লাইব্রেরি প্রকাশের জন্য সর্বোত্তম পছন্দ।

হট রিলোড (Hot Reload, Hot Restart)

Hot Reload হল একটি প্রযুক্তি যা ওয়েব ডেভেলপমেন্টে (React Hot Loader, HMR — Hot Module Replacement) উদ্ভূত এবং Flutter ও React Native-এর সাথে মোবাইল ডেভেলপমেন্টে স্থানান্তরিত। সারমর্ম: যখন একটি ফাইল পরিবর্তিত হয়, বান্ডলার আপডেটেড মডিউল চলমান অ্যাপ্লিকেশনে পাঠায়, যা অবস্থা না হারিয়েই পুরনো কোড প্রতিস্থাপন করে। সম্পূর্ণ পুনর্নির্মাণের বিপরীতে, Hot Reload Runtime পুনরায় চালু করে না — নির্বাহ পরিবেশ চলতে থাকে, এবং পরিবর্তিত মডিউল HMR বা Reflection-সদৃশ রেফারেন্স আপডেটের মতো প্রক্রিয়ার মাধ্যমে গতিশীলভাবে সংযুক্ত হয়।

Hot Reload কাজ করে কারণ ফ্রেমওয়ার্ক উইজেট (Flutter) বা কম্পোনেন্ট (React) মেমোরিতে রাখে এবং শুধু পরিবর্তিত অংশ আপডেট করে। Hot Restart একটি মোটা প্রক্রিয়া: এটি অ্যাপ্লিকেশন সম্পূর্ণরূপে পুনরায় চালু করে, কিন্তু সম্পূর্ণ পুনর্নির্মাণের চেয়ে দ্রুত কারণ এটি নেটিভ কোড পুনরায় কম্পাইল করে না। IT Sectr-এ, আমরা UI ডেভেলপ করার সময় Hot Reload এবং নেভিগেশন বা স্টেট ম্যানেজমেন্ট পরিবর্তন করার সময় Hot Restart ব্যবহার করি।